Cloudflare PagesでNext.jsのプロジェクトをデプロイしてみた

7 min read 3

サンプルで作ったNextjsのプロジェクトをVercelでこちらのサンプルブログをデプロイしてみます!

https://github.com/nekoshita/nextjs-blog-example

Vercelでもやってみたのですが、使いたい機能を有料じゃないと使えなかったので、CloudFlareも試してみます!

https://zenn.dev/nekoshita/articles/f8a737f38a5fb4

やりたいこと

  • Next.jsで作ったブログを公開したい
  • 本番環境と開発環境を用意したい
  • 開発環境には認証をかけたい
  • カスタムドメインにする

他にも試したみたいことはたくさんありますが、とりあえず初回なのでこれだけできればよしとします。

リンク

Cloudflare Pagesにデプロイするまで

エラー対応

$ next export
info  - using build directory: /Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "next.config.js". Generating map from "./pages"
info  - Launching 3 workers
info  - Copying "public" directory
[    ] info  - Exporting (0/4)
Error occurred prerendering page "/_documents". Read more: https://err.sh/next.js/prerender-error
TypeError: ctx.renderPage is not a function
    at Function.getInitialProps (/Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/.next/server/pages/_document.js:267:19)
    at loadGetInitialProps (/Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at loadGetInitialProps (/Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/next-server/lib/utils.js:5:24)
    at renderToHTML (/Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/next-server/server/render.js:25:1519)
    at async /Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/export/worker.js:26:6
    at async /Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/build/tracer.js:3:470
info  - Exporting (4/4)
Error: Export encountered errors on following paths:
	/_documents
    at /Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/export/index.js:30:1103
    at async /Users/Lemor/projects/github.com/nekoshita/nextjs-blog-example/node_modules/next/dist/build/tracer.js:3:470
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
  • エラーの原因
    • pages/_documents.tsxのファイル名が間違っていた
    • pages/_document.tsxにしたら直った

修正した内容をプッシュ

masterにマージ

Cloudflare Pagesのデプロイ環境について

環境は2種類

https://developers.cloudflare.com/pages/getting-started#configuring-your-deployment

Production branch indicates the branch that Cloudflare Pages should use to deploy the "production" version of your site. For most projects, this is the main or master branch.
All other branches that aren't your production branch will be used for preview deployments.

  • Production用のブランチとして指定したブランチへのプッシュはProduction環境デプロイされます
  • その他全てのブランチへのプッシュはPreview環境へデプロイされます
  • どちらもプッシュしたタイミングでURLが発行され外部へ公開されます

Preview環境は検索エンジンのインデックスされる?

  • 公式ドキュメントには特に記載はなさそう
  • Vercelとは違い、Production環境もPreview環境も、レスポンスヘッダーに x-robots-tag: noindex が付与してくれてはいない
  • ので、検索エンジンにはインデックスされてしまうと思われる
    • @peaceirisさんにいただいたご報告によると、@peaceirisさんの作成したプレビュー環境ではx-robots-tag: noindexが付与されていました。
  • 設定で、レスポンスヘッダーを設定できるかもしれない
  • 環境ごとにタグを出し分けるなどする必要があるかもしれない

Cloudflare Pages の環境変数

NODE_ENVはどうなってる?

  • 全部production

環境変数を設定してみた

  • Preview環境に環境変数を設定して、再ビルドしてみた
  • と思ったけど、どうも再ビルドはできなさそうなので、空コミットをプッシュした
  • masterにマージした

環境変数まとめ

  • 環境変数はproductionとpreviewのそれぞれの環境に設定ができる
  • 環境変数が適応されるのは、デプロイブランチの時はprodcution、それ以外はpreview
  • デプロイブランチでデプロイされると、以下のような2種類のurlにデプロイされる
  • 後者のurlはpreview環境のように見えるが、環境変数はproductionが使われている
  • この挙動についてはVercelと同じ

Preview環境に認証はかけられるのか?

ドキュメントをみる

https://developers.cloudflare.com/pages/platform/preview-deployments#customizing-preview-deployments-access

Access Policyによって認証をかけられると書いてある

試してみる

Comming Soon....

もしかしたら Cloudflare Accessからなにか設定できるかもと思い試しましたが、全くできませんでした。。。

カスタムドメインにできるのか?

やってみる

  • ドメインをCloudflare DNSに登録する必要があるらしい
  • Cloudflare DNSにドメインを登録した
  • Cloudflare Pagesからカスタムドメインを登録できた

登録できた

今までのURLも有効なのか?

Cloudflare Pagesについてその他

Vercelと違ってISRやSSRはできなさそう


対象フレームワークを選択する時に、「Nextjs(Static HMTL Export)」と書かれていたので、ISRやSSRはできなさそうな雰囲気です。
(ドキュメントちゃんと読んでないので、本当にできないのかはわかりません)

連携できるのはGitHubのみ

リポジトリを連携する時にGitHUbしか選択肢がなかったので、今のところGitHubしか連携できないようです。

デプロイコマンドは使えない?

ドキュメントに記載が見当たらなかったので、おそらく使えないです。

他サービスからの乗り換え

https://developers.cloudflare.com/pages/migrations
VercelやNetlifyから乗り換えの仕方について公式ドキュメントに紹介されています。

結論

Cloudflare Pagesについてまとめ

  • デプロイはめっちゃ簡単にできる
  • GitHub連携すればプッシュ毎にデプロイしてくれる
  • デプロイごとにドメインを発行してくれるので、開発状況を共有しやすい
  • preview環境は検索エンジンにインデックスされないようにnoindexにしないといけない
    • しかし、本番環境のurl以外をnoindexにするような設定は環境変数をつかってもできない
    • 仕様は分かりませんが、プレビュー環境ではnoindexになった方もいました
    • preview環境の認証かける機能が使えるようになったら気にしなくて良くなりそう
  • 自前で本番環境以外に認証をかけることはできない
  • 今の段階では劣化版のVercel

Cloudflare Pagesの今後に期待

  • Comming SoonだったPreview環境に認証をかける機能を早く使いたい
  • デフォルトの本番環境は消せるようにして、カスタムドメインだけを本番環境にしたい
  • Vercelなどではネットワーク周りの設定に手が届かないので、Cloudflareのその他サービスと連携して、細かな設定ができるようになると嬉しい
  • 設定系がまだ少ないので、充実してほしい

やりたきことはできたのか?

Next.jsで作ったブログを公開したい

できた!

本番環境と開発環境を用意したい

できた!むしろ勝手にされた!

開発環境には認証をかけたい

今はできない。CommingSoon!

カスタムドメインにする

できた!