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
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
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を用意する
FROM node:12.12.0-alpine
WORKDIR /usr/src/app
RUN apk update && \
npm install -g npm @vue/cli
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
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導入する場合には
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のイメージ上でインストールさせる
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 っていう便利なものもあるよ