DockerでNuxt.jsを起動するまで 改訂版

# 実施環境
・macOS Catalina バージョン 10.15.6
・Docker Desktop Community Version 2.3.0.5

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


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

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

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

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

## Dockerfile

```dockerfile:Dockerfile
FROM node:12.16.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
```
Dockerfile編集後は保存を忘れずにお願いします。
また、ターミナルで編集しても良いです。

```console: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` という名前のイメージを作成します。
これから開発するアプリケーションの名前を入れると良いでしょう。

```console:terminal
docker build -t nuxt-test .
```

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

```console: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のオプションについては、
他記事を参照ください。

```console: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` で起動するようにします。

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

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

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

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

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

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

```console: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周りの設定をします。

```console: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
```

```dockerfile: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'
```

```console:compose_command.bash
yarn install && \
yarn dev
```

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

```
（初回）
docker-compose up --build

（２回目以降）
docker-compose up
```

立ち上がったかどうか、localhost:3000 で確認してください！ 
![スクリーンショット 2020-10-28 15.41.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421630/1d0b7570-67b4-e942-0456-05c6d8b13b98.png)

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