実施環境
・macOS Catalina バージョン 10.15.6
・Docker Desktop Community Version 2.3.0.5
この記事ではDockerのインストール方法は記述していません。
各自インストールした状態で記事を読み進めてください。
Dockerの準備
- 準備するにあたって
- node.js や nuxt のフレームワークのインストールは docker のコンテナ内でおこなう
- docker を利用する事で、開発環境を共有したいときの時間を短縮できる
アプリを作成したい、好みのディレクトリに移動します。
私はMyNuxtAppとしました。
まず、アプリケーションのディレクトリを作成し、
Docker関連のファイルを作成します。
(任意のディレクトリへ移動)
cd ~/Applications
mkdir MyNuxtApp
cd MyNuxtApp
touch Dockerfile
Dockerfile
FROM node:12.16.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
Dockerfile編集後は保存を忘れずにお願いします。
また、ターミナルで編集しても良いです。
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 という名前のイメージを作成します。
これから開発するアプリケーションの名前を入れると良いでしょう。
docker build -t nuxt-test .
Docker イメージが作成できたらイメージからコンテナを作成し、コンテナ内に入ります。
コンテナ名は ctr-nuxt-test としています。
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のオプションについては、
他記事を参照ください。
# 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 で起動するようにします。
(インストールが終了したら一旦、コンテナから出ます)
# exit
exit
この段階で、
~/Applications/MyNuxtApp/nuxt-test-web
というディレクトリにアプリケーションができています。ディレクトリ構造をご確認ください。
MyNuxtApp
|___ Dockerfile
|___ nuxt-test-web (ここにNuxt.js アプリケーションが入っている)
nuxt-test-web 内のアプリケーションを１つ階層をあげて、 MyNuxtApp 内に移します（docker利用のため）。
-n コマンドは、移動元と移動先で同一名ファイルがあった時に上書きをせずに両方残すことができます。
(隠しファイルを除く全ファイルを移動)
mv -n ~/Applications/MyNuxtApp/nuxt-test-web/* ~/Applications/MyNuxtApp
(隠しファイルを移動)
mv -n ~/Applications/MyNuxtApp/nuxt-test-web/.[^\.]* ~/Applications/MyNuxtApp
移動元のディレクトリ（nuxt-test-web）が空になっているか確認します。
空でない場合でも、削除して問題なければディレクトリを削除します。
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周りの設定をします。
(初期のイメージを削除)
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
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'
yarn install && \
yarn dev
これでいよいよ準備完了です！実行の確認をしましょう。
（初回）
docker-compose up --build
（２回目以降）
docker-compose up
立ち上がったかどうか、localhost:3000 で確認してください！
自分で指定したプロジェクト名が表示されていればdocker compose での起動が成功です！