ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]

2019/10/21 vuecli4系の手順に更新

# 概要
今更ながらようやくdockerデビューしたのでフロントエンドの勉強も兼ねて
少しこだわってローカルにnpmとかを入れずにdocker上で開発環境の構築をしました

dockerコマンドとdocker-composeコマンドを使う2パターン試しました
docker-composeは複数のコンテナを連携させるために使われますが
コンテナ1個でもやっぱりdocker-composeの方が全部ファイルに書けていいですね

# 環境
- macOS 10.14.6
- Docker Community Edition for Mac Version 19.03.2

# Dockerをインストール
https://store.docker.com/editions/community/docker-ce-desktop-mac
ここからDocker Community Edition for Macをインストールしたら起動させる

# dockerコマンドを使う場合
## Dockerfileを用意する
```shell-session
$ cd /path/to/workdir
$ touch Dockerfile
```

```dockerfile:Dockerfile
FROM node:12.12.0-alpine

WORKDIR /usr/src/app

RUN apk update && \
    npm install -g npm @vue/cli

EXPOSE 9050

CMD ["/bin/sh"]
```

## コンテナのイメージをビルドする
```shell-session
$ docker build -t vue_app_image .
```

## ビルドしたイメージからコンテナを起動する
```shell-session
$ docker run -v `pwd`:/usr/src/app -p 9050:9050 --name app -it -d vue_app_image
```

## 起動したか確認
```shell-session
$ docker ps
```
```shell-session

CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS                                            NAMES
723643ed72c6        vue_app_image                "docker-entrypoint.s…"   13 seconds ago      Up 11 seconds       0.0.0.0:9050->9050/tcp                           app
```

## コンテナに入ってvueプロジェクトの準備
ref: https://cli.vuejs.org/guide/creating-a-project.html#vue-create

```shell-session
$ docker exec -it app sh
```

```shell-session:コンテナの中
/usr/src/app # vue create .
```

```
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation?
? Generate project in current directory?
? Please pick a preset:
? Pick the package manager to use when installing dependencies:
```
とかいろいろ聞かれるけどお好みで
自分は
`preset`は`default`
`package manager`は`npm`
にしました

## ローカルの確認用サーバを立ち上げて確認
### ポートの設定を変える

ref: https://cli.vuejs.org/config/#devserver

```javascript:vue.config.js
module.exports = {
  devServer: {
    port: 9050,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};
```
と記述して

```shell-session
/usr/src/app # npm run serve
```

http://localhost:9050
にアクセスしてページが表示されれば成功

もしくは引数

```shell-session
/usr/src/app # npm run serve -- --port 9050 --host 0.0.0.0
```

もしくは環境変数で

```shell-session
/usr/src/app # PORT=9050 HOST=0.0.0.0 npm run serve
```

# docker-composeコマンドを使う場合
## Dockerfileを用意する
```dockerfile:Dockerfile
FROM node:12.12.0-alpine

WORKDIR /usr/src/app

RUN apk update && \
    npm install -g npm @vue/cli

```

## docker-compose.ymlを用意する
```yaml:docker-compose.yml
version: '3'
services:
  app:
    build: .
    ports:
      - 9050:9050
    volumes:
      - .:/usr/src/app
    stdin_open: true
    tty: true
    command: /bin/sh
```

## コンテナのイメージをビルドする
```shell-session
$ docker-compose build
```

## コンテナを起動する
```shell-session
$ docker-compose up -d
```

## コンテナに入ってvueプロジェクトの準備
```shell-session
$ docker-compose exec app sh
```

```shell-session:コンテナの中
/usr/src/app # vue create .
```

上記と同じなのでこの辺の設定は割愛

## ローカルの確認用サーバを立ち上げて確認
### ポートの設定を変える

ref: https://cli.vuejs.org/config/#devserver

```javascript:vue.config.js
module.exports = {
  devServer: {
    port: 9050,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};
```
と記述して

```shell-session
/usr/src/app # npm run serve
```

http://localhost:9050
にアクセスしてページが表示されれば成功


# ローカルにファイル置きたくないしgitもdocker上でっていう人は
volumeのオプションを変えたりdocker上のgitからコミットしたりお好みでいい感じに


# 上記手順で立ち上げた開発環境の運用や既存のリポジトリの開発環境にdocker導入する場合には
```dockerfile:Dockerfile
FROM node:12.12.0-alpine

WORKDIR /usr/src/app

COPY package.json .
COPY package-lock.json .

RUN apk update && \
    npm install -g npm @vue/cli
    npm install
```
全員が同じパッケージをインストールして同じ環境になるように
`package.json`,`package-lock.json`をローカルからコピーして
`npm install`でdockerのイメージ上でインストールさせる

```yaml:docker-compose.yml
version: '3'
services:
  app:
    build: .
    ports:
      - 9050:9050
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules
    stdin_open: true
    tty: true
    command: /bin/sh
```

```
- /usr/src/app/node_modules
```
についてはボリュームマウント時に`node_modules`ディレクトリが隠れてインストールしたパッケージが使えなくなるため、その対策
`Volume Trick`でググると詳細が出てくるよ

# vue ui
`vue ui` っていう便利なものもあるよ