AWSでSPAの構築
久々にSPAの構築を実施しました。すんなりできると思っていたのですが、結構忘れていることが多かったのと、困ったところがたくさんあったので備忘録として記述しておきます。
なお、解説文を付け加えていますが、設定できれば良い人は画像を参照していけばできると思います。
S3バケット作成
まずはweb用のS3のバケットを準備します。
「パブリックアクセスをブロック」にチェックを入れるのを忘れないでください。
ここのチェックを外すように書いてある記事が多いです。しかし、チェックを入れるとこのバケットに直接アクセスできてしまいます。
そうではなく、Cloudfront経由のみでアクセスしてほしいのでチェックを入れないでください。
Cloudfrontの作成
英語で厳しいですが、順番にゆっくり設定していけば怖いことはありません。
まずはCreate Distributionをクリック
Get Startedの方を選択します。
Origin Settings
Origin Domain Name
カーソールを合わせると選択肢が出てきます。先ほど作成したS3のバケットを選択してください。
Restrict Bucket Access
Yesを選択してください。説明の直訳です。
ユーザーが常にAmazon S3のコンテンツにアクセスする際に、Amazon S3のURLではなく、CloudFrontのURLを使用してアクセスすることを要求したい場合は、「はい」をクリックします。これは、署名付きURLや署名付きCookieを使用してコンテンツへのアクセスを制限する場合に便利です。ヘルプでは、「プライベートコンテンツをCloudFrontでサーブする」を参照してください。
Origin Access Identity
Create a New Identityを選択してください。S3にアクセスするためのOriginIDを新規で作成します。
Grant Read Permissions on Bucket: Yes, Update Bucket Policy
Yes, Update Bucket Policyを選択してください。S3バケットにアクセスするためのPolicyを自動で設定してくれます。
Default Cache Behavior Settings
Viewer Protocol Policy
任意設定ではあるのですが、Redirect HTTP to HTTPSに変更しています。これはHTTPのアクセスに関する項目です。
Redirect HTTP to HTTPSにするとHTTPでリクエストが来た際にHTTPSにリダイレクトしてくれます。セキュリティ的にHTTPSの方が強固なのでリダイレクトするようにしました。
Distribution Settings
Default Root Object
ルートパスでアクセスした際にデフォルトで表示するファイル名です。index.htmlを設定しました。
24時間(くらい)待つ
ここが一番重要です。Create Distributionをクリックしたら24時間ほど待ちます。
これは、S3のバケット名がAWS内で共有されるのに最大で24時間かかるからです。そのためすぐにアクセスしてもエラーになる場合があります。
都度、確認してみましょう。
S3の設定を確認
バケットポリシーの確認
Grant Read Permissions on Bucketの項目でYes, Update Bucket Policyを選択しました。
バケットポリシーを追加する項目なので、一応ちゃんと設定されているか確認してみます。
ファイルのアップロード
実際にS3にファイルをアップロードしてください。
WEBページにアクセス
WEBページにアクセスして動作を確認して見ます。ドメイン名はCloudFrontのDistributions内、Domain Name列に記載されています。
WEBページが表示されれば設定完了です。
参考