dockerで作るnuxt.jsの開発環境

環境

docker desktop for windows(wsl2)

実装

Dockerfile

FROM node:12.18.2-alpine

RUN apk update && \
    npm install -g npm && \
    npm install -g create-nuxt-app
    
ENV HOST 0.0.0.0
EXPOSE 3000

node.jsの最新安定板のコンテナイメージでnpmの更新とcreate-nuxt-appをインストールしています。それからホスト側からアクセスできるようにします。

docker-compose.yml

version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    working_dir: "/usr/local/src"
    volumes:
      - ".:/usr/local/src"
      - node_modules_volume:/usr/local/src/first-app/node_modules
    tty: true
volumes:
  node_modules_volume:

Dockerfileと同じディレクトリ内に配置して使います。
ポートフォワーディングとデータ永続化、コンテナの起動を維持するためのtty: trueだけを記述したシンプルな構成です。あとは、node_module用にVolumeを作成します。これがあるのと無いのとでは実行速度に天と地の差がありました。

ビルド&起動

$ docker-compose build
$ docker-compose up

すると、dockerのダッシュボードから確認できるようになるので、cliからコンテナの中に入ります。

アプリケーション作成

/usr/local/src # npx create-nuxt-app first-app

create-nuxt-app v3.1.0
✨  Generating Nuxt.js project in first-app
? Project name: first-app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios, Progressive Web App (PWA)
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code)
.
.
.

🎉  Successfully created project first-nuxt-app

  To get started:

        cd first-nuxt-app
        yarn dev

  To build & start for production:

        cd first-nuxt-app
        yarn build
        yarn start

  To test:

        cd first-nuxt-app
        yarn test

nuxtの既成レイアウトを使いたい

https://vuetifyjs.com/ja/getting-started/pre-made-layouts/
この中のBaselineが使いたいのでlayouts/default.vueを変更(コピペ)

cd first-nuxt-app
yarn dev

.
.
.
.

  82:10  error    Insert `⏎`                                                                                                                                                                                                                             prettier/prettier

✖ 16 problems (15 errors, 1 warning)
  15 errors and 0 warnings potentially fixable with the `--fix` option.

詳しいことはわかりませんがprettierがエラーをだした。下記コマンド実行後サーバー再起動。
https://stackoverflow.com/questions/52571675/nuxt-js-module-error-from-node-modules-eslint-loader-index-js

npx prettier --write "**/*.{vue,js}"

よし！

ホットリロード

サーバー再起動するが面倒なのでホットリロードの設定をつけます。
nuxt-config.jsにて

module.exports = {
  ...
    watchers: {
       webpack: {
           poll: true
       }
    }

 Waiting for file changes                                                                                    15:57:50
ℹ Memory usage: 472 MB (RSS: 595 MB)                                                                          15:57:50
ℹ Listening on: http://172.21.0.2:3000/

動きました！