vue.jsの環境構築

dockerを使ってlocal環境にvuejsの開発環境を作る

Dockerfileの作成

$ cd /path/to/workdir
$ cat <<EOF > Dockerfile
Dockerfile
FROM node:8.11.3-alpine

WORKDIR /app

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

EXPOSE 9000

CMD ["/bin/sh"]
EOF

docker build

$ docker build -t vue_app_image .

docker run

$ 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

portなどを編集してます

vim config/index.js
#host: 'localhost', // can be overwritten by process.env.HOST
host: '0.0.0.0', // 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
port: 9000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

npm run dev

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