💎

Rails6をAPIモードで環境構築する

2021/05/02に公開

Rails

Ruby

環境構築

tech

はじめに

Rails APIモード + ReactでWebアプリを開発しています。
第一歩としてRails6をAPIモードで環境構築しましたが、ハマりポイントがいくつかあったので記録していきます。

参考にした記事

ほぼ以下の記事を参考にさせて頂きました。

環境変数については以下の記事を参考にさせて頂きました。https://qiita.com/alokrawat050/items/c68ec9578c12fe5a93a3

環境

ruby :2.7.2
rails :6.0.2

構築

1. APIモードでrails new

今回DBはmysqlを指定します。

rails _6.0.2_ new hoge -d mysql --api

2. database.ymlにMySqlのユーザーネームとパスワードを追記

database.ymlに直接パスワードを記載するのは問題なので、変数としてセットします。

まずは下準備としてconfig/local_env.ymlを作成して、以下のように変数を用意します。

config/local_env.yml

DB_USERNAME: 'hoge'
DB_PASSWORD: 'fuga'

config/application.rbにて以下を設定することで、database.ymlから変数を参照することができるようになります。

config/application.rb

config.before_configuration do
  env_file = File.join(Rails.root, 'config', 'local_env.yml')
  YAML.load(File.open(env_file)).each do |key, value|
  ENV[key.to_s] = value
  end if File.exists?(env_file)
end

このlocal_env.ymlがgitに上がってしまったら元も子もないので、.gitignoreに追記しておきます。

.gitignore

...
/config/local_env.yml

変数が使用できるようになりましたので、database.ymlを修正します。

config/locales/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  socket: /tmp/mysql.sock

development:
  adapter: mysql2
  encoding: utf8mb4
  reconnect: false
  database: hoge_development
  pool: 5
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  host: localhost
  
test:
  adapter: mysql2
  encoding: utf8mb4
  reconnect: false
  database: hoge_test
  pool: 5
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  host: localhost
  
production:
  adapter: mysql2
  encoding: utf8mb4
  reconnect: false
  database: hoge_production
  pool: 5
  username: <%= ENV["DB_USERNAME"] %>
  password: <%= ENV["DB_PASSWORD"] %>
  host: localhost

3. DBを作成

rails db:create

4. 必要なgemをインストールする

jsonのレスポンスを返すために'jbuilder'をインストールします。
フロントはReactで構築するため、CORSを設定します。そのために'rack-cors'をインストールします。

どちらもデフォルトではコメントアウトされていますので、コメントアウトを外すのみでOKです

Gemfile

gem 'jbuilder', '~> 2.7'
gem 'rack-cors'

bundle installします。

bundle install

Railsは3000ポート、Reactは3001ポートで立ち上げることにします。
異なるポート間でのリクエスト・レスポンスを可能にするためにcors.rbの設定が必要になります。
コメントアウトを外した上で以下の様に修正します。

config/initializers/cors.rb

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

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

origins に'http://localhost:3001'　を設定することでReactからのリクエストを許可しています。

以上

ここまでで構築は一旦完了です。
この後はフロント側の構築を進めていこうと思います。