🚀

GitHub リポジトリと Cloudflare Pages を連携し、Next.js アプリのCI/CDパイプラインを構築

に公開

記事の経緯

内容はネット上によくありますが、
GitHub経由でホスティングするしない方法と混同してつまづいたので備忘。

順番

  1. Next.JSでアプリをつくる。
    (GitHub Flavored Markdown Specにもとづいてマークダウンチェックしてくれるアプリを作りました。)
  2. buildできるような状態にして、
    npm install --save--dev @opennextjs/cloudflareコマンドする。(ここもしかしたらいらないかも)
  3. GitHubでリポジトリにPUSHする。
  4. CloudflareのWorkers&Pagesページの新規作成から、GitHubリポジトリを選択して作成。(この辺は内容割愛。)
  5. 一回deployして、エラーが出るので、Settingsから
  • Variables and Secretsで実際のプロジェクトのNODE_VERSIONを設定。
    (自分は20でした)
  • Compatibillity flagsをnodejs_compatを入力して登録。
    プルダウンでnodejs_compat_populate_process_env
    nodejs_compat_do_not_populate_process_envしか出てこなくてないやん、入力できんやん!で困った。(確かに最初入力できんかった気がするのだが、、)

おわりに

公式ドキュメントをだいぶ読んだので、いい経験になった。
markdownの書き方を理解したい。
これで再現性のないAIパワープレイホスティングでなくていろいろホスティングできるぞ。

参考にさせていただいた記事

https://uhiyama-lab.com/blog/webdev/nextjs-cloudflare-custom-domain/

Cloudflare公式ドキュメント

https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-static-nextjs-site/

https://developers.cloudflare.com/workers/runtime-apis/nodejs/

compatibilityのとこ

https://developers.cloudflare.com/workers/configuration/compatibility-flags/

Discussion