【AWS】Reactアプリをサーバーレスで構築してみた【サーバーレス】

こんにちは！nomurabbitです。
この記事ではReactアプリを
S3とAPI GatewayとCloud Frontを使って
構築する方法を紹介します。

EC2を使わない
サーバーレス構成のアプリですね！

Reactアプリの準備

まずはReactアプリを準備します。

今回はホーム画面が表示されれば成功なので、
手っ取り早く試したい方はサンプルをご利用ください。

github.com

S3の設定

IAMをかぶせたAPI Gateway経由で公開します。
S3は非公開でOKです。

ビルドしたReactアプリをこんな感じでアップロードします。

以上でS3の設定は完了です。

API Gatewayの設定

最低限プロキシリソースでGETメソッドをつくってやればOKです。

実行ロールにはS3を読み取りできるロールを指定しましょう。

ここからが少しポイントです。
ヘッダーのマッピングでContent-Typeをマッピングしましょう。

ブラウザにファイルの種類を教えてあげると
いい感じに表示してもらえます。

今回ユーザーには必ず
Cloud Frontを経由してもらいたいので、
APIキーを指定してCloud Front以外からの通信は
API Gatewayで弾くようにします。

以上でAPI Gatewayの設定は完了です。

Cloud Frontの設定

カスタムヘッダーにx-api-keyキーを追加しておきましょう。

値はAPI Gatewayで設定したAPIキーです。

また、今回はアプリがReactのSPAなので
404エラーが返った時にindex.htmlに転送するようにします。

以上でCloud Frontの設定は完了です。

完成

以上でReactアプリを
S3とAPI GatewayとCloud Frontで公開することができました。

オンプレでの構築と比べると、
少しクセがありますが、慣れるととても速いです！

よかったら試してみてください。
では！