LoginSignup
11

More than 3 years have passed since last update.

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

Posted at

環境

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-page.png
よし!

ホットリロード

サーバー再起動するが面倒なのでホットリロードの設定をつけます。
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/

動きました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11