DockerでクリーンなVue.js開発環境を構築してみる

2019-05-17Docker

はじめに

Vue.jsの開発のためのクリーンな環境を構築するためにDockerを使った場合の流れをまとめてみました。

開発用ディレクトリの作成とGit初期化

$ mkdir -p illusion \
  && cd illusion

$ git init

# Giboがなかったら実行しなくても構いません
$ gibo dump Node >.gitignore

Docker環境起動

動作することを確認

すでに nodenpm が利用できるイメージを構築済みなので利用する。

$ docker run --rm -p 8080:8080 -v $PWD:/apps -it genzouw/centos-sandbox bash

$ npm --version
3.10.10

$ exit

Vue開発に必要なライブラリをGlobalインストール

先に起動できたDockerイメージを使ってVue開発用イメージを作成します。

以下のような Dockerfile を作成します。

cat <<'EOF' >Dockerfile
FROM genzouw/centos-sandbox

RUN npm install -g vue-cli \
  && npm install -g @vue/cli-service-global \
  && mkdir -p /apps
EOF

Build します。

$ docker build -t vue-dev-env .

Run してみます。

$ docker run --rm -p 8080:8080 -v $PWD:/apps -it vue-dev-env bash

問題なく起動できれば、次に進みましょう。

vue開発環境の構築

Dockerコンテナ内で以下のコマンドを実行してプロジェクトを作成します。
プロジェクト名を尋ねられますが、ここでは illusion としておきましょう。
上記以外の選択肢はデフォルトのままで良いでしょう。

cd /apps \
  && vue init webpack .

うまく行けば以下のようなメッセージが表示されます。
(数分かかりますのでのんびり待ちましょう。)

> # Project initialization finished!
> # ========================
> 
> To get started:
> 
>   npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

これでVueアプリの「ボイラープレート」(昔はテンプレートやスケルトンと言いました。)が作成されました。
Vueの開発用サーバを起動して、本当に利用できるようになっているのかを確かめたいのですが、このままではDockerコンテナ外からアクセスできません。
Vueの設定ファイルを一部変更し、コンテナ外からアクセスできるようにします。

$ cd /apps \
  && sed -i "s/host: 'localhost',/host: '0.0.0.0',/" /apps/config/index.js

起動します。

$ cd /apps \
  && npm run dev

ブラウザでアクセス

http://localhost:3000」にアクセスしてみましょう。
うまく行けばVue.jsの初期ページが表示されるはずです。

2019-05-17Docker