2020.04.03

静的ウェブサイトホスティングにおけるURL正規化のリダイレクトの実施

sho

Contents

はじめに
構成
Lambdaの内容
S3のウェブサイトの内容
リダイレクトが効いていない場合
1. サイト直下のindex.html（リダイレクト無し）
2. bというディレクトリ内のcというディレクトリ内のindex.html（リダイレクト無し）
リダイレクトが効いた場合
まとめ

はじめに

西藤です。

高可用性のある静的なウェブサイトホスティングを実現したい時には、Amazon S3とCloudFrontの組み合わせで構築できます。
ただし、そのような構成を取ったときにはたとえばApacheサーバーで構築した時のような .htaccessを使ったリダイレクト設定を行うことができません。

また、Amazon S3の静的ウェブサイトホスティングの機能の「リダイレクトルール」もありますが、正規表現によるルール設定をカバーしておらず、設定するルール数が膨れてしまいがちです。

たとえば、
example.com/test/index.htmlはexample.com/test/

example.com/test2/index.htmlはexample.com/test2/

のように "index.html" の有り、なしを揃えた正規化を行いたい場合は

/test/ にあるindex.htmlのURLをindex.htmlなしに
/test2/ にあるindex.htmlのURLをindex.htmlなしに

のような形で設定を追加していく必要が出てきます。

しかし、ウェブサイトのSEOを考える上ではリダイレクトルールは正規表現を使いながらなるべく
シンプルに実現したいものです。

そこで今回はLambda@edgeを使った形で、

「末尾の "index.html" がない形でURL正規化」

というシナリオで検証したいと思います。

構成

S3 + CloudFrontでのウェブホスティングやその際にLambda@Edgeを使った場合の作り方の例などついては弊社ブログの

などにもございますので、割愛します。
これらの記事もぜひご覧ください。

Lambdaの内容

Lambda@Edgeの構築方法は省きましたので、早速コード例としましては以下の通り。

'use strict';
exports.handler = (event, context, callback) => {
  console.log("=====Redirection to the URL without index.html  =====");

  // Get request and request headers
  const request = event.Records[0].cf.request;
  const headers = request.headers;

  // If URL ends with index.html, redirect to URL without index.html.
  const isIndex = request.uri.endsWith('/index.html');
  if (isIndex) {
    console.log("=====Because the URL ends with index.html , redirect to the URL without index.html  =====");
    const withoutIndex = request.uri.replace(//index.html$/, '/');
    const response = {
      status: '301',
      statusDescription: 'Moved Permanently',
      headers: {
        location: [{
          key: 'Location',
          value: withoutIndex
        }]
      },
    };
    callback(null, response);
    console.log("=====Redirection to the URL without index.html has ended =====");
  }
  // Continue request processing if requested URL doesn't end with index.html
  callback(null, request);
};

具体的な流れとしては