Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

動きました!

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
3
Help us understand the problem. What are the problem?