FrontEnd

[Next.js] netlifyからCloudflare Pagesに引っ越してみた

投稿日:

はじめに

私個人のWebサイトをnetlifyからCloudflare Pagesに引っ越ししてみたので、Cloudflare Pagesを選定した理由と、実際の引越し作業についてまとめてみました。

netlify vs Cloudflare Pages

個人開発者がウェブサイトやウェブアプリのフロントエンドをホスティングするためのサービスとして、現在候補に上がるのは以下でしょうか。

  • GIthub Pages
  • netlify
  • Vercel
  • Cloudflare Pages

いずれもフリーミアムモデルを採用し、手軽に始められる点が共通点ですが、無料で使用できる範囲はそれぞれ異なります。
私は元々、netlifyを使用していました。その理由は、文献が多く、デプロイが簡単で商用利用が出来るためです。ですが、実際使ってみると、サイトの表示速度が遅いことや、無料枠を超えると自動的に課金され、早期に支払い方法を登録して決済しなければサイトが閉鎖してしまうことに気が付きました。
私のサイトはトラフィックが少なく課金の心配はありませんでしたが、サイトの表示速度が遅いことは問題です。(実際に計測しても遅いみたいです。)

そこで引越し先を検討した所、以下が決め手となり Cloudflare Pagesに引っ越すことにしました。

  • Next.jsがデプロイできる
  • netlifyよりも速く、Vercel並の表示速度
  • 無料プランでも商用利用可能
  • Functionは無料で毎日10万リクエスト実行可能 (超過した場合は関数のみ停止するか、サイトごと一時停止するかのいずれかを選択可能)
  • Edge Runtimeに対応
  • 帯域・リクエスト数が無制限

全てにおいてCloudflare Pagesのほうが優れている訳ではありませんが、それでもnetlifyよりサイト表示が早く、(今のところ)自動的に請求されてしまう心配もないのは嬉しいです。それでは、引っ越し作業の説明に入りたいと思います。

Cloudflare Pagesへのデプロイ

今回はCloudflare Pagesのダッシュボードからデプロイしてみます。まずは、Githubリポジトリと接続します。

次にデプロイに関する設定をします。プロジェクト名やデプロイトリガーとなるブランチ、ビルドコマンドなどを設定します。

プロジェクト名をもとに ***.pages.dev のサブドメインが割り当てられます。他と重複がなければプロジェクト名がそのまま使用されます。ただし、このサブドメインは後から変更はできないため、注意が必要です。(プロジェクト名は変更可能。)

FrameworkにNext.jsを選択した場合、Build commandのデフォルトは npx @cloudflare/next-on-pages@1 でしたが、今回のプロジェクトではpnpmを使用しているので、 pnpm dlx @cloudflare/next-on-pages に変更しました。
(@cloudflare/next-on-pagesはNext.jsをCloudflareにデプロイするために必要なCLIとのことです。)
ちなみに、Frameworkには「Next.js (Static HTML Export)」も選択可能でした。

ここまで設定が完了すると、一度デプロイが行われます。

デプロイが終わるとサイトを開く事ができるのですが、以下のようなエラーが表示されてしまいます。

Next.jsを動作させるにはNode.js APIを使用できるようにしておく必要があり、そのために Compatibility Flagsに nodejs_compat を指定する必要があります。(ダッシュボードからの初回デプロイでは必ずこのステップを踏む必要があります。)
Settings > Functions > Compatibility flags を開き、ProductionとPreviewの両方に nodejs_compat を指定します。

リポジトリでcommit & pushして再度デプロイすると、サイトが表示されるようになりました。AppRouterのopengraph-imageで生成されるOGP画像も問題ありませんでした。
こちらがデプロイされたサイトです。
https://onats.pages.dev/

netlifyでのリダイレクト設定とビルド停止

しばらくの間は、旧サイトがデプロイされているnetlifyから、Cloudflare pagesにリダイレクトさせたいと思います。netlifyでリダイレクトするには、次の2通りがあります。(参考: https://docs.netlify.com/routing/redirects/ )

  • netlify.toml で設定
  • _redirects ファイルで設定

今回は netlify.toml で設定したいと思います。( _redirects ファイルはCloudflareでも効いてしまうため)

これで新サイトに301リダイレクトがかかるようになります。toの :splat には、fromの * にマッチした文字列が入るため、リダイレクト後もパスが引き継がれます。
netlify側をデプロイし、リダイレクトされていることが確認します。

最後に、netlifyのデプロイを止めるため、Site configuration > Build settingsを開き、 Build statusを Stopped Builds にします。

さいごに

意外と簡単に移行できました。また、URLが ***.pages.dev という分かりやすいドメインになるのも気に入っています。

おすすめ書籍

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-, ,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

react-icon

React Hook Form (v7) とMUI (v5) だけでバリデーションを実装

1 はじめに2 バリデーションエラーをMUIのhelperTextに表示する2.1 バリデーション実装の全体感3 他のフィールドに関連するバリデーション4 CodeSandbox5 さいごに6 おすす ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

フォロー

blog-page_side_responsive

2023年12月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。