🎃
CloudFrontでマルチオリジン(multi origin)を設定しても反映されない時
はじめに
S3の静的ウェブサイトホスティングでWebアプリを作成しました。 ユーザがファイルをアップし、閲覧できる機能があるのですが、アプリが格納されているバケットとは分けたかったので、 CloudFrontのマルチオリジンを使って解決しようとしたところ、いつまで経っても反映されないので調査しました。
前提情報
| バケット名 | 概要 |
|---|---|
| sample-app | 静的ウェブホスティングでアプリが格納されている |
| sample-file | ユーザがアップしたファイルが格納されている |
CloudFrontにドメインを紐付けていない場合、過去記事参照ください。 https://gdtypk.com/cloudfront-original-dmain-route53-acm/
ゴール
| URL | 遷移先 |
|---|---|
https://sample.com |
sample-appバケットへアクセス |
https://sample.com/upload_file |
sample-fileバケットへアクセス |
オリジンの設定状況
sample-appとsample-fileのオリジンを追加する 
ビヘイビアの設定状況
https://sample.com/upload_file/*にアクセスがあれば、sample-fileを参照し、 その他はsample-appを参照するように設定。
問題発生
https://sample.com/upload_file/*にアクセスしてもファイルが表示されない。 バケットポリシーや公開範囲についての問題は無い。
CloudFrontの反映に時間がかかるのかもと思い、1時間ほど待ったが解決せず。
原因
sample-fileバケットの構成に問題があった。
処理フロー
-
https://sample.com/upload_file/sample.txtへアクセス -
s3://sample-file/upload_file/sample.txtを参照 - そんなファイルない！ERROR！
こんな感じでした。
対応
sample-fileの階層を以下のように変更しました。
sample.txt
↓
upload_file
└sample.txt
おわり
ビヘイビアにパスパターンを設定しても、それを無視してバケットを参照しにいくと勝手に思っていたのが悪かったようです。
参考
https://dev.classmethod.jp/articles/cloudfront-multioriginbehavior/ https://qiita.com/uramotot/items/592b43cf564060e8a365
Discussion