docker
vue.js
docker-compose
alpine
vue-cli

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

概要

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

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

環境

  • macOS 10.13.4
  • Docker Community Edition for Mac Version 18.06.0-ce-mac70

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:8.11.3-alpine

WORKDIR /app

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli

EXPOSE 9000

CMD ["/bin/sh"]

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

$ docker build -t vue_app_image .

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

$ docker run -v `pwd`:/app -p 9000:9000 --name vue_app -it -d vue_app_image

起動したか確認

$ docker ps

CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                              NAMES
a6ad9d418b78        vue_app_image         "sh"                     17 minutes ago      Up 5 seconds        0.0.0.0:9000->9000/tcp             vue_app

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

$ docker exec -it vue_app sh
コンテナの中
/app # vue init webpack
/app # npm install

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

config/index.js
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

config/index.js
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 9000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

に変更して

/app # npm run dev

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

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

Dockerfileを用意する

Dockerfile
FROM node:8.11.3-alpine

WORKDIR /app

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g vue-cli

CMD ["/bin/sh"]

docker-compose.ymlを用意する

docker-compose.yml
version: '3'
services:
  vue_app:
    build: .
    ports:
      - 9000:9000
    volumes:
      - .:/app
    stdin_open: true
    tty: true

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

$ docker-compose build

コンテナを起動する

$ docker-compose up -d

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

$ docker-compose exec vue_app sh
コンテナの中
/app # vue init webpack
/app # npm install

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

config/index.js
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

config/index.js
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 9000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

に変更して

/app # npm run dev

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

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

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