トレイリングスラッシュ とは、URLの末尾につく「 / 」のことです。 URLの末尾にスラッシュはいるんですかね？必要ないんですかね？？ 今回は必要ないパターンで、URLの末尾に「 / 」があれば取ってしまうLambda@Edgeの設定方法を共有します。 条件 S3 + CloudFront で静的ホスティングしているWEBサイトの構成を前提に説明します。 手順 ここにその手順が載ってまして、これに沿って実行していきます。 https://serverlessrepo.aws.amazon.com/applications/arn:aws:serverlessrepo:us-east-1:951661612909:applications~LambdaEdgeRemoveTrailingSlash LambdaEdgeRemoveTrailingSlashの関数を作成する Lambda関数の作成 から Serverless Application Repositoryの参照 を選択します。 パブリックアプリケーション の検索窓から、「LambdaEdgeRemoveTrailingSlash」を検索します。 検索窓の下にある[カスタム IAM ロールまたはリソースポリシーを作成するアプリ]チェックボックスをONにすると、 LambdaEdgeRemoveTrailingSlash が出てくるのでクリックします。 次の画面の右下にある、「このアプリがカスタム IAM ロールを作成することを承認します」 にチェックを入れて、デプロイボタンを押します。 画面が変わりますので、一番下にあるリソースの中から論理IDの項目をクリックして関数を開きます。 関数をLambda@Edgeへデプロイする Lambda関数のページに遷移しますので、アクションメニューからLambda@Edegeへのデプロイをクリックします。 デプロイの設定をします。 URLの末尾のスラッシュを取りたいWEBサイトのCloudFrontディストリビューションIDを入力します。 CloudFrontイベント を ビューアーリクエスト にします。 最後の Lambda@Edgeへのデプロイを確認 に チェックを入れて デプロイをします。 デプロイが終わるとトリガーが追加されているとお見ます。 数分ぐらい経つと設定が反映されてると思いますので、末尾に「/」をつけてアクセスし、「/」が取れてリダイレクトされてたら成功です！ もしできないよー！設定ちゃうで！ということがありましたら、コメントをお待ちしております。お疲れ様でした！

続きを読む

Next.js, Gatsby.js, Nuxt.jsなどのStatic Site Generatorを使ったLPや、JAMStack構成でビルドされたファイルをS3にアップロードしてCloudFrontでキャッシュすることで、サーバーダウンなどを気にしないでページを運用したいなどあると思います。ただの1枚ページのHTMLだけならいいのですが、サブディレクトリにもHTMLファイルがある場合、どうすればいいのか。 https://example.cycloud.io/subdir/ このようなURLにアクセスすると、CloudFrontから Access Denied 403 のレスポンスが返ってきます。 https://example.cycloud.io/subdir/index.html こうすればアクセスできるのですが、ちょっとかっこ悪いですよね。 Lambda@Edge を使うとこの問題を解決できるので、その方法を紹介します。詳しいセキュリティの説明や、S3のバケット作成手順、CloudFrontのディストリビューションの作成手順は割愛させていただきます。 手順 リージョンを us-east-1 にする Lambda関数の新規作成 コードソースを書き換えてDeployする 新しいバージョンを発行 CloudFrontのトリガーを追加して設定する サブディレクトリのURLにアクセスして表示確認する 参考 リージョンをus-east-1にする 2021年5月時点では、後述する トリガーの選択でCloudFrontを選択できるのがus-east-1リージョンのみ となっているため、リージョンは 米国東部 (バージニア北部)us-east-1 を選択してください。 Lambda@Edge 関数を作成 AWS Lambdaのページから 関数の作成 ボタンを押して、Lambda関数の新規作成を一から作成します。関数名を記入して、ランタイムを Node.js にします。今回は新規から作る紹介なので、デフォルトの実行ロールの変更 は AWSポリシーテンプレートから新しいロールを作成 を選びます。ロール名を任意で入力し、 ポリシーテンプレートは「cloudfront」と検索 して、 基本的なLambda@Edgeのアクセス権限（CloudFrontトリガーの場合） を選択します。内容を確認して 関数の作成ボタンを押します。 コードソースを書き換えてDeployする コードソース？ソースコード？どっちかわかりませんが、ここではコードソースと書いてあるのでコードソースと書きます。 index.js を選択して、下記の内容に書き換えます。次に、 新しいバージョンを発行 をクリックします。 index.js 1 2 3 4 5

続きを読む