想定
以下で構築したフロントエンド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-storage --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のデータが取得できます。