
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
でもさまざまなやり方があるので、紹介したいと思います。
最後までお読みいただきありがとうございました。