Docker composeでNuxt.js 2.xの開発環境を整えるメモ
更新履歴
click
2022/3/11
- Nuxt 3向けの文章を書きました、こちらから閲覧できます。
2022/3/5
- Nuxt 3(Beta)がリリースされているため、タイトルを変更しました、Nuxt 3向けの文章はしばらくしたら書くと思います。
- Zenn CLIを導入したついでに文章のslugを変更しました、これによりいいねがリセットされてしまいましたのでブクマ用にいいねしてた人はよければ再度お願いします。
2021/9/7
- 文章を公開しました
個人用メモです、間違っていたら訂正お願いします。
いろいろなところに詰まった結果ほぼほぼこれと同じになりました
手っ取り早く構築したい人はGitHubからどうぞ
環境
> 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内は以下のように記述します
FROM node:alpine
RUN apk update && \
yarn global add create-nuxt-app
docker-compose.yml の作成
Compose とは、複数のコンテナを定義し実行する Docker アプリケーションのためのツールです。
docker Compose 概要
docker-compose.ymlを追加します
NuxtProject/
+ ├ docker-compose.yml
└ Dockerfile
version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
working_dir: "/src"
volumes:
- "./src:/src"
- node_modules_volume:/src/node_modules
tty: true
environment:
- HOST=0.0.0.0
- CHOKIDAR_USEPOLLING=true
volumes:
node_modules_volume:
書いてあることはこれとほぼ同一です。ただし
- ホットリロードを有効化するために
CHOKIDAR_USEPOLLING=trueを追加 - マウントするボリュームの位置の変更
を行っています。
コンテナの起動
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}を以下のようにする
"scripts": {
"dev": "HOST=0.0.0.0 PORT=3000 nuxt",
︙
︙
}
参考
使用したツール
最後に
途中でなぜかページ表示されずに3日くらい詰まってたんですけどこの記事で全部解決しました。
もともとはあまりいい感じの導入方法が書かれている記事がないなーっていう理由で書いたんですけど必要ないですね。
上の記事を書いてくれたngplus6655さん、本当にありがとうございました。
Discussion