【Vue.js】Docker-composeでVue.jsの環境を整えてみた

はじめに

こんにちは、がんがんです。2020年も3日が経過しました。
年末年始はWebアプリやDocker、Androidなどのところの触りをやっています。

そろそろサーバーサイドとフロントエンドの勉強を真剣に行いたいなと考えており、2020年はまず自身のポートフォリオを作成しようかなと考えています。
その派生として、友人のポートフォリオ作成の手伝い(依頼)に繋がるかなと思ってます。

今回はVue.jsとBootstrapの使える環境をDockerを用いて作成したのでそちらについてまとめておきます。

目的と環境

Docker ComposeでVue.jsの環境を構築
Docker ComposeでBootstrap-Vueの環境を構築

環境はDocker for Windowsです。Vue.jsはVue CLI 3を使用しています。

Dockerを用いる理由

理由としては以下の2点です。
1. Dockerの勉強のため
2. 環境(Windows)を汚したくないから

昨年12月よりDockerの勉強をしています。そのため、いろいろ作って壊してみようかなーと思っている感じです。また、Widnows環境なのでDockerでやったほうが死なずに済むかなと思いました…笑

STEP1 docker-composeコマンドで環境構築

まずはファイルの準備を行います。

Dockerfile

FROM node:13.5-alpine

WORKDIR /usr/src/app

RUN apk update && \
    npm install -g npm @vue/cli

docker-compose.yml

version: '3'

services:
  app:
    build: .
    ports:
      - 8080:8080
    volumes:
      - ./app:/usr/src/app
    tty: true
    stdin_open: true
    command: /bin/sh

Dockerfileとdocker-compose.ymlの準備が完了したら実行していきます。

$ docker-compose build
$ docker-compose up -d
# upと同時にbuildを行う場合
# docker-compose up -d --build
$ docker-compose exec app sh

Dockerの内部に入ったら以下のコマンドで新規Vueを生成します。
いろいろと出てきますが基本的にはYを選択していきました。参考記事を見ながらpresetはdefault、package managerはnpmを選択しています。

/usr/src/app # vue create .

createが完了したら実行していきます。ポートの設定などは行わずに実行出来ました。

/usr/src/app # npm run serve

下記の画面が表示されれば問題ありません。
f:id:gangannikki:20200103234516j:plain

参考

ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4] - Qiita
docker-composeでシンプルにvue.js環境構築 - Qiita

Vue.js公式のセットアップ方法は下記の通りです。
jp.vuejs.org

vue initとvue createの違いがよく分からなかったので調べました。
vue init と vue createの違い - Qiita

volumesがマウントできてない問題について

今回はこれに一番悩まされました。結果的にはDocker側をRestartすることで上手くいきましたが、これの問題がなければもう少し早く完成していたかなと思います。
qiita.com

STEP2 docker環境にBootstrap-vueを導入する

次に、Bootstrap-Vueを導入していきます。Dockerfileには下記を追加します。

Dockerfile

$ RUN npm install vue bootstrap-vue bootstrap

npm側では下記コマンドを実行します。一回だけY/Nを聞かれますがそれ以外は特に聞かれませんでした。

/usr/src/app # vue add bootstrap-vue

今回はHelloWorld.vueのdiv部分に書きを追加しました。

src/components/HelloWorld.vue

<!-- 追加部分 -->
    <b-button variant="primary">Primary</b-button>
    <b-button variant="secondary">Secondary</b-button>
    <b-button variant="success">Success</b-button>
    <b-button variant="danger">Danger</b-button>
    <b-button variant="warning">Warning</b-button>
    <b-button variant="info">Info</b-button>
    <b-button variant="light">Light</b-button>
    <b-button variant="dark">Dark</b-button>
<!-- 追加部分 -->
  </div>

下記の画面のようにボタンが追加されていれば問題なく読み込めています。
f:id:gangannikki:20200103234519j:plain

参考

BootstrapVue：Vue CLI 3 で Bootstrap 4 を使う - Corredor

公式ドキュメントはこちらです。
Getting started | BootstrapVue

おわりに

今回はDocker-composeを使ってVue.jsとBootstrapの環境を構築しました。
苦戦した部分もありましたがまずはスタート地点に立つことが出来ました。

次はVue.jsの勉強をしながらフロント部分をいじっていきます。

ganganの技術備忘録