S3でリダイレクションルールを使ってリダイレクトさせる

June 16, 2019

個人的なプロジェクトでejsで作られたS3上の静的サイトをGatsbyJSに移しています。その過程でリダイレクトさせる必要が出てきました。

S3でリダイレクトさせる方法

S3でリダイレクトさせるには以下の2つ方法があります。今回はリダイレクションルールを使います。

  • リダイレクションルール(バケットごとに設定)
  • ウェブページリダイレクト(S3ごとに設定)

やりたいこと

htmlページをディレクトリにリダイレクトさせたいです。

  • hoge.com/page-2.htmlhoge.com/page-2/
  • 404→Gatsbyの404ページ

設定方法

静的ウェブホスティングの設定のリダイレクトルール (任意)から設定可能です。

54329ccc.png

ルールにはこのように記述します。

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>page-2.html</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyWith>page-2/</ReplaceKeyWith>
            <HttpRedirectCode>301</HttpRedirectCode>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyWith>404</ReplaceKeyWith>
            <HttpRedirectCode>301</HttpRedirectCode>
        </Redirect>
    </RoutingRule>
</RoutingRules>

これでできました。便利ですね。