LoginSignup
29

More than 3 years have passed since last update.

Yarn+VueCLI環境をDockerで構築する

Last updated at Posted at 2018-12-18

背景

vue入門の際にvagrant上に構築するとホットリロードが面倒なことになりましたので、
とYarn+VueCLI環境をDockerで実現してみました。

筆者の環境

Ubuntu18.04(正確にはpop-os!)
Docker version 18.09.0

Dockerのインストール

Ubuntuの方はこちら
Macの方はこちら
Windows home editionの方はこちら
Windows pro editionの方はこちら

Dockerfileをつくる

まずはフォルダを作ってから、中に空のファイルを作成しましょう。

mkdir vue_docker # フォルダを作る
cd vue_docker # フォルダの中に移動する
touch Dockerfile # 空のDockerfileを作る

その後viでもVScodeでも何でも良いので以下のようにDockerfileを記述します。

# node:alpineというイメージ(Dockerを構成してる基礎みたいなもの)をベースにvueに必要なものを記述していく。
# ちなみにalpineというのは軽量版Linuxで、Dockerではよく使われている
FROM node:alpine

WORKDIR /app

# apkはalpineのパッケージマネージャ
RUN apk update && \
    apk add --no-cache git curl && \
    curl -o- -L https://yarnpkg.com/install.sh | sh

ENV PATH $HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH

# ホットリロード
ENV CHOKIDAR_USEPOLLING=true
RUN yarn global add @vue/cli

EXPOSE 8080

CMD ["/bin/sh"]

ビルドしてコンテナを起動する

Dockerfileのあるフォルダで以下のコマンドを実行し、コンテナを作成して実行しましょう。
注意:windowsの方はDocker quickstart terminalsを管理者権限で実行してください


docker build -t イメージ名 . # -tで名前をつけてイメージをビルド
docker run --name コンテナ名 -it -p 8080:8080 -v $PWD:/app イメージ名 # --nameでコンテナ名をつけてコンテナを新たに立ち上げる
オプション等 意味
-p ポートの受け渡し ホストのポート:コンテナのポート
--name コンテナに名前をつける
-it STDINを常に開いてttyを割り当てる
-v 共有フォルダ ホスト:コンテナ
$PWD 現在のパスを出力してくれる

コマンド実行後コンテナの中に入れるかと思います。

コンテナ内の作業

vue-cliはビルド時に導入済みなので、自由にプロジェクトを作ってください。

vue create アプリケーションの名前 -d # ディレクトリを作りvueアプリケーションを作成する
cd アプリケーションの名前 # ディレクトリ移動
yarn serve # サーバーを起動

このあとhttp://localhost:8080にアクセスすると無事表示されるかと思います!
注意:windowsの方はhttp://192.168.99.100:8080です。
vagrantでは面倒だったホットリロードも効きます。

以下作業中に必要になりそうなコマンド

CPUが異常に回るとき

vueアプリケーションのフォルダの中に vue.config.js というファイルを用意して、以下のように記述してからyarn serveを実行してください。node_modulesを監視対象から外すと良いようです。

// vue.config.js
module.exports = {
    // options...
    devServer: {
        watchOptions: {
          ignored: /node_modules/,
          aggregateTimeout: 300,
          poll: 1000,
        },
    }
}

vueプラグインのインストール

docker exec -it コンテナ名 sh # コンテナに入ってシェルを起動
yarn add vuex # vuexとかvue-routerとか

コンテナ名などの情報を確認する

docker ps -a # -aをつけることで停止状態のコンテナも一覧化する

コンテナを停止する

docker stop コンテナ名

コンテナを再起動してアプリケーション編集を再開する。

docker runで作ったコンテナは停止後も消えずに残っています。
二回目以降コンテナを起動したいときには以下のようなコマンドを入力します。

docker start コンテナ名

その後再度 yarn serve をするためには以下のコマンドを入力しコンテナ内にアクセスします。

docker exec -it コンテナ名 /bin/sh # runとは違い、execは既に起動しているコンテナでコマンドを実行する。

その後、コンテナ内で以下のようにコマンドを入力します。

cd アプリケーションの名前 # ディレクトリ移動
yarn serve # サーバーを起動

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29