Vercel Netlify インフラ フロントサイド

VercelからNetlifyへの移行が思ったより簡単だった件

どうも、シローです。

普段はフロントサイドやサーバサイドの開発をしております。

今回は、個人開発しているE-Neta-HoukoのフロントサイドをVercelからNetfilyに移行したのでその経緯と手順についてまとめます。

この記事の対象者

  • VercelからNetfilyへの移行を検討している人
  • VercelとNetfilyの料金プランを比較したい人

Vercelの商用利用プランが結構高かった

Vercelは通常は無料で利用できるのですが、広告を入れるには有料プランにする必要があります。

価格は一人当たり20$ 大体2800 ~ 3000円くらいして、個人開発者としては運用費をなるべく下げていきたいところ。

参考:https://vercel.com/docs/limits/fair-use-guidelines#commercial-usage

Hobby accounts are restricted to non-commercial personal use only.
All commercial usage of the platform requires either a Pro or Enterprise plan.

Netlifyの無料プランを調べる

Vercelのalternativeで調べたらNetfilyが出てきた(前から知っているけど、よくわからないから使っていなかった)

どうやら、Vercelと同様にNext.jsのプロジェクトをホスティングしてくれるみたいだった。

SSRやISRにも対応しているので、プロジェクトに変更を加えないでデプロイもできるのが偉い。

で、肝心の料金なのだけど、商用利用でも無料で使用できる!そして、有料にしても一人当たり19$なので、Vercelよりも1$安かったりする(露骨に調整しているw

制約なのだけど、無料故に有料に比べたら見劣りするのは当然だが、

  • 通信量が100GB/月まで
  • ビルド時間が300分/月まで

には気をつけたほうが良いのがわかった。というか、立ち上げ始めのサービスでは気にする問題ではない。

ある程度お金稼げるようになったら、有料にしてパフォーマンス向上に期待するのも良い。

というわけで移行してみる

長々と書きましたが、いよいよ本題の移行する流れについてです

Netlifyでフロントサイドのプロジェクトを作成する

まずはVercelとNetlifyの両方でプロジェクトが立ち上がっている状態にします。

Netlifyで立ち上げたものが正しく動いているのを確認してから、切り替えるほうが安全なので

ダッシュボードで「Add new site」をクリックして「Import an exisiting project」を選択します。

そうすると、紐づいたGithubアカウントにあるリポジトリを選択することができます。

あとは流れに任せて、プロジェクトを作成できるはず・・

立ち上がったらNetify用のドメインが割り振られているので、それをブラウザで開いてみましょう。

Netfilyのドメイン設定でDNSレコードを作成する

サイドバーに「Domain」という項目があるので、それをクリックするとドメイン設定画面に移ります。

そこではホスティングしたいアドレスに対するCNAMEレコードを作成してくれます。

 

DNSサーバでVercelのCNAMEレコードを削除して、Netlifyで発行したCNAMEレコードを作成する。

E-Neta-Houkoのドメインはお名前.comで取得しているのですが、DNSサーバはAWSのRoute53を利用しています。

なので、その画面で既存のVercelのCNAMEレコードを削除して、先ほど作成したNetlifyのCNAMEレコードを追加してあげます。

そうすることで、DNSサーバはホスティングのドメインのアクセス先をNetlifyに向けてくれるようになります。

SSL証明書の検証に少々時間がかかりますが、完了してアクセスができたらVercel側のドメイン設定は解除して大丈夫です。

もし、うまくいかない場合はNetlifyのログを見ながら原因を調べたり、場合によってはVercelのCNAMEを再びDNSサーバに登録し直して元に戻す必要があります。

まとめ

  • Vercelで広告を設置するには月2800円以上は払わないといけない
  • Netfilyなら広告を無料で置ける
  • 移行手順は
    • Netlifyのプロジェクトを立ち上げる
    • DNSサーバにCNAMEレコードをNetlifyのものに差し替える
    • 正しく動いたらVercelのドメイン設定を解除

本記事が移行作業に少しでも参考になれば幸いです。

-Vercel, Netlify, インフラ, フロントサイド

© 2024 Shiro's secret base