ローカルを汚さず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を用意する

$ cd /path/to/workdir
$ touch 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"]

コンテナのイメージをビルドする

$ docker build -t vue_app_image .

ビルドしたイメージからコンテナを起動する

$ docker run -v `pwd`:/usr/src/app -p 9050:9050 --name app -it -d vue_app_image

起動したか確認

$ docker ps

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

$ docker exec -it app sh

コンテナの中

/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

vue.config.js

module.exports = {
  devServer: {
    port: 9050,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};

と記述して

/usr/src/app # npm run serve

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

もしくは引数

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

もしくは環境変数で

/usr/src/app # PORT=9050 HOST=0.0.0.0 npm run serve

docker-composeコマンドを使う場合

Dockerfileを用意する

Dockerfile

FROM node:12.12.0-alpine

WORKDIR /usr/src/app

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

docker-compose.ymlを用意する

docker-compose.yml

version: '3'
services:
  app:
    build: .
    ports:
      - 9050:9050
    volumes:
      - .:/usr/src/app
    stdin_open: true
    tty: true
    command: /bin/sh

コンテナのイメージをビルドする

$ docker-compose build

コンテナを起動する

$ docker-compose up -d

コンテナに入ってvueプロジェクトの準備

$ docker-compose exec app sh

コンテナの中

/usr/src/app # vue create .

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

ローカルの確認用サーバを立ち上げて確認

ポートの設定を変える

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

vue.config.js

module.exports = {
  devServer: {
    port: 9050,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
};

と記述して

/usr/src/app # npm run serve

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

ローカルにファイル置きたくないしgitもdocker上でっていう人は

volumeのオプションを変えたりdocker上のgitからコミットしたりお好みでいい感じに

上記手順で立ち上げた開発環境の運用や既存のリポジトリの開発環境にdocker導入する場合には

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のイメージ上でインストールさせる

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 っていう便利なものもあるよ