Vercelで別のドメインへリダイレクトする
2022-04-15
2022-04-15
目次（タップして移動）
はじめに
こんにちは。VercelからCloudflare Pagesに移行した、こふです。
どうやるか
手順は以下の通りです。
vercel.jsonを Vercel にデプロイしたプロジェクトの一番上のディレクトリに作って書くだけ。
vercel.json1{ 2 "redirects": [ 3 { "source": "/", "destination": "https://count-down.cohu.dev", "permanent": true } 4 ] 5}
上記は、実際に契約していたcount-down.siteというドメインから、本ブログのサブドメインへ遷移させた具体例です。
ちなみに、json ファイルは静的なファイルなので値をインポートして使うなどはできません。
なぜ上記のやり方でやるか
他にもリダイレクトの仕方は、以下のように無数にあります。
個人的にフロントエンド開発には React を好んで使っているので、React の手法が多めですが。。。
NextjsのAPI Routesで遷移するReactのuseEffectでマウント後に遷移するDNSを修正するVercelのMiddlewareを用いる（エッジネットワーク）
しかし、一番手軽かつ低いレイヤーで行えるのは Vercel 公式のやり方だと感じました。
メリット
リダイレクトを適切に行うことができると、以下のように Google のインデックスにも即座に反映されます。
仮に useEffect を使っていた場合は、コンポーネントをマウントしてからなので、処理する速度の問題で上手に認識されない可能性があります。検証はしていないので予想ですが。。。
【宣伝】Notion でカウントダウンするためのウィジェットメーカー
自作なので、Notion を使っている方は使ってみてください 😀
おわりに
Cloudflare Pagesでもさまざまなやり方があるので、紹介したいと思います。
最後までお読みいただきありがとうございました。
