DockerでVue

Dockerとdocker-composeでVueプロジェクトを作成

Dockerとdocker-composeを使って、Vueプロジェクトを作成してみます。
Vueプロジェクトの作成は、Vue CLI を使うと簡単にできます。

まずは、Dockerfileとdocker-compose.ymlの二つのファイルを準備します。

Dockerfile

FROM node:alpine
WORKDIR /app
RUN npm i -g @vue/cli

中身は3行だけで、やっていることもシンプルです。

まず、ベースイメージとして、node:alpineイメージを指定しています。
Node.jsの軽量イメージです。

WORKDIRは、作業用ディレクトリの指定です。

最後に、RUN npm i -g @vue/cliで、Vue CLIをインストールしています。
これにより、Dockerコンテナ内で、Vue CLIを利用できるようになります。

docker-compose.yml

version: '3'
services:
  app:
    build: .
    command: npm run serve
    volumes:
      - .:/app
    ports:
      - '8080:8080'

docker-compose.ymlでやっていることもシンプルです。

commandで、実行するコマンドを指定します。
ここでは、NPMのコマンドを利用して、Vueを起動する、npm run serveを指定しています。

volumesで、ボリュームの設定をしています。
これにより、データを永続化することができます。
また、ホストマシンで編集したファイルがコンテナ内でそのまま利用できるため便利です。

あとは、ポートを指定する必要があります。
Vueでは、8080番ポートを利用するので、portsで指定します。

Dockerイメージをビルド

docker-composeのコマンドで、イメージをビルドします。

$ docker-compose build

Vue CLIを使ってプロジェクト作成

Vue CLIを使って、Vueプロジェクトを作成します。
ここで重要なのは、コンテナ内でVue CLIを実行することです。

$ docker-compose run app vue create /app

あとは、いくつか質問に答えて（設定すると）、Vueプロジェクトが作成されます。

コンテナを起動

$ docker-compose up -d

これで、コンテナを起動できました。
コンテナは起動されると、npm run serveを実行してVueを起動します。
ですから、ブラウザからhttp://localhost:8080にアクセスすると、Vueの画面が表示されます。

終わり