※記事のURLの一部は広告を含みます。

Vercelで別のドメインへリダイレクトするの絵文字

Vercelで別のドメインへリダイレクトする

2022-04-15

2022-04-15

はじめに

こんにちは。VercelからCloudflare Pagesに移行した、こふです。

どうやるか

手順は以下の通りです。

vercel.jsonVercel にデプロイしたプロジェクトの一番上のディレクトリに作って書くだけ。

vercel.json
1{ 2 "redirects": [ 3 { "source": "/", "destination": "https://count-down.cohu.dev", "permanent": true } 4 ] 5}

上記は、実際に契約していたcount-down.siteというドメインから、本ブログのサブドメインへ遷移させた具体例です。

ちなみに、json ファイルは静的なファイルなので値をインポートして使うなどはできません。

なぜ上記のやり方でやるか

他にもリダイレクトの仕方は、以下のように無数にあります。

個人的にフロントエンド開発には React を好んで使っているので、React の手法が多めですが。。。

  • NextjsAPI Routesで遷移する
  • ReactuseEffectでマウント後に遷移する
  • DNSを修正する
  • VercelMiddlewareを用いる(エッジネットワーク)

しかし、一番手軽かつ低いレイヤーで行えるのは Vercel 公式のやり方だと感じました。

メリット

リダイレクトを適切に行うことができると、以下のように Google のインデックスにも即座に反映されます。

実際に反映された様

仮に useEffect を使っていた場合は、コンポーネントをマウントしてからなので、処理する速度の問題で上手に認識されない可能性があります。検証はしていないので予想ですが。。。

【宣伝】Notion でカウントダウンするためのウィジェットメーカー

自作なので、Notion を使っている方は使ってみてください 😀

おわりに

Cloudflare Pagesでもさまざまなやり方があるので、紹介したいと思います。

最後までお読みいただきありがとうございました。

参考




共有する