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

Dockerを使ってVue CLI 3 の開発環境を構築する

More than 1 year has passed since last update.

概要

今回は、ローカルの環境を汚さないようにdocker上でVue CLI3 の開発環境を構築していきます。
dockerを使って環境構築を行うのは初めてなのでメモ多めです。
docker-composeコマンドを使用したほうが簡単な気がしたので今回はこちらを使います。

ソースコード
https://github.com/satokibi/sample-docker-vue-cli3

環境

  • macOS High Sierra 10.13.6
  • Docker Desktop Community Version 2.0.0.0-mac81

Dockerのインストール

Vue CLI3 の環境構築

Dockerfile の作成

まずは、Docker関連のファイルやvueのフォルダを置くディレクトリを作成し、
そこでDockfileを作成します。

$ cd /path/to/MyApp
$ vim Dockerfile
Dockerfile
FROM node:8.15.0-alpine

WORKDIR /app

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

CMD ["/bin/ash"]

Dockerhubで好きなNode.jsのverを選択します。
Dockerhub- node

Dockerfileを書いてみる
Dockerで使う極小イメージメモ

CMD ["/bin/ash"]
alpine linuxではbashがないのでash or shみたいです。

docker-compose.yml の作成

先程と同じディレクトリでdocker-compose.ymlを作成します。

$ vim docker-compose.yml
docker-compose.yml
version: '3'
services:
  web:
    build: .
    ports:
      - 1234:8080
    volumes:
      - .:/app
    stdin_open: true
    tty: true

サービスの構築

下記のコマンドでサービスの構築を行います。

サービスとは今回でいうと「web」のことを指します。
ymlファイルにimage:が書かれている場合はそのイメージ名。
ローカルになければ、リモートからプルしてきます。imageが書かれていない場合、buildに書かれているパスの(デフォルトは)Dockerfileを参考にしてイメージを構築します。

$ docker-compose build

コンテナの起動

コンテナを作成して、起動します。
オプションで-dをつけることでバックグラウンドで実行することができます。
またオプションで--buildをつけることで起動前にイメージも構築します。

$ docker-compose up -d

docker-compose コマンドまとめ

コンテナ内でVue projectの作成

下記のコマンドでコンテナ内に入ることができます。

$ docker-compose exec web /bin/ash

$ docker-compose exec {サービス名} {実行コマンド}

コンテナ内
/app # vue create vue-project
/app/vue-project # cd vue-project
/app/vue-project # npm run serve

/app # yarn serve (yarnの方はこちら)

http://localhost:1234 にアクセスしてwelcomeページが出ることを確認しましょう。

スクリーンショット 2018-12-28 5.06.52.png

Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)

あとは、serverを立ち上げたまま、
もう一つterminalを立ち上げvue-project内を編集することでweb側にも編集が反映されます。

停止方法

サーバーを終了します。

コンテナ内
Cmd(Ctrl) + C

コンテナを抜けます。

コンテナ内
/app/vue-project # exit

コンテナの停止

$ docker-compose stop

コンテナの削除

$ docker-compose rm

volumes:でマウントしているため、/appの中身はコンテナのライフサイクルが終了した後でも保持されます。

停止、削除、ネットワーク削除

$ docker-compose down

基本的にdocker-compose downで問題なさそうです。

コンテナはマシンとして扱う。状態を持ち、停止(stop)しても状態は保持される。
コンテナは明示的に破棄(rm)しない限り、停止しても存在し続ける(それなりにちゃんと消さないとどんどん容量を食う)。docker psコマンドはオプション無しだと起動中のコンテナしか表示しないため、あたかも停止したコンテナが破棄されたように見えたりする。
コンテナは使い捨てる。状態を永続化したい場合はcommitするか、Dockerfileを書く。

Dockerのライフサイクルがよくわからなかった

参考文献

ローカルを汚さずdockerを使ってvue.jsの開発環境を作る
Dockerfileを書いてみる
Dockerで使う極小イメージメモ
docker-compose コマンドまとめ
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
Dockerのライフサイクルがよくわからなかった

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
ユーザーは見つかりませんでした