create-cloudflare-cliでCloudflare Pages + Next.jsのプロジェクトを作り、GitLabからの自動Deployを設定する。
PONTACloudflare Pagesのプロジェクトを簡単に作れるツールが出た。試してみる。
PONTAこれまでは以下の手順で10個ぐらいコマンド打たないと設定できなかった。これからは一発で出来る。
PONTA以下のコマンドで、プロジェクトを作成できる。
npm create cloudflare@latest
名前は適当につける。
Tailwind CSSを使うかだけNoにした。（私はTailwind使えない...）
DeployはNoにする。
PONTAちなみに、DeployをYesにするとブラウザが開いてCloudflareへのログインが求められる。
ログインするとローカルPCからDeployできるようになる。（Git管理すら必要ないならこれで良い。）
今回はGitLabからDeployするように設定したいのでNoとした。
PONTAgitlabにログインして空のリポジトリを作る。それを以下コマンドでプロジェクトのremoteに設定しpushする。
git remote add origin git@gitlab.com:<user name>/<repo name>.git
git push --set-upstream origin main
ちなみにcloudflare側がbuildのコンテナ側を用意してくれるので、gitlab-ci.yamlとかの設定は必要ない。なのでgithubでも全く同じやり方で自動Deployができると思う。
PONTACloudflareにログインする。
Cloudflare Pagesからgit統合でgitlabを選択してプロジェクトを作成する。
その際に、環境変数で以下を設定
NODE_VERSION = 16
これでDeployが成功する。
PONTAhttps://<project name>.pages.devを開くと以下の画面が表示される。
Error: Could not access built-in Node.js modules. Please make sure that your Cloudflare Pages project has the 'nodejs_compat' compatibility flag set.
これは以下の手順で解決できる。
Cloudflareのプロジェクトの画面から設定を開く。
Functionsの設定から互換性のフラグでnodejs_compatを設定する。
次にDeployが回ると正しく表示されるはず。
PONTAちなみに、これは現状のcloudflare workersのruntimeがnodejsとは異なり、実験的にnodejs互換のruntimeを提供しているから起こる。実験的なので、明示的に有効化しないと使えないみたい。
PONTA感想
- AWS Amplifyだと機能がリッチすぎて考えること多すぎるけど、Cloudflare Pagesは機能がシンプルなので設定が楽。加えてwranglerでローカルの開発環境も簡単に整う。開発も楽。
- Deployは2mぐらいかかる。ローカルも5sぐらいビルド時間かかる。
- Cloudflare Workersのruntimeがnodejsの互換でしかないところに一抹の不安がある。