【Next.js x Amplify】リダイレクト設定が面倒なので一括で出力するシェルスクリプトを書きました【書き換えて、リダイレクト】

Amplify Hosting の Next.js の Dynamic Routes の設定が面倒

何も考えずにURLに直接アクセスするとうまくページを表示できない。
なんてことは、おそらくタイトルの構成でホスティングされると経験されるかと思います。
それの対応策は以下のリンクが非常にわかりやすいので、こちらで対応すればサクッと対応できます。

簡潔に言えば、Amplifyの「書き換えて、リダイレクト」画面で適切な設定をすれば対応ができます。

しかし私にとっての問題は設定の可否ではなく、設定の煩わしさです。

私はバックエンドエンジニアなのであまりNext.jsに明るく無いのですが、AWSをよく触るのでこの辺りの設定担当になっています。
把握していないファイル構成を洗い出し、一つ一つぽちぽちするのが結構面倒なんです。

↑こういうのを一個一個設定する必要があります。

テキストエディタで設定することもできるよ

このように、テキスト形式で設定することもできるそうです。
これを利用すれば少しは簡略化できそうですね！

なのでシェルスクリプトを作ったよ！

というわけでコマンド一つでファイルを出力して、
それをコピペして貼り付ければ設定できるようにしました！

bash amplify_redirects.sh で redirections.jsonというファイルに
設定用のjsonが吐き出されるようにしました。

以下は雛形として、各々の環境に合わせてカスタマイズしていただけると幸いです。

amplify_redirects.sh

#!/bin/bash

##### 各種パラメータ ######

# 拡張子
EXTENSION='.tsx'
# 削除するプリフィックス
ROOT_DIR='./src/pages'
# 除外するファイル
EXCLUDED_FILES=('/_app' '/_document' '/index')
# 出力先のファイルの名前
OUTPUT_FILE='redirections.json'

##### ここから処理 #####

pages=$(find ./src/pages -type f)
targets=(${pages// / })

echo "[" > $OUTPUT_FILE

for target in "${targets[@]}"
do
  target=${target#$ROOT_DIR}
  target=${target%$EXTENSION}
  
  if printf '%s\n' "${EXCLUDED_FILES[@]}" | grep -qx $target; then
    continue
  fi

  # /indexを削除
  target=$(echo $target | sed s/\\/index$//)

  # /[]を<>に書き換えるを削除
  source=$(echo $target | sed s/\\[/\</)
  source=$(echo $source | sed s/\\]/\>/)

  echo "    {" >> $OUTPUT_FILE
  echo "        \"source\": \"$source\"," >> $OUTPUT_FILE
  echo "        \"target\": \"$target\"," >> $OUTPUT_FILE
  echo "        \"status\": \"200\"," >> $OUTPUT_FILE
  echo "        \"condition\": null" >> $OUTPUT_FILE
  echo "    }," >> $OUTPUT_FILE
done

# 想定外のURLには404を返す
echo "    {" >> $OUTPUT_FILE
echo "        \"source\": \"/<*>\"," >> $OUTPUT_FILE
echo "        \"target\": \"/404.html\"," >> $OUTPUT_FILE
echo "        \"status\": \"404-200\"," >> $OUTPUT_FILE
echo "        \"condition\": null" >> $OUTPUT_FILE
echo "    }" >> $OUTPUT_FILE

echo "]" >> $OUTPUT_FILE

cat $OUTPUT_FILE

上手にできました

出力してみるとこんな感じです！
これをコピペして簡単に設定できるようになりました！

しかしながら、相変わらずAWS先生の日本語って不思議ですね。
「書き換えて、リダイレクト」ってなんなんだろ...笑

※より良い書き方や、改善点などがあれば気軽にコメントいただけると嬉しいです。