実施環境

・macOS Catalina バージョン 10.15.6
・Docker Desktop Community Version 2.3.0.5

この記事ではDockerのインストール方法は記述していません。
各自インストールした状態で記事を読み進めてください。

Dockerの準備

準備するにあたって
- node.js や nuxt のフレームワークのインストールは docker のコンテナ内でおこなう
- docker を利用する事で、開発環境を共有したいときの時間を短縮できる

アプリを作成したい、好みのディレクトリに移動します。
私はMyNuxtAppとしました。

まず、アプリケーションのディレクトリを作成し、
Docker関連のファイルを作成します。

terminal

(任意のディレクトリへ移動)
cd ~/Applications
mkdir MyNuxtApp
cd MyNuxtApp
touch Dockerfile

Dockerfile

Dockerfile

FROM node:12.16.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

Dockerfile編集後は保存を忘れずにお願いします。
また、ターミナルで編集しても良いです。

terminal

touch Dockerfile && \
echo 'FROM node:12.16.1' >> Dockerfile && \
echo 'RUN mkdir -p /usr/src/app' >> Dockerfile && \
echo 'WORKDIR /usr/src/app' >> Dockerfile

Dockerfile の準備ができたら、初期のDocker イメージを作成します。
今回は nuxt-test という名前のイメージを作成します。
これから開発するアプリケーションの名前を入れると良いでしょう。

terminal

docker build -t nuxt-test .

Docker イメージが作成できたらイメージからコンテナを作成し、コンテナ内に入ります。
コンテナ名は ctr-nuxt-test としています。

terminal

docker run -it --rm --name ctr-nuxt-test -v "$PWD":/usr/src/app nuxt-test /bin/bash

コンテナ内で nuxt-app をインストールしましょう。
nuxtコミュニティが公開している create-nuxt-app を利用します。
私はyarn を使用し、 nuxt-test-web という名前でアプリケーションを作成します。

create-nuxt-appのオプションについては、
他記事を参照ください。

terminal

# yarn create nuxt-app nuxt-test-web

...
create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in nuxt-test-web
? Project name: nuxt-test-web
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Bootstrap Vue
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username?: Your Github Username
? Version control system: Git
yarn run v1.22.0
...

🎉  Successfully created project nuxt-test-web

  To get started:

	cd nuxt-test-web
	yarn dev

  To build & start for production:

	cd nuxt-test-web
	yarn build
	yarn start

上記のコマンドでもアプリケーションをビルドできますが、せっかくDockerを使うので、
docker-compose up で起動するようにします。

terminal

(インストールが終了したら一旦、コンテナから出ます)
# exit
exit

この段階で、
~/Applications/MyNuxtApp/nuxt-test-web
というディレクトリにアプリケーションができています。ディレクトリ構造をご確認ください。

MyNuxtApp
|___ Dockerfile
|___  nuxt-test-web (ここにNuxt.js アプリケーションが入っている)

nuxt-test-web 内のアプリケーションを１つ階層をあげて、 MyNuxtApp 内に移します（docker利用のため）。
-n コマンドは、移動元と移動先で同一名ファイルがあった時に上書きをせずに両方残すことができます。

terminal

(隠しファイルを除く全ファイルを移動)
mv -n ~/Applications/MyNuxtApp/nuxt-test-web/* ~/Applications/MyNuxtApp
(隠しファイルを移動)
mv -n ~/Applications/MyNuxtApp/nuxt-test-web/.[^\.]* ~/Applications/MyNuxtApp

移動元のディレクトリ（nuxt-test-web）が空になっているか確認します。
空でない場合でも、削除して問題なければディレクトリを削除します。

terminal

ls -al ~/Applications/MyNuxtApp/nuxt-test-web
total 16
drwxr-xr-x   3 ryota  staff    96 10 28 15:05 .
drwxr-xr-x  27 ryota  staff   864 10 28 15:05 ..
-rw-r--r--@  1 ryota  staff  6148 10 28 15:05 .DS_Store

rm -r ~/Applications/MyNuxtApp/nuxt-test-web

ディレクトリの整理が終わったら、Docker周りの設定をします。

terminal

(初期のイメージを削除)
docker images
REPOSITORY     TAG           IMAGE ID         CREATED       SIZE
...
nuxt-test     latest       b02d332b3a85     5 weeks ago    916MB
...
docker rmi nuxt-test

touch docker-compose.yml

(compose のcommand スクリプトを書く。実行権限を付与する必要があります。)
touch compose_command.bash
chmod +x compose_command.bash

docker-compose.yml

version: '3.7'
services:
  web:
    container_name: ctr-nuxt-test
    build:
      context: .
    image: img-nuxt-test
    volumes:
      - .:/usr/src/app
    ports:
      - '3000:3000'
    environment:
      PORT: 3000
      HOST: 0.0.0.0
    command: './compose_command.bash'

compose_command.bash

yarn install && \
yarn dev

これでいよいよ準備完了です！実行の確認をしましょう。

（初回）
docker-compose up --build

（２回目以降）
docker-compose up

立ち上がったかどうか、localhost:3000 で確認してください！

自分で指定したプロジェクト名が表示されていればdocker compose での起動が成功です！