Vue.jsとRailsをDocker上に構築

Vue.jsは良いぞ

Vue.jsはSPAを作るのに非常に良いフレームワークです。学習コストが低くパフォーマンスは高く、そして自由があります。サードパーティの開発も盛んでVuetifyというUIを提供しているフレームワークも併せてお勧めです。

今回はバックエンドにRailsを使いAPIサーバを立てて、フロントエンドにはVue.jsを使ってAPIを叩いてシェルスクリプトを実行出来る環境をDocker上に構築してみたいと思います。フロントエンドのUIにはVuetifyを使用します。

環境構築にはこちらの記事を参考にさせて頂きました。
https://qiita.com/Kyou13/items/be9cdc10c54d39cded15

Vue.jsとRailsのコンテナを作成

Dockerfile作成

適当なディレクトリを作成して下さい。その中身を下記のような構成にすることが目標です。

$ tree .
.
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
├── docker-compose.yml
└── front
    ├── Dockerfile

api/Dockerfileは下記の通りです。2.7.0を指定しているのはローカルにたまたまイメージを落としていたからです。

FROM ruby:2.7.0

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs \
   && rm -rf /var/lib/apt/lists/* 

RUN mkdir /app
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install

api/Gemfileは下記の通りです。api/Gemfile.lockは空ファイルを作成して下さい。

source 'https://rubygems.org'
gem 'rails', '~> 6.0.3'

front/Dockerfileは下記の通りです。

FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

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

docker-compose.ymlは下記の通りです。ローカル環境に3000ポートが既に使われていたのでRails用に3001、Vue.js用に3002、DB用には3307を使用しています。

version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3001 -b '0.0.0.0'
    ports:
      - '3001:3001'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3307:3307'
  front:
    build: ./front
    volumes:
      - ./front:/app
    ports:
      - '3002:3002'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:

Railsコンテナ作成準備

各Dockerfileを作成したら下記のコマンドを実行して下さい。--apiオプションを付けてRailsプロジェクトを作成するとViewを作成しません。今回はフロントエンドにはVue.jsを使いたいので違っても良いのですがこのオプションを付けています。

$ docker-compose run web rails new . --force --database=mysql --api

api/GemfileのCORSのコメントアウトを外します。そしてbundle installします。

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

$ docker-compose run web bundle install

api/config/initializers/cors.rbに下記を記述します。この設定を入れないとフロントエンドのVue.jsからオリジンの異なるバックエンドAPIを叩けません。
※↓の設定のorigins 【オリジン】についてですが、APIを叩くフロントエンドのオリジンを記入するか全てを許可する設定にして下さい。つまり便宜上localhostとしていますがきちんとIPアドレスを入力した方が良いですという意味です。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3002'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

GEMを追加したらDocker Imageも更新します。

$ docker-compose build

api/config/database.ymlを下記の通りに設定します。設定したらDBを作成します。

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db

$ docker-compose run web rails db:create

以上でRailsコンテナ作成の準備は完了です。

Vue.jsコンテナでプロジェクトを作成

Vue.jsコンテナを起動します。

$ docker-compose run front sh

$ vue create .
Vue CLI v4.5.11
? Generate project in current directory? (Y/n) Y

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 
※Vuetifyを使いたいのでVersion2を選択

? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn 
> Use NPM 
※パッケージマネージャはお好きな方を選択

プロジェクトの作成が完了したらfront/Dockerfileを下記の通りに変更する。2行追記しています。このおかげで再ビルドする時にパッケージを更新するようになります。Gitでバージョン管理する人は、まっさらな状態で再度docker-compose buildする際にはこの2行を消す事を忘れずに。

FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update && npm install -g @vue/cli
COPY package.json .
RUN npm install

Vue.jsコンテナは3002ポートでリクエストを受け付けたいのでfront/vue.config.jsを作成する。作成したらVue.jsコンテナのみ再起動します。

module.exports = {
  devServer: {
    port: 3002,
    disableHostCheck: true,
  },
};

$ docker restart 【Vue.jsコンテナID】

RailsコンテナとVue.jsコンテナの両方ともトップページにアクセスが可能なら成功です。
http://【ローカルホストIP】:3001/
http://【ローカルホストIP】:3002/

Vue.jsコンテナにVuetifyを追加する

Vue.jsコンテナに入り下記のコマンドを実行します。

$ vue add vuetify
? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  V3 (alpha) 
  Configure (advanced)

再度Vue.jsコンテナにアクセスして上の画像が見れたら成功です。もしもコンパイル中に.src/main.jsでModule not found:のようなエラーが出た場合はfront/src/main.jsを下記の通りに書き換えて再起動してみてください。

import Vue from 'vue'
import App from './App.vue'
import vuetify from '@/plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

終わりに

今回はVue.jsとRailsの環境構築のみをまとめました。先程も触れていますがVue.jsを最新ではなくVersion2を選択したのはVuetifyを使いたかったからです。まだ正式には使えませんが、2021年の第3QにはVue.js Version3でも使用出来るようになるとVuetifyの開発チームは話しているので今から楽しみです。

コメントを残す