ビジネスとIT活用に役立つブログBlog


Vue CLI 3の開発環境をDockerで作成してみた

この記事をシェアする:

当社では一部のプロダクトでJavaScriptフレームワークの Vue.js を導入しています。

Vue.jsは低い学習コストで手軽に始められて非常に便利ですが、アプリケーションの規模が大きくなってくると、アプリケーションの管理が辛くなってきました。

Vue.jsにはVueアプリケーション用に標準ビルドツールチェーンの Vue CLI 3が提供されており、Vue CLIを使う事でアプリケーションをコンポーネント単位で管理する事ができるようです。

今回はVue CLIを使って開発できるように、Dockerを使って開発環境を構築してみたいと思います。

Vue CLI

環境
  • Windows 10 Home
  • VirtualBox 6.0.4
  • Vagrant 2.2.4
  • CentOS Linux release 7.6.1810 (Core)
  • Docker version 18.02.0-ce, build fc4de44
  • docker-compose version 1.14.0, build c7bdf9e

Vue CLIのDockerファイルを作成する

2019年4月現在Docker HubにVue CLIの公式のDockerイメージは提供されていないので、Node.jsの公式イメージからVue CLIをインストールしたイメージを作成します。

node – Docker Hub

Vue CLIのドキュメントを参考に、Vue CLIをインストールします。

Installation | Vue CLI

Node.jsバージョン要件 Vue CLIには、Node.jsバージョン8.9以降(8.11.0以降を推奨)が必要です。https://cli.vuejs.org/guide/installation.html

Dockerfile

補足

  • FROM node:10.15.3-alpine
    Node.jsの公式イメージから軽量なLinuxディストリビュージョンのAlpine LinuxのLTS版を選択します。
  • WORKDIR /app
    作業ディレクトリを/appに指定します。
  • RUN npm install -g @vue/cli
    Vue CLIをグローバルインストールします。
  • CMD [“/bin/sh”]
    コンテナ実行時のデフォルトコマンドに/bin/shを指定します。

Vue CLIのDockerファイルを作成する

作成したDockerfileと同階層でbuildコマンドを実行します。

-t オプションでDockerイメージの名前とタグを指定します。
作成したDockerイメージを確認します。

実行結果

Vue CLIのDockerコンテナを起動する

作成したDockerイメージの名前を指定して起動してみます。

Dockerコンテナ内

Vue CLIが無事にインストールされていますね。

Vue CLI用Dockerコマンドのスニペットを登録する

このままでもVue CLIを使うことはできますが、毎回dockerのコマンド打つのは大変ですので、bash関数を.bashrcに登録します。

.bashrcを再読み込みした後に、スニペットが実行されるか確認してみます。

vue-cliコンテナのVue CLIのバージョンが確認できました。

プロジェクトを作成する

Vue CLIのドキュメントを参考に、プロジェクトを作成してみます。

参考: Creating a Project | Vue CLI

プリセットとインストールに使うパッケージマネージャを選ぶように指示されるので、今回はデフォルトのプリセットとYarnを選択してみます。

yarnコマンドでサーバを立ち上げて確認する

プロジェクト作成時の最後に出ているコマンドを実行して、サーバを立ち上げて確認してみます。

実行すると以下の様にURLが表示されるので、ブラウザでアクセスして確認します。

Vagrantのネットワーク設定について

Vagrantのネットワーク設定でNATを選択している場合には、forwarded_portの設定を行なわないとアクセスができないのでご注意ください。

Vagrantfile

Vagrantのネットワーク設定でBridgeを選択している場合には、表示されたURLのlocalhostの部分を適宜VMに割り当てられているIPアドレスに変更してアクセスしてください。

docker-compose.ymlを作成する

筆者はdockerコマンドよりもdocker-composeコマンドをよく使っているので、docker-composeコマンドでも使えるようにします。vue-cliコンテナで作成したDockerfileをプロジェクト直下に配置してdocker-compose.ymlを作成します。

docker-compose.yml

ディレクトリ構成

docker-composeコマンドでnodeサーバを起動してみます。

Webリクエストを送って動作を確認してみます。

docker-composeコマンドでも起動ができるようになりました。

さいごに

Dockerを使ったVue CLIの開発環境の構築は以上です。

Vue CLIを使うことでプロジェクトの作成までが簡単にできる印象でした。

フロントエンド開発技術を取り入れながら、ユーザビリティやUX(User Experience)の向上を目指していきたいと思います。

The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!