Zenn
🥝

Docker × Nuxt3 開発環境構築

2024/10/13に公開
Docker
docker-compose
Nuxt 3
tech

環境

  • macOS Sonoma Version 14.6
  • Docker Desktop for Mac

1. Node.jsのコンテナ起動

1-1. Dockerfile

Dockerfile
FROM node:22.9.0-alpine3.19

# working directory の指定
WORKDIR /app

# 必要なパッケージのインストール
RUN apk update \
    && apk add --no-cache bash

1-2. compose.yaml

compose.yaml
services:
  nuxt:
    build: .
    volumes:
      # コンテナ内からホスト側のファイルを参照できるようにする
      - .:/app
    ports:
      # ホスト側の3000番ポートをコンテナ内の3000番ポートにマッピング
      # localhost:3000でアクセスするために必要
      - 3000:3000
    tty: true

1-3. コンテナ起動

  • build して　upする

    terminal
    $ docker compose build && docker compose up -d

  • upしたかどうかの確認

    terminal
    $ docker compose ps
NAME              IMAGE           COMMAND                  SERVICE   CREATED         STATUS         PORTS
frontend-nuxt-1   frontend-nuxt   "docker-entrypoint.s…"   nuxt      8 seconds ago   Up 7 seconds   0.0.0.0:3000->3000/tcp

2. Nuxt起動

1-2. nuxtのインストール

  • 起動中のコンテナ内のbashを起動する

    terminal
    $ docker compose exec nuxt bash
e70e3d0ecdab:/app#

  • nuxtインストール

    • 公式ドキュメント
    • カレントディレクトリでインストールするためには--forceが必要でした
      コンテナ内terminal
      # npx nuxi init . --force
Need to install the following packages:
nuxi@3.14.0
Ok to proceed? (y) y


✔ Which package manager would you like to use?
npm
◐ Installing dependencies...

 << 省略 >>
                                                                    
✨ Nuxt project has been created with the v3 template. Next steps:
 › Start development server with npm run dev

2-2. nuxt起動

  • npm run devでnuxtの起動ができるようになっています

    コンテナ内terminal
    # npm run dev         

> dev
> nuxt dev

Nuxt 3.13.2 with Nitro 2.9.7                                                                             6:54:14 AM
                                                                                                         6:54:14 AM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.6.0)                                              6:54:15 AM

✔ Vite client built in 14ms                                                                             6:54:16 AM
✔ Vite server built in 251ms                                                                            6:54:16 AM
✔ Nuxt Nitro server built in 416 ms                                                               nitro 6:54:16 AM
ℹ Vite client warmed up in 0ms                                                                          6:54:16 AM
ℹ Vite server warmed up in 433ms

  • http://localhost:3000/にアクセスしてnuxtの画面が出ればOK

3. 開発しやすいように調整

3-1. ホットリロード

  • デフォルトではホットリロードになっていないので、設定を変更します

    • 参考
      nuxt.config.ts
      // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  // ↓ 以下を追加
  vite: {
    server: {
        watch: {
            usePolling: true
        }
    },
  },
})

  • app.vueを変更して保存すると、ブラウザの表示も更新されることを確認してみる

    • app.vue(最初のNuxtの画面を出しているファイル)を適当に編集

      app.vue
      <template>
    <div>
      やっほー
      <NuxtRouteAnnouncer />
      <NuxtWelcome />
    </div>
  </template>
      • ブラウザの表示も自動で更新される

3-2. コンテナ起動時にnuxtサーバーも起動

  • compose.yaml でcommandを追加します

    compose.yaml
    services:
    nuxt:
      build: .
      volumes:
        # コンテナ内からホスト側のファイルを参照できるようにする
        - .:/app
      ports:
        # ホスト側の3000番ポートをコンテナ内の3000番ポートにマッピング
        # localhost:3000でアクセスするために必要
        - 3000:3000
      # 起動時のコマンドを指定
      command: npm run dev
      tty: true

  • docker compose up後に自動でnuxtが起動するようになります

参考にしたサイト

Discussion