Help us understand the problem. What is going on with this article?

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. アクセス

http://localhost:3000

4. 静的ファイル出力

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

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

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

    docker-compose up dev_static
    
  2. アクセス

http://localhost:8080/

6.参考

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

h-matsufuji
SIerの会社員です。 最近はDockerを触ることが多いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away