はじめに
どうもです。
Riot.jsを利用して作成したコンテンツをAmazon S3で配信する際に、404エラーが想定通り処理されなかったので対応した内容を書きます。
Riot.jsアドベントカレンダー2019の5日目、@nekijakさんの記事を見ながらふんふんとルーティングについて学び、最高にわかりやすかったです。ありがとうございます。
その後、じゃーいつも使ってるS3に乗っけてみるかと漫然と乗っけたところうまく行かなかったのでじゃあこれを書こうと思った次第です。
参考にさせていただいた記事
- Riot.js v4対応 Router - Qiita （件の@nekijakさんの記事）
問題点
例えば、一度 /hello にアクセスし、そのままブラウザでリロードした場合に、デフォルトではスクショのように403エラーが返ります。
直接的な原因は「hello」に対応するオブジェクトがないという事に対し、S3側から403エラーが返ってきていることです。根本的には色々とすべきことはありそうですが、ここではまずちゃんと 対応するオブジェクトがない場合404エラーが返るように修正する必要がある という問題認識だとします。
解決方法
CloudFrontを利用して、コンテンツを配置したバケットに対して設定を行います。403エラーの場合に404エラーを返すようにした上で、所定のエラーページを表示されるようにします。
Distributionの作成
- CloudFrontで「Create Distribution」を選択します。
- delivery methodとしてWebかRTMPか聞かれるので「Web」を選択します（ちなみにRTMPはCFとS3で動画ストリームを配信するやつです）
- Originの設定画面に移るので「Origin Domain Name」にコンテンツを配置したバケットのパスを入力します。めっちゃ項目ありますが、他はデフォルトのままでOKです。
- 余談ですがここでComment欄にも入力することをオススメします。また内容はこのDistributionを作った日付や目的にするのがオススメです。なぜなら、空欄のままだと後からなんで作ったのかわからなくなりがちだからです。
-
Error Pagesの設定
Distributionが作成されたら、「Error Pages」の設定タブを開きます
「Error Pages」の設定タブで「Create Custom Error Response」を選択します
設定画面に移るので、次の項目をそれぞれ設定します。
| Key | Value |
|---|---|
| HTTP Error Code | 403:Forbidden |
| Customize Error Response | Yes(これを選択すると、下のパスやエラーコードの入力欄が展開されます） |
| Response Page Path | エラーページのコンテンツのパス |
| HTTP Response Code | 404: Not Found |
設定が完了したら、StatusがDeployedになるまで待ちます。
Distributionの設定が反映されるまでは、結構時間がかかります。私の実績としては今回のような設定で毎回20-30分くらいかかりました。
▼
結果
404.htmlの画面が表示されます。
また、存在しないオブジェクトへのURLを指定した場合にも404.htmlの画面が表示されます（404として処理されます）
さいごに
404エラー以外にも同様にエラーをハンドリングできます。
Riot.jsっていうかAWSの話になってしまったんですが、同じ問題にあたった方の参考になれば幸いです。
やっぱAWS面倒くさいって思います？でも、なれればかゆいところに手が届くクラウドサービスなので僕は好きです。
Riot.jsもAWS使ってやっていこう。