Nuxt3をdocker-composeで構築する

Nuxt3の環境をdocker-composeで構築するためのdocker-compose.ymlの設定を記載しています。

version: '3.9'
services:
  nuxt:
    container_name: nuxt-app  # コンテナ名
    image: node:18-alpine  # Dockerイメージ、軽量なalpineを指定
    ports:
      - 3000:3000  # NuxtへHTTPアクセスする際のPortを開放
    volumes:
      - ./nuxt-app:/nuxt-app  # Nuxtプロジェクトをbind mountする
    # Nuxtを起動する、またyarn installは未実施の場合のみ実施する
    command: >
      sh -c "
        if [ ! -e node_modules ]; then
          yarn install
        fi
        yarn dev"
    working_dir: /nuxt-app
    environment:
      - CHOKIDAR_USEPOLLING=true  # ホットリロードの設定
      - HOST=0.0.0.0  # ホストマシンからアクセスするための設定

Nuxt3のプロジェクト作成

Nuxtのプロジェクトを作成していない場合は、docker-compose.ymlを下記へ修正し、コンテナを使用してプロジェクトを作成できます。
volumesのディレクトリ名はプロジェクト名になっています。

version: '3.9'
services:
  nuxt:
    container_name: nuxt-app
    image: node:18-alpine
    ports:
      - 3000:3000
    volumes:
      - ./nuxt-app:/nuxt-app  # プロジェクト名
    # command: >
    #   sh -c "
    #     if [ ! -e node_modules ]; then
    #       yarn install
    #     fi
    #     yarn dev"
    # working_dir: /nuxt-app
    environment:
      - CHOKIDAR_USEPOLLING=true
      - HOST=0.0.0.0
    tty: true  # 追記

上記の設定でコンテナを起動後、docker exec -it nuxt-app ashを実行しコンテナへログインします。
ログイン後、公式の通りにプロジェクトを作成します。
プロジェクト名は、docker-compose.ymlのvolumesに指定したディレクトリ名にします。
プロジェクト作成後に、docker-compose.ymlを元に戻して完了です。