DockerでNuxt.jsを起動するまで

# 実施環境

・macOS 10.15.4
・Docker Desktop Community 2.2.0.5

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

# Dockerの準備

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

まず、Docker関連のファイルを作成します。

```console:terminal
% mkdir MyNuxtApp
% cd MyNuxtApp
% touch Dockerfile docker-compose.yml

```

## Dockerfile

```dockerfile:Dockerfile

FROM node:12.4.0-alpine

WORKDIR /app

# コマンド実行
# linux 最新化、gitインストール、npm最新化、vue-cliインストール
RUN apk update && \
 apk add git && \
 npm install -g npm && \
 npm install -g vue-cli

EXPOSE 9000
```

ブラウザで接続する時に9000番を使用するために、9000番を開放しています。

# docker-compose.yml

```docker:docker-compose.yml


# Dockerのバージョン
version: '3'

services:
 nuxt:
   container_name: nuxt_app
   build: .

   # イメージ名
   image: nuxt_app_image

   # ホストOSとコンテナ内でソースコードを共有
   volumes:
    - ./my_nuxt_app:/app
   tty: true

   # コンテナ内部の9000を外部から9000でアクセス
   ports:
    - "9000:9000"
```

<details><summary>vue-cliをインストールしている時に、「非推奨です」と怒られたので、他の方法を検討する必要がありそうです。</summary><div>

```
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
```

</div></details>

# コンテナ起動

まず、dockerイメージを構築するため、ビルドします。
バックグラウンドで起動するため、-d コマンドをつけています。

```terminal:terminal
$ docker-compose build
$ docker-compose up -d

```

一番最初はインストールが必要で時間がかかります。しばらく待ちましょう。
インストールが完了したら、イメージがあるか、コンテナが起動しているかを確認します。

```terminal:terminal

% docker images
REPOSITORY     TAG    IMAGE ID     CREATED        SIZE
nuxt_app_image latest ee8b24df4da9 15 minutes ago 155MB

% docker ps
CONTAINER ID IMAGE          COMMAND                CREATED        STATUS       PORTS              NAMES
bf8510d55dc2 nuxt_app_image "docker-entrypoint.s…" 19 minutes ago Up 4 minutes 0.0.0.0:9000->9000/tcp nuxt_app

```

`docker-compose.yml`で指定したイメージ名・コンテナ名になっているはずです。

# コンテナ接続

```terminal:terminal
% docker exec -it nuxt_app sh
/app #
```
接続に成功すれば、`/app`ディレクトリに入ります。

# Nuxt.jsのプロジェクトの作成・起動

最後に、Nuxtのプロジェクトを作成します。
ここではNuxtのコミュニティが作成しているテンプレートを使用します。

```terminal:terminal
/app # vue init nuxt-community/starter-template my_nuxt_app
```

プロジェクト名や説明、作者などを質問されます。面倒な場合は`Enter`連打で問題ないです。

完了すると、`my_nuxt_app`ディレクトリが作成されるので、こちらに移動します。

このテンプレートにはまだ`node_modules`が存在しないので、インストールしてあげます。

```terminal:terminal
/app # cd my_nuxt_app
/app/my_nuxt_app # npm install
```

### 起動設定

コンテナ内でNuxt.jsを立ち上げるだけでは、ブラウザからはアクセスできません。
設定ファイルでポートとホストを指定する必要があります。

作成した`my_nuxt_app`直下にある`nuxt.config.js`を編集します。

```javascript:nuxt.config.js
module.exports = {
 // ここから追記
 server: {
 port: 9000,
 host: '0.0.0.0'
 },
 // ここまで
......
```

ここで9000番を指定します。
`docker-compose.yml`で指定したポート番号と揃えましょう。

これでいよいよ起動できます。

```terminal:terminal

/app/my_nuxt_app # npm run dev

```

コンパイルが完了すると、
`ℹ Listening on: http://172.20.0.2:9000/`
などと表示されます。

Google Chromeで`http://localhost:9000/`を表示させると、、、

<img width="882" alt="スクリーンショット 2020-05-05 1.07.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421630/63ccbc69-5373-5e5c-4095-a3e8cdea8b43.png">

おめでとうございます！
ひとまずNuxt.jsのプロジェクトを立ち上げることができました。


次は、このプロジェクトを使って実装していきます。
最後までご覧いただきありがとうございました。