【モダン技術習得への道】DockerでのNuxt.js / Vuetify開発環境構築による、迅速かつ効率的なプロジェクト作成

## 概要
- 今回はDockerを利用して、Nuxt.js / Vuetify開発環境を迅速に構築する。
- 下記の2つのフレームワークを利用することで、迅速に効率的におしゃれな画面を作成することができる。
    - [Nuxt.js](https://ja.nuxtjs.org/)(Vue.jsのアプリケーションフレームワーク)
    - [Vuetify](https://vuetifyjs.com/ja/)(マテリアルデザインフレームワーク)

## 結論
- 下記の2つのコマンドで、Nuxt.js / VuetifyのDocker開発環境が作成・起動され、迅速に開発を始められる。
    - `docker-compose build`
    - `docker-compose up -d`
- 最終的なフォルダ構成は下記。

```
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Dockerfile
└── docker-compose.yml
```
- Nuxt.js / Vuetifyを利用することにより、下記のような画面を素早く効率的に作成することができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/f818c78f-a276-b025-332c-cf5564983406.png)

## 環境
- Mac OS X 10.14.5
- Node.js v11.11.0
- yarn 1.17.3
    - yarnを未導入の場合、[こちら](https://yarnpkg.com/lang/ja/docs/install/#mac-stable)でインストールするかnpmでの置き換えを行う。
- Docker 19.03.1
- docker-compose 1.24.1
    - Docker・docker-compose未導入の場合、[こちら](https://qiita.com/yu-croco/items/605ef9cf51e1a2f0f8de)を参考にインストールしておく。

## 手順

### 雛形プロジェクトの作成 & ソースフォルダの整理
- 下記のコマンドを入力して、以下の作業を行う。
    - Nuxt.js / Vuetifyの雛形プロジェクトの作成
    - ソースフォルダの作成・整理
    - ソースパスの明記

```bash
# フォルダ作成 & 移動
mkdir -p ~/work; cd $_
# 雛形プロジェクト作成
yarn create nuxt-app t_o_d_project
# 作成段階で確認される質問には、下記で対応。
# UI frameworkの部分で「Vuetify」を選択
? Project name t_o_d_project
? Project description My first-rate Nuxt.js project
? Author name xxxxxxx
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules axios
? Choose linting tools eslint
? Choose test framework None
? Choose rendering mode Universal (SSR)
# 作成後、プロジェクトフォルダへ移動
cd ~/work/t_o_d_project
# ソースフォルダ(src/)作成 & ディレクトリ移動・整理
mkdir -p src; mv pages/ store/ static/ plugins/ components/ assets/ layouts/ middleware/ $_
```

- 上記の作業によって、下記のディレクトリ構成になっていることを確認する。

```bash
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── middleware
│   ├── pages
│   ├── plugins
│   ├── static
│   └── store
└── yarn.lock
```

- 確認後、プロジェクト直下の`nuxt.config.js`の中身を下記のように修正する。

```js:nuxt.config.js
export default {
  mode: 'universal',
  srcDir: 'src',   // こちらの１行を追加して、ソースディレクトリパスを明記。
```

### Docker関連ファイルの作成
- 作成した雛形プロジェクトをDocker環境で立ち上げるため、以下の3つのファイルをプロジェクト直下に作成する。
    - Dockerfile
    - docker-compose.yml
    - .dockerignore

```bash
# Dockerfileとdocker-compose.ymlと.dockerignoreの作成
touch Dockerfile docker-compose.yml .dockerignore
```

- 上記の作業によって、下記の最終ディレクトリ構成になっていることを確認する。

```bash
.
├── README.md
├── node_modules
├── nuxt.config.js
├── package.json
├── src
└── yarn.lock
└── .dockerignore
└── Dockerfile
└── docker-compose.yml
```

- 作成した3つのファイルの中身を下記のようにする。

```dockerfile:Dockerfile
# 開発環境用
FROM node:10.17.0-alpine as dev-env
# コンテナソースパス定義
ENV APP_HOME /app
# 必要物インストール・不要物削除
RUN apk update --no-cache && \
    apk add --no-cache vim && \
    rm -rf /var/cache/apk/*
# コンテナソースパス作成・移動
WORKDIR ${APP_HOME}
# Nuxt Host定義
ENV NUXT_HOST 0.0.0.0
# パッケージインストール
COPY package*.json ./
COPY yarn.lock ./
RUN yarn
# コンテナ内へのソースディレクトリのコピー
COPY . .
# Port公開
EXPOSE 3000
# 開発サーバー立ち上げ
CMD [ "yarn", "dev"]
```

```yml:docker-compose.yml
version: '3.7'
services:
  web:
    # コンテナ指定
    build:
      context: .
      target: dev-env
    ports:
      - 3000:3000
    restart: always
    # ローカルプロジェクトと同期
    volumes:
      - .:/app
      - /app/node_modules
```

```.dockerignore:.dockerignore
node_modules
.nuxt
.DS_Store
```

### イメージの作成・起動・確認
- 上記の関連ファイルの記述後、下記のコマンドをうち、Nuxt環境のDockerイメージの作成・起動を行う。

```bash
# Dockerfileがあるパスへ移動
cd ~/work/t_o_d_project
# イメージの作成
docker-compose build
# イメージの起動
docker-compose up -d
```

- イメージの起動後、ブラウザ上で`localhost:3000`にアクセスして下記の画面になることを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336499/f818c78f-a276-b025-332c-cf5564983406.png)

### 参考
- [Dockerでのマルチ環境作成](https://github.com/potato4d/docker-multi-stage-build-on-nuxt)
- [Rails & Nuxt.jsのDocker環境をalpineイメージで構築](https://dev.to/seattleconsulting/rails-nuxt-js-docker-alpine-1nf0)