はじめに

今回用意するコンテナは4つです
必要なタイミングに応じてdocker-compose upコマンドで1つずつコンテナを起動します

nodeコンテナ
create-nuxt-appするために使用
devコンテナ
yarn devを実行し、サーバーを起動する
アプリ開発中に使用します
generateコンテナ
静的ファイルを出力するために使用します
dev_staticコンテナ
出力した静的ファイルをApatchサーバーを立ててローカルで確認するために使用します
出力結果はdevコンテナで起動中のものと同じ結果なはずなので、必要に応じて使用してください

環境

Windows10 Pro バージョン2004
WSL2
Docker For Windows

1. docker-composeファイル準備

指定するimageのタグはこちらから最新版を取得
おすすめはalpineの最新です
https://hub.docker.com/_/node/

docker-compose.yml

version: '3'

services:
  node: &app_base
    image: node:14.5.0-alpine3.10
    tty: true
    working_dir: /var/www
    volumes:
      - ./src:/var/www # ./srcをコンテナ内の/var/wwwにマウントする
    environment:
      PORT: 3000
      HOST: 0.0.0.0
    restart: always # エラーなどでコンテナが落ちた際に自動で再起動してくれる
  dev:
    <<: *app_base
    ports:
      - "3000:3000"
    command: yarn dev # upする際に実行されるコマンド
  generate:
    <<: *app_base
    command: yarn generate # upする際に実行されるコマンド
  dev_static:
    image: httpd
    volumes:
      - ./src/dist:/usr/local/apache2/htdocs/
    ports:
      - "8080:80"

2. Nuxt.jsのプロジェクト作成

こちらでコンテナ内に入ります
docker-compose run --rm node sh
必要なパッケージをインストール
yarn global add create-nuxt-app

※Nuxt.js modulesでVuetify.jsを選択する場合
apk add python make g++
プロジェクトの作成

create-nuxt-app ./コマンドを実行し、対話形式でアプリのベースを作成

```
$ create-nuxt-app ./
? Project name: test
> test
? Programming language: JavaScript 
> JavaScript
? Package manager: Yarn
> Yarn
? UI framework: None
> None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> 未選択でEnter
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> 未選択でEnter
? Testing framework: None
> None
? Rendering mode: Universal (SSR / SSG)
> Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
> Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
> 未選択でEnter
```

コンテナから出る

exit

3. 実行

追記：ホットリロード有効化のため設定

Docker For Windows使用の場合、下記設定を追加実施

nuxt.config.jsに下記設定追加

watchers: {
    webpack: {
        poll: true
    }
}

下記コマンドで起動します
```
docker-compose up dev
```
アクセス

4. 静的ファイル出力

下記コマンドを実行すると/distに出力される

docker-compose up generate

5. 出力した静的ファイルをApacheサーバーで確認

下記コマンドで起動します
```
docker-compose up dev_static
```
アクセス

6.参考

以上です、お疲れさまでした。

docker-composeで超簡単にNuxt.jsで静的サイトの開発環境を構築する方法