NetlifyからCloudflare Pagesに引越しました

はじめに

こんにちは。豆乳のバナナ味が好きです、筆者です

さて今回は、NetlifyからCloudflare Pagesに引越する際にしたことを記事にまとめたいと思います。
自分とまったく同じ構成にしている人は少ないと思いますが、参考になれば幸いです。

引越した理由

以下がすべてです！興味深い結果だったのでぜひざっと見ていただけると嬉しいです

やりたいこと

1. Gatsbyプロジェクトのホスティング先をNetlifyからCloudflare Pagesに移行する.
2. Netlify側で設定しているカスタムドメインをCloudflare Pages側でも使用する.

引越の内容

項目	現在	→	今後
ホスティング先	Netlify	→	Cloudflare Pages
プロジェクト	Gatsby	→	Gatsby
ビルド	GitHub Actions	→	Cloudflare Pages
デプロイ	GitHub Actions	→	Cloudflare Pages
お問い合わせ	Netlify Forms	→	Googleフォーム
Contentful Webhooks先	GitHub Actions	→	GitHub Actions(検討中)

NetlifyからCloudflare Pagesに引越

1. お問い合わせページの切り替え

Netlify Formsで作成されたお問い合わせページはCloudflare Pages側で機能しなくなるGoogleフォームに切り替えます。

1. Googleフォームでお問い合わせ用のフォームを作成する。
2. Netlify Formsで作成したお問い合わせページをソースコードから削除する。
3. 2に向いていた各導線を1のURLに変更する。

2. Cloudflare PagesにGatsbyプロジェクトデプロイ

以下の記事でデプロイしました。

3. Netlify側のカスタムドメインを解除

Netlify側のドメイン設定の画面から解除が可能なので解除します。

4. Cloudflare Pagesでカスタムドメインを設定する

以下の記事で設定しました。

5. ContentfulのWebhooksを解除

以下記事で設定したContentfulのWebhooksを解除します。

今後またGitHub Actions使いたいのでこの設定を残しておきたいのですが、どうもWebhooksの削除しかないので、絶対に発生しないイベントに変更しました

6. ビルドしてNetlifyへデプロイするGitHub Actionsのワークフローを無効化

以下記事で設定したGitHub Actionsのワークフローを無効化します。

ボタンポチポチすればできます
ワークフローのymlをまるごと削除でも大丈夫です

7. リポジトリに設定していた不要な環境変数を削除

GitHub Actionsでビルド時に使用していたContentfulやGoogleAnalyticsなどの環境変数を削除します。

8. プロジェクトから不要なパッケージを削除

自分は以下不要になりました

$ npm uninstall gatsby-plugin-netlify

...長い間！！！　くそお世話になりました！！！

9. gatsby-config.jsから8のプラグインを外す

gatsby-config.js

module.exports = {
  plugins: [
-    'gatsby-plugin-netlify',
}

10. Netlify 退会

...長い間！！！　くそお世話になりました！！！

おわりに

結構だらだらした記事になること見越して、いくつか記事を分けております

今回のポイントはNetlify Formsの代替手段の用意です。
ホスティングサービスの機能を使うとほかに移動したいときに簡単には行かないケースが出てしまうことを学びました。
あんまり依存は良くないっすね

Googleフォームはiframe埋め込みしてスタイル調整して自分のサイト内で完結する方法もありです
お好みでどうぞ

それでは！