docker+vite+vue3環境のバックエンドにrailsを設定

想定

以下で構築したフロントエンドvite+vue3の環境にバックエンドとしてapiモードのrailsを追加します。

前準備

• direnvのインストールと有効化
  プロジェクトルート直下でに.envrcを作成する。
  direnvはホスト側のみでよい。

touch .envrc

• .envrcに環境変数を設定

.envrc

# MySQL
export DATABASE_USERNAME='root'
export DATABASE_PASSWORD='password'
export DATABASE_HOST='db'

• direnvの有効化

direnv allow

backendの設定

• ディレクトリ作成

mkdir backend && mkdir backend/api

+　必要ファイル(Dockerfile,Gemfile,Gemfile.lock)作成

cd backend && touch {Dockerfile,Gemfile,Gemfile.lock}

• Dockerfile

Dockerfile

FROM ruby:3.2.0
ENV APP /api
ENV TZ Asia/Tokyo
RUN apt-get update -qq && apt-get install -y mariadb-client nano
WORKDIR $APP
ADD Gemfile $APP/Gemfile
ADD Gemfile.lock $APP/Gemfile.lock
RUN bundle install
EXPOSE 3000
CMD ["rails", "server", "-b", "0.0.0.0"]

• Gemfile

Gemfile

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

• Gemfile.lockは空でOK

• compose.yaml
  backendの設定(dbはmysql,apiはrails7)を追加する

compose.yaml

services:
  frontend:
    build: ./frontend/
    volumes:
      - type: bind
        source: ./frontend/app
        target: /app
    ports:
      - "8082:5173"
+  db:
+    image: mysql:8.0
+    platform: linux/x86_64
+    restart: always
+    command: mysqld --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci
+    environment:
+　　　　　　　　  TZ: Asia/Tokyo
+      MYSQL_ROOT_PASSWORD: $DATABASE_PASSWORD
+    volumes:
+      - type: volume
+        source: mysqldata
+        target: /var/lib/mysql
+  api:
+    build: ./backend/
+    platform: linux/x86_64
+    environment:
+      TZ: Asia/Tokyo
+      DATABASE_USERNAME: $DATABASE_USERNAME
+      DATABASE_PASSWORD: $DATABASE_PASSWORD
+      DATABASE_HOST: $DATABASE_HOST
+    volumes:
+      - type: bind
+        source: ./backend/api
+        target: /api
+      - type: volume
+        source: gemdata
+        target: /usr/local/bundle
+    ports:
+      - "8083:3000"
+    depends_on:
+      - db
+ volumes:
+   mysqldata:
+   gemdata:

• rails7をapiモード+db:mysqlで構築する

docker compose run --rm api rails new . --api --database=mysql --skip-yarn --skip-active-storagen--skip-javascript --skip-turbolinks --skip-test

• railsのdb設定

backend/api/config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  charset: utf8mb4
  collation: utf8mb4_general_ci
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch("DATABASE_USERNAME") %>
  password: <%= ENV.fetch("DATABASE_PASSWORD") %>
  host: <%= ENV.fetch("DATABASE_HOST") %>
  port: <%= ENV.fetch('DATABASE_PORT') { 3306 } %>
~略~

• db作成

docker compose run --rm api rails db:create

• コンテナ起動

docker compose up -d

• rails起動確認
  http://localhost:8083 にアクセスし、railsの起動を確認。
  

• railsにrack-corsをインストール
  apiモードなのでGemfileのコメントアウトを外すだけ

Gemfile

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

• bundle install

docker compose run --rm api bundle install

• backend/api/config/initializers/cors.rbを修正

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
+ 以下のコメントアウトを外しoriginsを設定（frontend側のポート）
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "localhost:8082"
    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

• ackend/api/config/environments/development.rbに「config.hosts.clear」を追加

development.rb

  # Raise error when a before_action's only/except options reference missing actions
  config.action_controller.raise_on_missing_callback_actions = true
+ ## 以下を追加
+  config.hosts.clear

これでfrontend側のvueからaxiosなりfetchすればバックエンドのrailsのデータが取得できます。