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

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

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

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

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

やりたいこと

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

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

設定方法

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

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

<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>

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