netlifyの非同期でのリダイレクトにハマった話

個人開発での Nuxt ＋ Netlify での環境でハマった話です。

現在個人的に制作しているサービスは Nuxt で制作していて、外部からAPIでデータを非同期で取得して、それをHTMLに埋め込む形で開発しているんですが、ローカル環境での制作がほぼ終わり、ここいらで本番サーバーにデプロイするか～と Netlify にデプロイしたらAPIへのリダイレクトが上手くいかない・・・。

ローカル環境で制作しはじめた段階で CORS に引っ掛かり、これの処理は nuxt.config.js で proxy にAPIへのリンク先を噛ませる形で回避していたのですが、これをそのまま Netlify に入れても読めない様です。

（まあ予想はしてたんですけどね）

で、色々とググって調べていくと Netlify でのリダイレクトの設定の仕方は

この中のいずれかで出来るっぽいです👀

（④は未検証なので何とも言えませんが、環境変数と組み合わせて使う事が多いっぽいですね）

今回はページのレンダリングと同期させてAPIを読ませるのではなく、ユーザーが選択した条件をパラメータに入れて非同期で取得したかったので、一番上の方法としました。
（特定のURLになった際にリダイレクトが発動する様なロジックにしました。）

余談ですが、環境変数を Netlify の設定画面から登録すると、ページが読まれた時にリダイレクトしますね。

（なので、同期で動かしたいなら環境変数でのリダイレクトも使えるかと思います。）

さて、その _redirects 設定時にハマった内容やポイントを記録しておくと、参考にしたのは下記のQiitaの記事。

Nuxt.jsでAPIのCORS対策をするとNetlifyで404エラーになる件 - Qiita

概要 Nuxt.jsでCORSエラーが発生したので、axiosのproxiy設定をした Netlifyにデプロイすると404エラーが発生した Netlifyのリダイレクトオプションを設定して解決 Nuxtの設定 .en...

qiita.com

ここに書かれてる

この　＋　の部分。

この『＋』が必要なん？ってなり、惑わされましたｗ

結果からいうと不必要でしたよ、ええｗ

アスタリスクや :splat はググれば答えが出てくるので割愛しますが、＋に惑わされたので、これを見た人は惑わされない様に気を付けてくださいｗ

私の場合は2種類のAPIを今回使用しているのですが、

と記載する事で解決できました。

（あ、URLはもちろんダミーですｗ）

Netlifyはリダイレクトの設定を確認できるツールとして、この様なツールも用意されてました。

redirects-playground

play.netlify.com

_redirects に記載する内容はここで確認できます。

（また、_redirects から netlify.toml に変換したい時も、設定を確認できますね。）

これを見つけるまでは、GitHubへプッシュして検証、プッシュして検証を繰り返してました・・・💦

こんな便利ツールがあるなら最初から知りたかったですねｗ

以上、Netlify のリダイレクトにハマった話と便利ツールの紹介でした。

参考

NetlifyのRedirect、Reweiteルールの書き方・処理方法まとめ | SERVERSUS

静的サイトのデプロイ・ホスティングを無料で使えるNetlifyで、Redirect、Reweiteルールの書き方や処理方法をまとめました。

www.serversus.work

Netlifyでリダイレクトを実装する

こんにちは、柴田です。分かりやすいUIでかつ柔軟な機能設定が可能な点から、Netlifyをホスティング先として選択されている方も多いと思います。Netlifyでリダイレクトを設定するには2通り方法があります。

blog.microcms.io

Netlifyで新旧の独自ドメインでリダイレクトする設定5行 - Qiita

この投稿ではNetlifyで独自ドメインをリダイレクトする設定方法を説明します。 例えば、old.example.comをnew.example.comにリダイレクトする設定をする場合、netlify.tomlに次の[[redire...

qiita.com