【Vue.js】フロントエンド開発にDockerを使う。つらみもあるよ

今までローカルでフロントエンド開発やってたけど、Docker使ってみるか〜。

**でもDocker難しくてわからないよ〜〜〜〜〜〜〜！！！！！！**

対象読者はvue-cli開発経験のある方です。
最終的なコードは[こちら(github)](https://github.com/bakupen/docker-vue)

# なぜDockerを使うのか
~~バックエンドの人たちがDocker信者すぎてフロントエンド開発者の肩身が狭いから~~

「環境を揃えたいよね」というフワッとした動機から。
実際使ってみて今のところメリットは感じていないですが、vue-cliのバージョンを固定したりするのは追々嬉しいことになるのかも、と思います。未来への投資だと思ってやっていきます。

# 「Dockerでフロントエンド開発する」とは
どこまでDockerに担わせるか、というところですが、調べた感じだと「実行環境」をDockerで構築するのがベターみたいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408585/7ee7da5e-9c86-c0ea-dd23-14f3cd565d9b.png)
_クジラの写真なかった。_

# vueをDockerで動かすまでの手順
### vue-cliプロジェクトの作成
ローカル環境でプロジェクトを作成します。
ローカルの環境はこんな感じです。新規プロジェクトを始めるときに慌てて最新バージョンにしたりしてます。

```
$ node --version
v14.15.5
$ npm --version
6.14.11 
$ vue --version
@vue/cli 4.5.11
```

あとはいつも通り

```
$ vue create docker-vue
```

```
$ ls -a
.                 .gitignore        node_modules      public
..                README.md         package-lock.json src
.git              babel.config.js   package.json
```

### Dokcerfileを作成
プロジェクトディレクトリに作ります

```code:Dockerfile
FROM node:14.15.5-alpine

WORKDIR /usr/src/app

COPY package*.json ./

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

`FROM`でnodeイメージのバージョンを指定します。今回はローカルと同じにします。
`WORKDIR`はDockerコンテナ内でのプロジェクトディレクトリです。なんでもよいです。
`COPY`でpackage.jsonとpackage-lock.jsonをWORKDIRにコピーします。
`RUN`でパッケージ等インストールし、環境構築します。ここでnpmとvue-cliのバージョンを固定します。

### docker-compose.ymlの作成

```code:docker-compose.yml
version: '3'
services:
  app:
    container_name: docker-vue-test
    build: .
    ports:
      - 8080:8080
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules
    stdin_open: true
    tty: true
    command: "npm run serve"

```

コンテナ名を`docker-vue-test`と敢えてつけてます。あとで使います。
最後`npm run serve`を命令することで、コンテナ起動と同時にvueサーバーを起動させます。


### 動作確認する

まずDockerイメージをビルドします。

```
$ docker-compose build
```

そしてコンテナを起動。

```
$ docker-compose up -d
```

http://localhost:8080/ にアクセスすると、いつものVueの画面が表示されます。

# （任意）ポートを変える
ここまででDockerで実行環境を作るという目標は達成しましたが、
8080ポートは何かと他のプロジェクトでも使ったりするので、明示的にポートを指定してみます。

### vue.config.jsの作成
まず、vue-cliをどのポートを使って起動させるか指定します。
プロジェクトディレクトリにvue.config.jsを作成します。

```code:vue.config.js
module.exports = {
  devServer: {
    port: 9000,     # 好きな数字にする
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};
```

### docker-compose.ymlの編集
docker-compose.ymlの`ports`を、先ほど指定した数字に合わせて修正します。

```
    ports:
      - 9000:9000
```

### Docker再起動
```
$ docker-compose stop
$ docker-compose up -d
```
今度は http://localhost:9000/ で画面が確認できます。

# 所感

### 良いところ
いつも通りローカル開発でき、ホットリロードで画面に反映されます。普通です。

### うーん…ってなったところ
ホットリロードしなくなった時、ローカル実行ならブラウザのキャッシュをクリアすれば大体治っていたのですが、
Dockerで実行してるとキャッシュを消しても治らないことがあります。
そういう時はコンテナをstop/startするか、全然関係ない箇所をいじったりすると治りました。ここはちょっとよくわからない…

また、追加でライブラリなどを入れる時はコンテナ側にインストールする必要があります。

```
$ docker exec -it docker-vue-test sh
/usr/src/app # npm install hogehoge...
```

# さいごに
開発初期段階ではまだ「Dockerにして幸せだなあ」と思うことはないです。

ただ手順もそんなに多くはないですし、git cloneしたあとに
以前はnodebrewでnodeバージョンを変えてnpm installしてrun serveして…という手数を踏んでいたところが
Dockerのイメージビルド、コンテナ起動だけになるのは少しシンプルになって小気味好いかもしれませんね。知らんけど。

Dockerに頼りきりにならず、中で何をしているか理解することもとても重要だと思っているので、
それを心に留めつつ今後もDockerと仲良くしていきたいと思います。

# 参考記事

[ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4]](https://qiita.com/rh_taro/items/ca08b930f704275286a4)