質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Amazon CloudFront

Amazon CloudFrontは、AWSの高速且つ高パフォーマンスなコンテンツ配信(CDN) サービス。容量の大きいコンテンツをキャッシュさせてWebサーバの負荷を軽減し、サーバダウンの防止など安定した配信が可能になります。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

0回答

1740閲覧

CloudFrontでリダイレクトURL正規化を実現したい。

I_am_

総合スコア23

Amazon CloudFront

Amazon CloudFrontは、AWSの高速且つ高パフォーマンスなコンテンツ配信(CDN) サービス。容量の大きいコンテンツをキャッシュさせてWebサーバの負荷を軽減し、サーバダウンの防止など安定した配信が可能になります。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2021/06/22 05:58

編集2021/06/23 06:37

前提・実現したいこと

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()にも値が流れてこなくて、デバックもできずに困ってます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問