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

はじめに

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

1. nodeコンテナ
   create-nuxt-appするために使用

2. devコンテナ
   yarn devを実行し、サーバーを起動する
   アプリ開発中に使用します

3. generateコンテナ
   静的ファイルを出力するために使用します

4. 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のプロジェクト作成

1. こちらでコンテナ内に入ります
   docker-compose run --rm node sh

2. 必要なパッケージをインストール
   yarn global add create-nuxt-app

   ※Nuxt.js modulesでVuetify.jsを選択する場合
   apk add python make g++

3. プロジェクトの作成

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
```

1. コンテナから出る

exit

3. 実行

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

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

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

watchers: {
    webpack: {
        poll: true
    }
}

1. 下記コマンドで起動します

   docker-compose up dev
   

2. アクセス

4. 静的ファイル出力

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

docker-compose up generate

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

1. 下記コマンドで起動します

   docker-compose up dev_static
   

2. アクセス

6.参考

• docker-composeで始めるnuxt.js
• Nuxt.jsでさくっと静的サイトを作ってみよう
• Windows Docker環境でNuxtjsのhotreloadさせる方法

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