⛰️

Docker composeでnuxt.jsの開発環境を整えるメモ

4 min read

個人用メモです、間違っていたら訂正お願いします。
いろいろなところに詰まった結果ほぼほぼこれと同じになりました

https://qiita.com/ngplus6655/items/6dd701450b9f9e8e2b86
手っ取り早く構築したい人はGithubからどうぞ
https://github.com/szne/nuxt-with-docker

環境

> systeminfo
OS Name: Microsoft Windows 10 Home
OS Version: 10.0.19043 N/A Build 19043
> docker -v
Docker version 20.10.5, build 55c4c88
> docker-compose -v
docker-compose version 1.29.0, build 07737305

Docker とかの下ごしらえ

プロジェクトを始めたいディレクトリに移動します、この記事ではNuxtProjectとしています。

+ NuxtProject/

Dockerfile の作成

Docker は Dockerfile から命令を読み込み、自動的にイメージをビルドできます。
Dockerfile リファレンス

DockerfileをNuxtProjectの中に追加します

NuxtProject/
+ └ Dockerfile

Dockerfile内は以下のように記述します

Dockerfile
FROM node:alpine

RUN apk update && \
    yarn global add create-nuxt-app

ENV HOST 0.0.0.0
EXPOSE 3000

docker-compose.yml の作成

Compose とは、複数のコンテナを定義し実行する Docker アプリケーションのためのツールです。
docker Compose 概要

docker-compose.ymlを追加します

NuxtProject/
+ ├ docker-compose.yml
  └ Dockerfile
docker-compose.yml
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    working_dir: "/src"
    volumes:
      - "./src:/src"
      - node_modules_volume:/src/node_modules
    tty: true
    environment:
    - CHOKIDAR_USEPOLLING=true
volumes:
  node_modules_volume:

書いてあることはこれとだいたい同じですが、

  • ホットリロードを有効化するためにCHOKIDAR_USEPOLLING=trueを追加
  • マウントするボリュームの位置の変更

を行っています。
ちなみにnode_modulesのボリュームを指定しないと画面が表示されずに真っ白になります。

コンテナの起動

Dockerイメージを起動します

> docker compose up -d

-dオプションでコンテナはバックグラウンドで起動し、そのまま実行し続けます。Docker-docs-jaより
コンテナが起動していくかどうかを確認します

> docker-compose ps
NAME                SERVICE             STATUS              PORTS
nxts_app_1          app                 running             0.0.0.0:3000->3000/tcp

コンテナが起動しているのを確認したので次の工程に移ります
この時点でディレクトリはこうなっているはずです

NuxtProject/
├ src/
│ └ node_modules/
├ docker-compose.yml
└ Dockerfile

Nuxt.js のインストール

コンテナ内に接続

> docker-compose exec app /bin/sh
/src # 

create-nuxt-app を使ってNuxt.js をインストール

/src # yarn create nuxt-app . --overwrite-dir

--overwrite-dirオプションはそこにあるファイルを上書きして生成するという手順です。つけないとnode_modulesがあるのでつまります。
分からない場合は全部Enterを押せばうまくいくはずです、インストールには5分ほどかかります。
(もしもスクラッチで始めたい場合は公式ドキュメントに方法が乗っています)

起動

/src # yarn dev
yarn run v1.22.5
$ nuxt

   ╭────────────────────────────────────────╮
   │                                        │
   │   Nuxt @ v2.15.8                       │
   │                                        │
   │   ▸ Environment: development           │
   │   ▸ Rendering:   server-side           │
   │   ▸ Target:      server                │
   │                                        │
   │   Listening: http://172.23.0.2:3000/   │
   │                                        │
   ╰────────────────────────────────────────╯

ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized 
✔ Nuxt files generated

✔ Client
  Compiled successfully in 15.11s

✔ Server
  Compiled successfully in 13.43s

ℹ Waiting for file changes
ℹ Memory usage: 164 MB (RSS: 253 MB)
ℹ Listening on: http://172.23.0.2:3000/

最終的なディレクトリ構成

NuxtProject/
├ src/
│ ├ .nuxt/
│ ├ components/
│ │ └ Tutorial.vue
│ ├ node_modules/
│ ├ pages/
│ │ └ index.vue
│ ├ stalic/
│ ├ store/
│ ├ .editrconfig
│ ├ nuxt.config.js
│ ├ package.json
│ └ yarn.lock
├ docker-compose.yml
└ Dockerfile

トラブルシューティング

ページが表示されない(ERR_EMPTY_RESPONSE)

package.jsonの"scripts":{"dev": nuxt}を以下のようにする

package.json
"scripts": {
  "dev": "HOST=0.0.0.0 PORT=3000 nuxt",
  ︙
  ︙
}

参考

https://ja.nuxtjs.org/docs/2.x/get-started/installation
https://qiita.com/shun012526/items/a9137fcbaae303500ce1
https://qiita.com/ngplus6655/items/6dd701450b9f9e8e2b86
https://www.ikkitang1211.site/entry/2020/10/11/213824

使用したツール

https://codogue.com/asciitree/

最後に

途中でなぜかページ表示されずに3日くらい詰まってたんですけどこの記事で全部解決しました。
もともとはあまりいい感じの導入方法が書かれた記事がないなーっていう理由で書いたんですけど必要性全くないですね。
上の記事を書いてくれた@ngplus6655さん、3日間の地獄から救っていただき本当にありがとうございました。

Discussion

ログインするとコメントできます