Rails + React アプリを ECS Fargate にデプロイする【8. CloudFront編】

これは何？

React と Rails で実装したWebアプリを AWS 環境にデプロイするまでの備忘録の CloudFront 編です

総集編を読んでいない方は コチラ

本記事でやること

以下のインフラ構成図のように CloudFront を作成します

作成手順

フロントエンドのビルド結果を S3 にアップロードし、CloudFront で配信します

ビルド前にソースコードを書き換えます

ビルドして S3 にアップロードします

> yarn run build
> cd build
> aws s3 cp ./ s3://8tako8tako8-hoge-web/ --recursive

次に、AWSサービス: CloudFront から「ディストリビューションを作成」をクリックします

以下のように設定し「ディストリビューションを作成」をクリックします

次に、AWSサービス: Route 53 から「ホストゾーン」をクリックします

「ホストゾーン名」をクリックします

「レコードを作成」をクリックします

以下のように設定し「レコードの作成」をクリックします

これで、CloudFront の作成・設定完了です

最後に、CORSを設定しておきます

# config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', "https://web.example.com"

    # 省略
end

動作確認

登録したドメインでWebアプリが動いていれば構築完了です！

最後に

今回は、 CloudFront の作成・設定しました

これで全て構築完了です！ お疲れさまでした！