第８章: docker-compose の活用例 (Vue.js)

昨今の web フロントエンド開発で人気のある js フレームワークといえば React.js か Vue.js の２択になるようです。世界的には React.js が人気のようですが、日本国内では Vue.js ユーザーが多いような気がします。

Vue.js 自体は薄いフレームワークで実際の開発現場では Vue.js と合わせて、vuex や vue-router などが活用されることが多いようです。ここでは vue-cli を活用した環境を docker で再現しています。

Vue.js については公式サイトの日本語訳も充実しているので公式サイトから関連情報も調べるのが良いと思います。

今回の設定で注意するところは docker-compose.yml ファイルで environment でポートを指定しているところです。ここは、いわゆる環境変数の指定に該当します。vue cli を起動すると port を 8080 で起動されることになるとおもいますが、あえて 3000 で指定しています。このやり方をしっておくとあとあと役に立つと思います。

8.2 準備する各ファイルの説明

下記のようなファイル構成を目指してゆきます。

(任意のディレクリを作成 今回は ~/tmp/docker_sample/node_vue)
% mkdir -p ~/tmp/docker_sample/node_vue && cd ~/tmp/docker_sample/node_vue
% touch Dockerfile docker-compose.yml compose_cmd.bash && \
chmod +x compose_cmd.bash

Dockerfile (イメージを作成するためのファイル)

FROM node:14.15.4
RUN yarn global add @vue/cli && mkdir -p /usr/src/app
WORKDIR /usr/src/app

docker-compose.yml (compose コマンドで実行するファイル)

version: '3.8'
services:
  web:
    container_name: ctr_vue_node14_15_4
    build:
      context: .
    image: node14_15_4:yarn_vue
    volumes:
      - .:/usr/src/app
    ports:
      - '3000:3000'
    environment:
      PORT: 3000
    command: './compose_cmd.bash'

compose_cmd.bash ( compose.yml の中で実行するコマンド)

#!/usr/bin/env bash
yarn install && \
yarn serve

8.3 docker-compse の実行例

(イメージを作成)
% docker-compose build
(nuxt フレームワーク作成 プロジェクト名 node_vue)
% docker-compose run --rm web vue create node_vue
(ディレクトリ整理、通常ファイルと隠しファイル、同じものは移動しない)
% mv -n node_vue/* . && \
mv -n node_vue/.[^\.]* .
(残っているファイル、中身を確認してディレクトリごと削除)
% rm -r node_vue
(web app 起動)
% docker-compose up

(web ブラウザで localhost:3000 で確認)

(コンテナの中に入って作業したいとき、もう一つコンソールを開いて)
% docker-compose exec web /bin/bash
(コンテナの中でライブラリ追加 Commander の場合)
# yarn add commander
(コンテナ終了)
# exit
(コンテナの外からモジュールを追加したいとき Moment の場合)
% docker-compose exec web yarn add moment
(次回からの実行)
% docker-compose up

8.4 まとめ

8.5 次回

今回は vue.cil を使った vue.js 開発環境を作ってみました。

最近の開発現場では vue.cil よりも vue.js をコアとしたフレームワーク Nuxt.js が使われることが多いようです。

次回は Nuxt.js の事例を紹介したいと思います。