CloudFront + S3でReactのSPAを作成する方法
CloudFront + S3の構成でReactのSPAを作成してみます。
S3にコンテンツを配置します。
まずS3にコンテンツ配置用のバケットを作成します。
「バケットを作成する」をクリックします。
「次へ」をクリックします。
「次へ」をクリックします。
「次へ」をクリックします。
「パケットを作成」をクリックします。
「プロパティ」の「Static website hosting」を上記の設定にして保存します。
作成したバケットにindex.htmlをアップロードします。
これでReactのWebコンテンツの配置は完了です。
CloudFrontの設定
「Create Destribution」をクリックします。
Webのほうの「Get Started」をクリックします。
上記のとおり設定します。先ほど作成したS3を選択します。
Restrict Bucket AccessをONにすること
この設定をONにすることで、S3側のオブジェクトに別途権限を与えない限り、CloundFront経由のアクセスしかファイルにアクセスできなくなります。
ここでは「HTTP and HTTPS」としましたが、「HTTPS Only」でもよいと思います。
HTTPメソッドも適宜選択してください。
「Create Distribution」をクリックします。これでCloudFrontの設定は完了です。
15分くらいかかる
Statusが「In Progress」となっていますが、これがDeployedに変わるまで15分ほど時間がかかります。
Deployedになれば、「Domain Name」のURLをたたけばindex.htmlが実行されます。
This XML file does not appear to have any style information associated with it. The document tree is shown below.
このエラーが出たら、index.htmlを「公開する」を押す必要があります。
これで「Domain Name」/index.htmlでReactが表示されます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント