Zenn
🛤️

Amplify HostingでのNext.jsのDynamic Routesの設定

2021/05/31に公開
Next.js
Amplify
tech

結論

  • Amplify Consoleの書き換えて、リダイレクトを下記Goodのような書き方にする
  • 書き換えて、リダイレクト設定後はキャッシュが残ってる可能性があるのでまっさらなシークレットウィンドウで動作確認するのが吉

Bad

送信元アドレス ターゲットアドレス 入力
/nus3/<*>/locations/upload /nus3/[id]/locations/upload.html 200(Rewrite)
/nus3/<*>/locations/<*>/hada /nus3/[id]/locations/[hada-id]/hada.html 200(Rewrite)
/nus3/<*>/locations/<*> /nus3/[id]/locations/[hada-id].html 200(Rewrite)
/nus3/<*>/locations /nus3/[id]/locations.html 200(Rewrite)

Good

送信元アドレス ターゲットアドレス 入力
/nus3/<id>/locations/upload /nus3/[id]/locations/upload.html 200(Rewrite)
/nus3/<id>/locations/<hada-id>/hada /nus3/[id]/locations/[hada-id]/hada.html 200(Rewrite)
/nus3/<id>/locations/<hada-id> /nus3/[id]/locations/[hada-id].html 200(Rewrite)
/nus3/<id>/locations /nus3/[id]/locations.html 200(Rewrite)

はじめに

Amplifyでサクッと環境構築して、ローカルでNext.jsのDynamic Routesを使ってサクサク実装してたら、Amplify Hostingのとこでハマったものです。全てをお話しします。

(Amplifyでサクッと環境構築した話)
https://zenn.dev/nus3/articles/89168a3485a544c792d5

記事のターゲット

  • Next.jsのDynamic Routes使っている人
  • デプロイ先にAmplify Consoleを使っている人
  • CSRな人

環境

関係ありそうなものだけ
@aws-amplify/cliはグローバルにインストールしてます

package.json
  "dependencies": {
    "next": "10.2.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },

❯ amplify -v
Scanning for plugins...
Plugin scan successful
4.51.0

AmplifyにDynamic Routesを使った実装をしたNext.jsをデプロイしたら何が起こるのか

src/pages/nus3
├── [id]
│   ├── [hada-id]
│   │   ├── hada.tsx
│   │   └── index.tsx
│   ├── index.tsx
│   └── locations
│       ├── [hada-id]
│       │   ├── hada.tsx
│       │   └── index.tsx
│       ├── index.tsx
│       └── upload.tsx
└── index.tsx

Next.jsのDynamic Routesを使ってページの上記のようにルーティングにしたものをnext build && next exportしてみると下記のようなstaticなhtmlたちが生成される

out/nus3
├── [id]
│   ├── [hada-id]
│   │   └── hada.html
│   ├── [hada-id].html
│   ├── locations
│   │   ├── [hada-id]
│   │   │   └── hada.html
│   │   ├── [hada-id].html
│   │   └── upload.html
│   └── locations.html
├── nus3.html
└── [id].html

これをそのままAmplifyにデプロイすると例えば/nus3/test-id/locationsみたいな場所にアクセスしようとしても生成されたhtmlは/nus3/[id]/locations.htmlなのでアクセスできない。

Amplifyの書き換えて、リダイレクトの設定を変更する

Amplifyの公式ドキュメントを読んでみるとAmplify Consoleの書き換えて、リダイレクトで下記のような設定をすればうまくいく旨の記載がされている

Source address Target address Type
/post/<*> /posts/[id].html 200(Rewrite)
/<*> /index.html 200(Rewrite)

あー、はいはいなるほどね
そしたら/nus3/[id]/locations/[hada-id]みたいな動的なパスパラメータが二つ以上ある場合は/nus3/<*>/locations/<*>みたいな設定すればいいのね
って思ったらそうじゃなかった

/nus3/<*>/locations/<*>の設定をしても/nus3/[id]/locations/[hada-id].htmlを見てくれず、二つ以上のパスパラメータを使った参考を探してもなかなか見当たらず、正規表現に対応してるっぽかったので<//nus3/<[a-zA-Z0-9\-]*>/locations/<[a-zA-Z0-9\-]*/>みたいなのかいてみたら動いたもののなんかいけてないよなぁと思っていた

...
......
.........
(.の数は四苦八苦した数を表しています)

Amplifyのドキュメント(前述したのとは別のもの)を注意深く読んでみたらQuery strings and path parametersなるタイトルを発見する
下記のような書き方ができるらしい

Source address Target address Type
/docs?id=<my-blog-id-value /documents/<my-blog-post-id-value> permanent redirect (301)

<変数名>みたいな書き方できるのかなと思いつつ
<my-blog-id-valueが<my-blog-post-id-value>になってるので、おーん？とか思いつつ
下記のような書き方で想定してた挙動が実現できた！

Source address Target address Type
/nus3/<id>/locations/upload /nus3/[id]/locations/upload.html 200(Rewrite)
/nus3/<id>/locations/<hada-id> /nus3/[id]/locations/[hada-id].html 200(Rewrite)

ややこしいんですがこれは別に/nus3/<id>/locations/uploadを/nus3/<foo-id>/locations/uploadにしても動きます
<id>の値をTarget addressの[id]に代入してるわけではないので

その他注意点など

  • Amplify Consoleの書き換えて、リダイレクトでは上から順にマッチしたものが反映されるので順番は要注意
  • 書き換えて、リダイレクトの設定を変更した後はキャッシュが残っているかもなので、キャッシュがない、まっさらなシークレットウィンドウなどで動作確認すべし
  • 設定値が増えてくる場合はテキストエディタを開くから内容を一括置換したほうが良さそうだし、設定値をリポジトリに保存した方が良さそう

動作確認してた時の最終形の設定値
最終的に設定値はこんな感じになりました

再三出てきた書き換えて、リダイレクトが気になった方は上記のスクショを見てもらえればわかると思うんですが、Amplify Consoleを日本語で見るとRewriteの設定をするページのタイトルが書き換えて、リダイレクトなのです(ページ翻訳とかしてるわけではない)

GitHubで編集を提案

Discussion