CloudFrontとLambda@EdgeでwwwなしのURLを自動リダイレクトする方法

2024-10-14 2024-10-13 SAKURAI

ウェブサイトのユーザー体験とSEO効果を最大化するために、一貫性のあるURL構造は欠かせません。
特に、wwwなしのURLへのアクセスをwww付きにリダイレクトすることは、GoogleのSEO評価にプラスの影響を与え、ユーザーの混乱を防ぐためにも重要です。
この記事では、AWSのLambda@EdgeとCloudFrontを使用して、シンプルかつ効率的にこのリダイレクトを設定する方法を解説します。
また、プロジェクトはGitHubのこちらのリポジトリで公開していますので、ぜひ参考にしてください。

Contents

1 Lambda@Edgeでのリダイレクト設定の利点
2 リダイレクトの設定手順
- 2.1 1. Lambda関数の作成
  - 2.1.1 Lambda関数コード例（index.mjs）
- 2.2 2. CloudFrontディストリビューションへの設定
3 テストとトラブルシューティング
- 3.1 テスト用イベントの作成
- 3.2 CloudWatchログの確認
4 トラブルシューティング
5 まとめ：一貫性のあるURLでSEOとユーザー体験を向上

Lambda@Edgeでのリダイレクト設定の利点

Lambda@EdgeはAWSのエッジネットワークでコードを実行する機能で、ウェブリクエストを高速に処理できます。
この仕組みを使ってリダイレクトを行うことで、以下のような利点が得られます：

高速なレスポンス：ユーザーに最も近いエッジロケーションで処理されるため、待ち時間が短縮されます。
SEOの強化：一貫性のあるURLにより、Googleの評価が向上します。
HTTPSの推奨：HTTPからHTTPSへのリダイレクトも容易に行えます。

リダイレクトの設定手順

1. Lambda関数の作成

AWS Lambdaコンソールで新しいLambda関数を作成し、ランタイムとしてNode.js 18.xを選択します。

Lambda関数コード例（`index.mjs`）

このコードは、wwwなしのリクエストをwww付きに自動リダイレクトします。

'use strict';

export const handler = async (event) => {
    const request = event.Records[0].cf.request;
    const headers = request.headers;
    const hostHeader = headers.host[0].value;

    if (!hostHeader.startsWith('www.')) {
        return {
            status: '301',
            statusDescription: 'Moved Permanently',
            headers: {
                location: [{
                    key: 'Location',
                    value: `https://www.${hostHeader}${request.uri}`
                }]
            }
        };
    }
    return request;
};

このコードをAWSコンソールのLambdaエディタに貼り付け、バージョンを発行します。
CloudFrontでLambda@Edgeを使用するには、バージョンが必須です【36】。

2. CloudFrontディストリビューションへの設定

AWS CloudFrontコンソールで、使用するディストリビューションを選択。
「Behaviors」タブから、リクエストに適用するビヘイビアを編集します。
Viewer RequestまたはOrigin Requestのイベントに、先ほど発行したLambda関数のARNをアタッチします。
保存して、変更がエッジロケーションに反映されるのを15～30分ほど待ちます。

テストとトラブルシューティング

テスト用イベントの作成

Lambdaコンソールで以下のようなテストイベントを使い、リクエストが適切にリダイレクトされるか確認します：

{
  "Records": [
    {
      "cf": {
        "request": {
          "headers": {
            "host": [
              {
                "key": "Host",
                "value": "example.com"
              }
            ]
          },
          "uri": "/test-path",
          "method": "GET"
        }
      }
    }
  ]
}