前提・実現したいこと
CloudFront Functionを利用して、リダイレクトとURL正規化を実現したいです。
S3にAngularで作成した静的オブジェクトをホストしていて、それをCloudfrontでURL正規化をして取得したいです。
正規表現は
https://hoge.com/mv-s3/です。
発生している問題・エラーメッセージ
https://hoge.com/mv-s3/へアクセスした時のブラウザから、取得したHARファイルです。
cat check.txt | jq -r .log.entries[].request.url https://hoge.com/mv-s3/ https://.com/mv-s3/styles.3ff.css https://.com/mv-s3/runtime.acf.js https://.com/mv-s3/polyfills.35a.js https://.com/mv-s3/main.796.js https://.com/mv-s3/styles.3ff.css https://.com/mv-s3/runtime.acf.js https://.com/mv-s3/polyfills.35a.js https://.com/mv-s3/main.796.js https://.com/mv-s3/styles.3ff.css https://.com/mv-s3/runtime.acf.js https://.com/mv-s3/polyfills.35a.js . . . .
該当のソースコード
Cloudfront Fnctionで作成とアタッチをしている関数です。
こちらを /mv-s3*のBehiverに設定してアタッチしてます。
https://github.com/aws-samples/amazon-cloudfront-functions
こちらを参考にして書きました。
javascript
1function handler(event) { 2 var request = event.request; 3 var headers = request.headers; 4 var host = request.headers.host.value; 5 var uri = request.uri; 6 7 var normalization = `https://${host}/mv-s3/`; 8 9 if (!headers.origin){ 10 headers.origin = {value:`https://${host}`}; 11 } 12 13 if (uri.match(/((test|mv-s3)(/.*[^/])?|/index.html)$/)) { 14 var response = { 15 statusCode: 301, 16 statusDescription: 'Moved', 17 headers: 18 { "location": { "value": normalization } 19 } 20 } 21 return response; 22 } else if (uri.endsWith('/')) { 23 request.uri += 'index.html'; 24 25 return request; 26 } 27}
問題点と分からないこと
↑上記のテストでは
301リダイレクト
そして、S3の静的コンテンツにアクセスするために,requestのURIにindex.htmlを付与することができていました。
実際にアタッチしてブラウザで確認をすると、確かに特定のファイルが読み込まれているのですが、そのファイルが複数か読み込まれています。具体的には301のリダイレクトが
https://.com/mv-s3/styles.3ff.css
https://.com/mv-s3/runtime.acf.js
https://.com/mv-s3/polyfills.35a.js
https://.com/mv-s3/main.796.js
のファイルに対して複数回行われます。
なぜ、複数回同じファイルを取得しているのですか?
どこが原因か分かっていなくてお手上げになってます。。
なぜこのようなことが起こっているのですか?
何かわかることやトラブルシュートの方法を教えてください。
console.log()にも値が流れてこなくて、デバックもできずに困ってます。
あなたの回答
tips
プレビュー