DockerでクリーンなVue.js開発環境を構築してみる
はじめに
Vue.jsの開発のためのクリーンな環境を構築するためにDockerを使った場合の流れをまとめてみました。
開発用ディレクトリの作成とGit初期化
今回作成するVueのプロジェクト名は my-app としたいと思います。
Docker環境起動
Dockerイメージを作成
Vue開発に必要なライブラリをGlobalインストールしたDockerイメージを作成します。
まずは、以下のような Dockerfile を作成します。
Buildします。作成するDockerイメージ名はdocker-vueとしています。
問題なくイメージが作成できれば、次に進みましょう。
Vueアプリケーションの初期化
以下のコマンドを実行してプロジェクトを作成します。
何度か選択肢を聞かれますが、はデフォルトのままで問題ありませんのでEnterキーを連打します。
うまく行けば以下のようなメッセージが表示されます。
(数分かかりますのでのんびり待ちましょう。)
これでVueアプリの「ボイラープレート」(昔はテンプレートやスケルトンと言いました。)が作成されました。
Docker内でコマンドを実行しましたが、ローカルPCのディスクをマウントしていた(-v $PWD:/${PWD##*/}
オプション)ので、ローカルPC上にもソースコードが配置されているはずです。
Vueの開発用サーバを起動して、本当に利用できるようになっているのかを確かめたいのですが、このままではDockerコンテナ外からアクセスできません。config/index.js
にVueの設定ファイルを一部変更し、コンテナ外からアクセスできるようにします。
また、デフォルトではページ遷移時の挙動をURLのフラグメント( #
)を利用して表現するように動作しますが、個人的にはこの方法はすきではありません。src/router/index.js
にフラグメントなしの方式に変更します。( mode: 'history'
のフィールドを Router
に設定)
その他、Docker上でVueアプリケーションを動作させた場合の問題についても対処しておきます。
ローカルPCでファイルを変更しても、Docker上のVueプロセスはファイル変更を検知してくれません。
これを検知させるには、以下のコマンドを叩いて設定を変更する必要があります。
起動します。
ブラウザでアクセス
「http://localhost:8080
」にアクセスしてみましょう。
うまく行けばVue.jsの初期ページが表示されるはずです。
その他
bootstrap-vue
の導入
即席のサイト構築の際に 「Bootstrap」 を使うとデザインについて細かいことを考えなくてすみます。(デザインが苦手な僕には助かります。)
Vue.js
で構築するアプリケーションに 「Bootstrap」 を適用するためには、 npm
コマンドで以下のライブラリをインストールするのが手っ取り早いです。
src/main.js
にも、 bootstrap-vue
が利用できるようにパッケージのロード処理を追記しておきます。
ディスカッション
コメント一覧
まだ、コメントがありません