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


関連記事

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

js

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

react-icon

React Konvaで状態管理されたCanvasを描画してみた

1 はじめに2 Canvasとは?3 React Konvaとは4 着せ替えアプリっぽいサンプルを作成4.1 React Konvaの導入4.2 画像の描画4.3 stateによるCanvas描画4. ...

フロントエンドで動画デコレーション&レンダリング

1 はじめに2 レンダリング方法の検討3 背景部分のキャプチャ3.1 modern-screenshotの導入3.2 DOMのキャプチャ4 ffmpeg.wasmで画像と動画を合成4.1 ffmpeg ...

フォロー

blog-page_side_responsive

2023年12月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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