こんにちはますのです。
あれこれAWSで遊んでいます。構築用のサンプルとかお借りしながらで、やはりコードに関しては分かりませんなぁという。
S3へのアップロード→CloudFrontへの設定を完了させたのですが、エラーが出てアクセス出来ないのです。
Chromeのディベロッパーツールで見たところ403や404エラーが出ているようです。
S3のアクセス権限やネットワーク周りの変更をしても変わらず煮詰まっていた時、作者様のWebサイトを徘徊していたらこんな内容がありました。
SPAをCloudFrontで公開する時には、カスタムエラーレスポンスの設定が必須
今回アプリとしてデプロイしているのは、Vue.jsで作ったいわゆるSPA（Single Page Application）です。
引用：【VueSlsApp】CloudFrontでHTTPS化してみた
Webサイトの階層で「～.jp/login」でアクセスしてるけど、S3には「login」っていう階層は存在しないからエラーになっちゃうのよって理解しました。
参考：SPA(Single Page Application)ってなに？
作者様のサイトでは、TeraformでCloudFrontの構築手順が記載されていましたが、手動で設定しました。
CloudFront、消すのに結構時間掛かるのでメンドクサイというのと、せっかくなので触ってみたいということで、設定した内容を以下綴っていきます。
設定はCloudFrontに２つのみ！
ややこしい設定が必要なのかと思いましたが、設定の追加は2つと以外と簡単でした。
- 404エラーの場合：コード200に書き換えて、/index.htmlにリダイレクトする
- 403エラーの場合：コード200に書き換えて、/index.htmlにリダイレクトする
今回エラーが起きている原因は「存在しないページへアクセス」しているからです。
そのため、その情報を書き換えてリダイレクトしてあげるという処理のようですね。細かいことは分からんですが。
CloudFrontの「Error Pages」に設定を追加する
まずはCloudFrontを開きます。
Distributions＞タブ：ErrorPages＞CreateCustomErrorResponseをクリック
リダイレクト時の処理を設定＞「Create」をクリック
・Customize Error Response：Yes
・Response Page Path：/index.html ※アクセス出来るパス等を記載する
・HTTP Response Code：200：OK
こんな感じに出来ればOKです。
404に関しても同じく「CreateCustomErrorResponse」から「HTTP Error Code：404」を選択して、他は同じ設定で完了です。
余談：S3の静的アクセスを設定してもアクセスできた。しかし…。
当初はCloudFrontの「Origin Setting」のドメイン名を変更して「アクセス出来た！」と喜んでいました。
（ドメイン名）.s3-website-apnortheast-1.amazonaws.com
参考：CloudFront ディストリビューションのオリジンとして S3 ウェブサイトのエンドポイントを使用しています。403 Access Denied エラーが発生するのはなぜですか?
S3バケットのアクセス権限もフルアクセス権限を付与し、バッチリ！と思ったらアクセス出来るのは「/index.html」のみでした。
そりゃそうですよね。S3の静的サイトで実在するデータにアクセスしてるのですから。
なので、SPA（Single Page Application）のサイトをS3×CloudFrontにする場合はリダイレクト設定をして、REST APIのエンドポイントに設定する必要があるようです。
（ドメイン名）.s3.amazonaws.com
未だに良くわかってないですが、サンプルコードを拾ってこのあたりを感覚として触れたのは良い機会になりました。今後Webサービス扱う機会があったときの糧になればよいなと感じたであります。