【AWS】Next.js×Rails API ホストベースルーティングの設定

概要

• Railsのみで構成していたアプリケーションを、Next.js×Rails APIのSPA構成に変更した
• SPA化に伴い、AWS本番環境の設定を変更した
• その中の一部として、ALBにホストベースルーティングの設定を追加し、Frontendのドメインをwww.example.com、Backendのドメインをback.example.comとした
• その際、ALB以外にも設定が必要な箇所があったためまとめ

参考）ホストベースルーティング設定

ホストベースルーティングの基本的な設定はこちらを参考に実施した。

環境

• Backend
  • ruby 3.0.2
  • rails 6.1.4 (APIモード)
• Frontend
  • react 18.2.0
  • next 13.1.6

インフラ構成図

必要な設定について

証明書、DNSの設定

• Rails単体構成で使用していたこれまでの証明書
  

back.example.comへの通信もSSL化するため、「*.example.com」を追加する。

設定手順

1. リクエスト
2. 証明書をリクエスト
   証明書タイプ：パブリック証明書をリクエスト
3. 完全修飾ドメイン名　に、下記の２つを追加
   • www.example.com　（既存のドメイン名と同様）
   • *.example.com　　（新しく追加するドメイン名）
     検証方法：DNS検証、キーアルゴリズム：RSA2048
4. Route 53でレコードを作成

• 以上の手順で作成された証明書
  

ALBへの紐付け

設定手順

1. ロードバランサ→HTTPS:443リスナ→リスナーの編集
2. セキュアリスナーの設定
3. デフォルトのSSL/TLS証明書
   • ACMから
   • www.example.com(新しく追加した方の証明書 IDを選択)

新しく追加した証明書の関連付けられたリソースとして、このALBが設定できていればOK。

動作確認

ここまでの設定で、

• https://www.example.comへのアクセスで、
  • Frontendアプリケーションのみで構成される静的な画面が表示されることを確認
  • FrontendからBackend(https://back.example.com)へのAPIリクエストが動作し、動的なコンテンツが表示されることを確認

でき、ホストベースルーティングが正常に機能することが確認できた。

ここまでの設定で正常に動作しない機能について

大部分の機能は正常な動作が確認できたが、ログイン関連処理で一部異常が見られた。詳細は下記記事に記載。

最後に

より良い方法や間違い等ありましたらご指摘いただけますと幸いです！