rails環境構築

プロジェクトフォルダ作成

$ mkdir rails_vite_bulletin_board
$ cd rails_vite_bulletin_board

backend/Gemfileを作成

backend/Gemfile

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

backend/Dockerfileを作成

backend/Dockerfile

FROM ruby:3.0

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

WORKDIR /app

COPY Gemfile /app/Gemfile

RUN bundle install
COPY . /app

docker-compose.ymlを作成

docker-compose.yml

version: '3.9'
services:
  backend:
    build: ./backend
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./backend:/app
    ports:
      - '8000:3000'
  mysql:
    image: mysql:5.7
    ports:
      - '3306:3306'
    volumes:
      - ./db:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password

RailsをAPIモードでインストール

$ docker-compose run backend rails new . --api --force --database=mysql --skip-bundle

backend/config/database.ymlを編集

backend/config/database.yml

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

docker image作成

$ docker-compose build

コンテナ起動

$ docker-compose up -d

DB作成

$ docker-compose exec backend bin/rails db:create

http://0.0.0.0:8000で初期画面が出れば成功

コンテナ終了

$ docker-compose down

vite環境構築

frontend/Dockerfileを作成

Dockerfile

FROM node:14.15.5-alpine

RUN apk update && npm install -g npm

WORKDIR /var/www

docker-compose.ymlにfrontendの内容を追記

docker-compose.yml

version: '3.9'
services:
  backend:
    ...
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/var/www
    ports:
      - 3000:3000
    command: 'npm run dev'
  mysql:
    ...

フロントエンドコンテナに入る

$ docker-compose run frontend ash

viteインストール

/var/www $ npm init @vitejs/app vite -- --template vue-ts

インストール確認が出るのでyで進む

Need to install the following packages:
  @vitejs/create-app
Ok to proceed? (y)

インストールされたファイルをルートへ移動・viteフォルダ削除

/var/www $ mv vite/.gitignore vite/* /var/www/
/var/www $ rmdir vite

npm install

/var/www $ npm install

フロントエンドコンテナから抜ける

/var/www $ exit

コンテナ起動

$ docker-compose up -d

http://localhost:3000で初期画面が出れば成功

コンテナ終了

$ docker-compose down

Ruby on Rails とViteのSPA連携

フロントエンド

axios インストール

$ docker-compose run frontend npm install axios

baseApiUrl定義

frontend/src/util/util.ts

export const baseApiUrl: string = 'http://localhost:8000/api/v1/'

後に作成するヘルスチェックAPIをmount時に叩く

frontend/src/App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<script lang="ts">
import axios from 'axios'
import { baseApiUrl } from './util/util'
import { defineComponent, onMounted } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
  setup() {
    onMounted(async () => {
      await axios.get(`${baseApiUrl}/health_check`)
    })
  },
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

フロントエンド

ヘルスチェックAPI　ルート作成

backend/config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  namespace :api do
    namespace :v1 do
      get :health_check, to: 'health_check#index'
    end
  end
end

ヘルスチェックAPI　コントローラー作成

backend/app/controllers/api/v1/health_check_controller.rb

module Api
  module V1
    class HealthCheckController < ApplicationController
      def index
        head 200
      end
    end
  end
end

CORS設定 Gemfile

backend/Gemfile

+ gem 'rack-cors'

CORS設定 cors.rb

backend/config/initializers/cors.rb

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

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

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

動作確認

docker image作成

$ docker-compose build

コンテナ起動

$ docker-compose up -d

http://localhost:8000/api/v1/health_checkにアクセスしてレスポンスステータス200応答で成功

postテーブル作成

$ docker-compose exec backend rails g model post title:string
$ docker-compose exec backend rails g controller posts
$ docker-compose exec backend rake db:migrate