nomurabbitのブログ

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

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

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

Reactアプリの準備

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

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

github.com

S3の設定

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

S3_01

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

S3_02

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

API Gatewayの設定

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

API_01

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

API_02

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

API_03
API_04

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

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

API_05

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

Cloud Frontの設定

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

CL_01

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

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

CL_02

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

完成

XX_01

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

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

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