Help us understand the problem. What is going on with this article?

ローカルを汚さず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:

とかいろいろ聞かれるけどお好みで
自分は
presetdefault
package managernpm
にしました

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

ポートの設定を変える

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした