概要
- nuxt.jsのセットアップ、新規プロジェクト作成、サーバー起動までをかんたん手順で行えます。
- Dockerコンテナとして構築するので、お手元のPCを汚しません。
- 複製、破棄、構築し直しも、手軽に行えます。
github（一式ダウンロード）
必要なもの
- Docker
- docker-compose
- makeコマンド
がインストールされている Mac / Linux。
（WindowsではnodeのDockerコンテナが起動しませんでした。要調査。）
使い方
https://github.com/yagrush/docker-nuxtjs のリポジトリをcloneまたはダウンロード＆解凍する。
以下の２つのファイルを編集する。
.env
PROJECT_NAMEの値をご自分の希望に合わせて編集してください。
この値は、nuxt.jsプロジェクトのディレクトリ名にもなります。
PROJECT_NAME=my_project
Makefile
Makefileは、makeコマンド用の設定ファイルです。
これを使うと、複数のコマンド操作に名前を付けて、ショートカットのように簡単に呼び出せます。
さて、最近のバージョンでは、create-nuxt-app（nuxt.jsプロジェクト作成コマンド）実行時、途中でカスタム内容の指定を求められます。
本一式ではその入力を自動化するために create-nuxt-app実行時のオプション --answers で予めカスタム内容を指定するようにしています。
カスタム項目一覧はこちらの公式ソースコードからご確認いただけます。
nuxt.js公式リポジトリ内、prompts.js
--answers のパラメータをJSON形式で指定して、ご自分のご希望に合わせて下さい。
...
...
create-nuxt-app:
docker-compose exec dev bash -c 'create-nuxt-app $$PROJECT_NAME --answers "{ \
\"name\": \"$$PROJECT_NAME\", \
\"language\": \"js\", \
\"pm\": \"yarn\", \
\"ui\": \"vuetify\", \
\"features\": [\"axios\"], \
\"linter\": [\"eslint\"], \
\"test\" : \"jest\", \
\"mode\" : \"universal\", \
\"target\" : \"static\", \
\"devTools\": [\"jsconfig.json\"] }" \
'
...
...
※ エスケープが若干複雑ですみません。
Makefile > docker-compose > bash -c と入れ子になっているので…
基本的にサンプルをコピペ＆編集して頂ければ大丈夫かとは思います。
（サンプルの設定は、単なる私の好みです。）
コマンドインターフェース（ターミナル）を起動する。
ダウンロードしたフォルダの中に移動する。
# git cloneした場合
cd docker-nuxtjs
# ZIPをダウンロードして解凍した場合
cd docker-nuxtjs-master
以下のコマンドを実行する。
make init
成功すると、このようなコマンドログになります。↓
...
...
yarn run v1.22.4
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 24.57s.
🎉 Successfully created project my_project
To get started:
cd my_project
yarn dev
To build & start for production:
cd my_project
yarn build
yarn start
To test:
cd my_project
yarn test
docker-compose exec dev bash -c 'sed -i -e "s@export default {@export default {\n telemetry: false,\n@g" $PROJECT_NAME/nuxt.config.js'
docker-compose exec -d dev bash -c 'cd $PROJECT_NAME && npm run dev'
$
ちょっぴり解説コーナー
docker-compose exec dev bash -c 'sed -i -e "s@export default {@export default {\n telemetry: false,\n@g" $PROJECT_NAME/nuxt.config.js'
↑このコマンドは、nuxt.config.jsのexport default節に telemetry: false を追記します。
これにより、最近npm run dev実行時に「サービス向上のため情報送信に協力するか？」の回答入力を要求されてしまうのを自動的に回避（falseだと拒否）します。
docker-compose exec -d dev bash -c 'cd $PROJECT_NAME && npm run dev'
↑Nuxt開発サーバーを起動しています。
Nuxt開発サーバーは、ソースコードの変化をウォッチして即座に再レンダリングしブラウザ画面に反映してくれます。
npm run devはnuxtコマンドを実行するのと同義になります。
Nuxt.jsサンプルページが起動しているはずなのでアクセスしてみる。
↑ こんなページ、見れましたでしょうか？
見れたら成功です。
本リポジトリ内のapp/(make initすれば生成されます)とdockerコンテナ内の/work/appが同期（ボリュームマウント）しているので、例えばapp/$PROJECT_NAME/pages/index.vueを編集すれば、即座に↑のサンプルページに反映されます。
Dockerコンテナを停止する
make stop
Dockerコンテナを起動する
make up
Dockerコンテナを再ビルドする
make remake
docker-compose.yml や Dockerfile を変更したあと反映させたい時はこのコマンドを。
※ Nuxt.jsプロジェクトの再作成はしません。Dockerコンテナとしての再ビルドです。
本一式を完全廃棄する
make destroy
これにより
- Dockerコンテナ停止
- Dockerコンテナ削除
が実行されます。
※ app/ の中身をいきなり削除はしないのでご安心ください。
そのあと、ご自身の手で本一式のディレクトリを削除してください。
あとがき
js界隈は変化が速過ぎて、WEB文献そのままでは全然動かず苦労します。
これを流用して少しでもショートカットして、みなさんのコーディング時間確保などに役立てれば幸いです。
また、nginxで動かすproduction版など改善の余地がまだまだあるので、時間あるときにまた更新していきます。