CDKでReactアプリにAPI のエンドポイントを設定

Question

前提・実現したいこと

AWS CDKを用いてReactアプリケーションをCloudFront+S3にデプロイしています。
ReactアプリはAPI Gatewayを叩く仕様になっているのですが、CDKで構築する前はアプリケーションにエンドポイントをハードコーディングしていました。

しかし、APIもCDKで構築するつもりなのでハードコードが出来ないようになりました。
そこで、CDKで作成したエンドポイントを動的にReactアプリケーションが参照できるようにするにはどのように実現できますでしょうか。

試したこと

環境変数とかを使うのかな、など考えましたが解決に至りませんでした。

Answer 1

あまり詳しくないため想像で書きますが下のような感じになるのではないでしょうか。

1. API Gatewayの作成 (エンドポイントが決まる)
2. Reactアプリのどこかにエンドポイントを文字列置換などで埋め込みS3にアップロードする (aws-s3-assetsを使う?)
3. CloudFront側を作成する

Route53に固定のエンドポイントを作成するようにしてReactアプリではそれを使うというようなやり方でもいいかもしれません。