初ブログ…ども…暑さにも寒さにも弱いカリーです。

今回はAWS AmplifyにホスティングしたSSGのサイトに対してのリダイレクト設定の仕方を紹介します。

先日Mavsサイトをリニューアルした訳なんですが、その際のリダイレクト設定に四苦八苦しました。

Amplify公式サイトのドキュメントを参考にしてたんですが、なかなか上手くいかず・・・

色々設定してみてやっとこさ上手くいったので、その内容を備忘録として残したいと思います。

Amplifyへのデプロイ方法についてはこちら

この記事の対象者

・AWS Amplifyにホスティングしたサイトのリダイレクト設定をしたい人

・AWS Amplifyにホスティングしたサイトへの直アクセスが上手くいかないよという人

SSGサイトの直アクセスはindex.htmlへの書き換えが必要

主にここの理解に苦戦しました・・・

SSGサイトでは、htmlは初回に取得するindex.htmlしかなく、他のlocation.htmlなどは存在しません。

なので、例えば /location/ に遷移した場合、/location/index.htmlを表示していることになります。

サイト内からの遷移であれば問題ないのですが、

/location/ に直アクセスされた際は「そんなパスねーよ」で正常に表示されません。

正常に/location/ へのアクセスを表示させるためには、以下のように /location/index.htmlへの書き換え設定を行う必要があります。

<local>のように入れると、その部分は任意のURLが入るようになります。

なので、/location/ja/ でも /location/en/ でも、二番目のルールにマッチします。

ちなみに、どこで設定すんの？

Amplify Console内で対象アプリ選択後。

サイドバーの「書き換えて、リダイレクト」から「編集」ボタン押下で設定することができます。

どうやって設定すんの？

「送信元アドレス」に記載したパスへアクセスされた際に、

「ターゲットアドレス」に記載したパスへ「入力」で設定した挙動（リダイレクト、もしくは書き換え）を行います。

例として、/location/ja/から/location/en/へリダイレクトしたい場合は、以下のように設定します。

また、「ルールの追加」から設定を増やすことができます。

注意点として、リダイレクトルールは上から順にマッチしたものが反映されます。

/無しでアクセスしたら404エラーになるんですが・・・

例えば /location にアクセスした場合、SSGではエラーになります。

先ほど述べたように、SSGではindex.htmlしか存在しないのですが、

/location にアクセスした時はlocation.htmlを探そうとして見つからずに404エラーとなります。

/無しでアクセスされた場合は以下のように、/有りのURLにリダイレクトさせることで解決します。

階層多くて設定が面倒・・・そんな時は

/blog/category/***だったり、/news/category/***だったり、さらに多くの階層がある場合、

全てを一つ一つ設定するのが面倒ですよね。

そんな時は以下のようにすると、一括で設定できます。

/<任意>/<任意>/<任意>とすることで、同階層のもの全てを対象とするので、

/blog/category/*** や /news/category/*** もこのルールにマッチします。

ただし、このままだと同階層となる画像ファイルやJSファイル等もマッチしてしまいます。

/nuxt/img/test.pngなんかも上記ルールにマッチしてリダイレクトされてしまうので、

それらは除外してリダイレクトさせないようにする必要があります。

今回はnuxt.jsを使用している想定で、

/_nuxt/ディレクトリ直下のファイル（画像やJS）全てをリダイレクトルールの前で書き換え設定を入れました。

<*>とすることで、任意の0以上の階層と見てくれます。これで全ての/_nuxt 直下のファイルがリダイレクトされずに済みます。

最後に

いかがだったでしょうか。

今回はAWS AmplifyにホスティングしたSSGのサイトに対してのリダイレクト設定の仕方の紹介でした。

サイトへ直アクセスした時に、404ページにならないようにしておくのは大事ですね。

初ブログということもあり拙い文章だったかと思いますが、同じように悩んでいる方の助けになれたら幸いです。