Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
241
Help us understand the problem. What is going on with this article?
@rh_taro

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

More than 1 year has passed since last update.

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

241
Help us understand the problem. What is going on with this article?
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
rh_taro
timee
日本の労働力の減少を若者の働き方改革で解決します。好きな時に好きなだけ働けるプラットフォームタイミーを作り、人々が好きなことをできる世界を実現します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
241
Help us understand the problem. What is going on with this article?