背景
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 # サーバーを起動