NetlifyからVercel(元ZEIT(元now))にホスティング先を変更してみた

NetlifyのCDNに不具合があり、TTBFが遅延する自体が長いこと続いているので別のJAMStackホスティングサービスを探しており、now.shとして知られていたサービスが今ではVercelとなりJAMStackとの親和性が上がっているようでしたので、テスト的にサークルサイトを移行してみることにしました。

TTBFが1秒近くかかる不具合を半年対応できないとかヤバすぎる

移行にかかった時間はドメインのTTL待ちを除けば30分ほどです。リダイレクトやルーティングが不要であればポチポチして5分で終わります。

セッティング

概ねNetlifyと同じく、WebコンソールからポチポチしてGithubリポジトリとリンクすると、ビルドコマンドとdevコマンドを入力する画面が現れるので、これを指定して始めます。

自動的にフレームワークを認識する機能がついているので、ビルドコマンドもサジェストされるのは好印象。

デプロイはじまりました

Netlifyでは、インクリメンタルビルドを利用して3分は最低でもビルドにかかるリポジトリなのですが、なんと全ページをビルドしてたったの2分しかかかっていません！

サイトはインターネット経由で確認できるので、Pagespeed Insightsで確認してみます。 正規ドメインでないと実行されないスクリプトがあるので単純比較はできませんが、TTFBは明らかにVercelが勝っています。

Vercel

Netlify

CDNのエッジサーバーが東京にあるので、かなり期待できそうです。

設定の移行

ビルド設定以外に、Netlifyでリダイレクト設定やヘッダー設定をしている箇所があるので、これらをVercel用に移行します。

Netlifyでは_redirect, _headerのようなファイルをStaticディレクトリに入れてルートに配置することでこれらを設定していましたが、Vercelではvercel.jsonという設定ファイルをプロジェクトルートに配置して設定します。

vercel.com

JSONなのでコメント書けないのはちょっと…ですが新しく候補にしていたAzure Static AppsもJSONなのでここは文句を言わないことにします。正規表現がリダイレクトで使えるのは非常にGood！

ビルド時間短縮用のオプションと、移行した記事のリダイレクトを書いていきます。

{
  "build": {
    "env": {
      "GATSBY_TELEMETRY_DISABLED": "1"
    }
  },
  "redirects": [
    {
      "source": "/portfolio/md2doujin/",
      "destination": "https://gensobunya-tech.hatenablog.com/entry/2018/12/20/000000"
    },
　    {
      "source": "/category/(.*)",
      "destination": "/tags/$1"
    },
...

Netlify用のtomlで記載されていたリダイレクトのリストはスプレッドシートという有能なソフトでJSONに変換しました。

リダイレクトは、ローカルでも確認できるのでvercel devコマンドを実行することでVercelでのホスティング状態をエミュレートできます。便利。

デプロイはvercelコマンドだけでいいのですが、Githubインテグレーションを設定しているので、Pushするごとにプルリクやブランチに応じたプレビューURLを作ってくれます。ステージング確認はそれらで実施するのが良いでしょう。

移行

ローカルで稼働確認をしたら、プロダクションブランチをスムーズに移行させるためにNetlifyのサイトは活かしつつ、Vercel側で新バージョンのデプロイをしてDNSを切り替えます。

1. Netlifyの自動ビルドを止める
2. Vercel移行のプルリクを作成、ビルド結果を確認
3. DNSを切り替え

これで、DNSの切り替えが反映されていない人はNetlifyのホスティングを参照してくれます。TTLの倍の時間が過ぎたらNetlifyのサイトは削除してもよいでしょう。

VercelでもIncremental Buildが使えるようになってほしいですね～。ビルドキャッシュをどこに保持するのかが問題になりそう