構成

フロント
React→Amplify
サーバー
Rails→EC2 + RDS

以下のように通信が流れるようなインフラを作った。その時詰まったところをまとめ。
ちょっと雑なので後で見返して修正する。正直ハマりすぎて疲れた。。。
Amplify→Route53→ELB→EC2→RDS

EC2のSSL化

当然っちゃ当然だけどAmplify側がHTTPSなのでEC2もHTTPS化する必要あり。

設定時につまずいたところ

unicornでポート指定してなかった→listenの設定
unicornだと80番使えない。80番はルート権限でしか使えない→nginx経由でソケット通信させる仕様に変更
ルートパスにルーティングが組まれていない場合ELBのヘルスチェックでこけるのでヘルスチェックのURLをカスタムする

CORS設定

React側から通信するときにCORSの設定ができていなくてエラーになった。
そのときにやった設定

axios側

export const api = axiosBase.create({
  baseURL:
    process.env.NODE_ENV === 'production'
      ? `本番URL`
      : 'ローカルURL',
  responseType: 'json',
  withCredentials: true,
  headers: {
    ContentType: 'application/json',
    Accept: 'application/json',
  },
})

withCredential: true というのがどうも重要みたい

rails側

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3000", "フロント側の本番URL"

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

Rails側でもcredentials: trueを入れる必要がありそう？

どうもoriginが
"https://hogehoge.com/"みたく最後にスラッシュがついてるとエラーになるっぽい？
これのせいで30分以上ハマった

RDSの文字コード設定

RDSのデフォルト設定では日本語を受け付けないようで、以下のようなエラーに。

ActiveRecord::StatementInvalid (Mysql2::E
rror: Incorrect string value: '\xE3\x83\x9B\xE3\x82\xB2' for column 'name' at ro
w 1):

解決策

パラメータグループでutf-8で保存するようにする
すでにrailsでマイグレーション済みの場合にはmigrate:resetして文字コードを適用させる