Docker で VueCLI3 が動く環境を構築する

株式会社プライムストラクチャーのエンジニアのSayaです。

今回は Docker Compose と Dockerfile を用いて VueCLI3 が動く環境を構築してみましたので、その方法を紹介します。

検証環境

この検証は以下の環境で行いました。

  • macOS Mojave 10.14.5
  • Docker Engine 18.09.2
  • Docker Compose 1.23.2

ローカルで Vue プロジェクトを作成する

以下のコマンドを実行し、VueCLI3 をインストールして Vue プロジェクトを作成します。

$ npm install -g @vue/cli
$ vue create dockervue-project
Please pick a preset: (Use arrow keys)

と聞かれた場合には ❯ default を選択してエンターキーを押します。

? Pick the package manager to use when installing dependencies: (Use arrow keys)

と聞かれた場合には ❯ Use npm を選択してエンターキーを押します。

Docker Compose を記述する

docker-compose.yml ファイルを作成して以下のように記述します。
イメージには node.js を用います。

[docker-compose.yml]
version: "3.6"
services:
    vue-app:
        build:
            context: .
            dockerfile: Dockerfile
        tty: true
        volumes:
        - ./:/src
        ports:
        - "8090:8080"

Vue プロジェクトでポート番号がデフォルトで 8080 に設定されているため、コンテナ内のポートをそれに合わせます。

Dockerfile を記述する

以下のようにDockerfile を記述します。

[Dockerfile]
FROM node
RUN npm install -g @vue/cli

コンテナを起動する

以下のコマンドでコンテナを起動します。

$ docker-compose up -d
$ docker-compose exec vue-app bash

プロジェクトの起動

Vue プロジェクトファイルに移動してプロジェクトを起動します。

$ cd src/dockervue-project
$ npm install
$ npm run serve

プロジェクトが起動できたら以下の URL に移動して起動できたか確認します。
http://localhost:8090/

まとめ

今回は Docker で VueCLI3 が動く環境を構築する方法を紹介していきました。

コンテナで作成すればいつでも作り直す事が容易になるので、これ以外にもいろいろな環境で試していきたいと思います。

参考文献

node – Docker Hub