🌥️

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

2021/03/04に公開

3件

Next.js

Cloudflare

tech

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

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

やりたいこと

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

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

リンク

サービスページ
- https://pages.cloudflare.com/
公式ドキュメント
- https://developers.cloudflare.com/pages/getting-started

Cloudflare Pagesにデプロイするまで

Cloudflareのアカウントを作る
- https://dash.cloudflare.com/sign-up
Cloudflare Pagesを開く
- https://dash.cloudflare.com/ユーザーID的なの/pages
対象のリポジトリを連携して
ポチポチしたら、デプロイが始まった
Vercelではデプロイできたけど、Cloudflare Pagesではエラーしてしまった
next exportコマンドが落ちてる

エラー対応

$ 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にしたら直った

修正した内容をプッシュ

ビルド成功
以下のURLにデプロイされた
- https://d8995852.nextjs-blog-example.pages.dev/
Previewというタグがついてるので、Preview環境にデプロイされたよう

masterにマージ

ビルド成功
以下の2箇所にデプロイされた
- https://nextjs-blog-example.pages.dev/
- https://f49d0078.nextjs-blog-example.pages.dev/
どちらもProductionというタグがついてるので、どちらもProduction環境にデプロイされたのかもしれない

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

環境は2種類

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環境に環境変数を設定して、再ビルドしてみた
と思ったけど、どうも再ビルドはできなさそうなので、空コミットをプッシュした
- preview環境にデプロイされた
  - https://2bdbf0df.nextjs-blog-example.pages.dev/
- 環境変数は適応されている
masterにマージした
- production環境にデプロイされた
  - https://nextjs-blog-example.pages.dev/
  - https://86e5c9b3.nextjs-blog-example.pages.dev/
- どちらもpreview環境に設定した環境変数は適応されていない
- ということは、Vercelと同じくURL的にはproductionとpreviewっぽいけど、ビルドはprodcutionで行っているから、どちらもprodcutionの環境変数が適応されるということか

環境変数まとめ

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

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

ドキュメントをみる

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

試してみる

Comming Soon....

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

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

やってみる

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

登録できた

https://kouyakoudou-match.com/

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

https://nextjs-blog-example.pages.dev/
https://2bdbf0df.nextjs-blog-example.pages.dev/
https://86e5c9b3.nextjs-blog-example.pages.dev/
バリバリで全部有効

Cloudflare Pagesについてその他

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

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

連携できるのはGitHubのみ

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

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

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

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

VercelやNetlifyから乗り換えの仕方について公式ドキュメントに紹介されています。

結論

Cloudflare Pagesについてまとめ

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

Cloudflare Pagesの今後に期待

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

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

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

できた！

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

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

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

今はできない。CommingSoon！

カスタムドメインにする

できた！

Discussion

peaceiris

Vercelとは違い、Production環境もPreview環境も、レスポンスヘッダーに x-robots-tag: noindex が付与してくれてはいないので、検索エンジンにはインデックスされてしまうと思われる

Preview 環境には付与されるようです。

$ curl -I https://6b016155.peaceiris.pages.dev # Preview
#...
cf-cache-status: MISS
x-robots-tag: noindex
x-server: Cloudflare Pages
#...

$ curl -I https://peaceiris.pages.dev # Production
#...
cf-cache-status: MISS
x-server: Cloudflare Pages
#...

Nekoshita Yuki

@peaceirisさん

ご報告いただきありがとうございます！
再度試したみたのですが、やはり僕のプレビュー環境では x-robots-tag: noindex はないようです😢

$ curl -I https://d8995852.nextjs-blog-example.pages.dev/
HTTP/2 200 
date: Fri, 05 Mar 2021 02:15:16 GMT
content-type: text/html; charset=utf-8
set-cookie: __cfduid=ded4f99d44cf2c0aa5a4aa728d17d61f91614910516; expires=Sun, 04-Apr-21 02:15:16 GMT; path=/; domain=.nextjs-blog-example.pages.dev; HttpOnly; SameSite=Lax; Secure
cache-control: public, max-age=0, must-revalidate
etag: a7653f93a5a683f7df81252bb15a61cd
cf-cache-status: HIT
x-server: Cloudflare Pages
cf-request-id: 08a1c4043600000a5c60002000000001
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"group":"cf-nel","endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report?s=dFedC7cajJYuiraHa%2FVSM%2FF61iZC2%2Bp5dX2wihyeGfP02ZOq3j2EXmBM4H0mdr9K5GH%2BfXM%2FwKAWADM0B97wh7Xv%2FE1DMBH%2FYJFBuAKpAtOWnIjEi2HKx8vtEAw3mU3lUMbugVRvRQ%3D%3D"}],"max_age":604800}
nel: {"max_age":604800,"report_to":"cf-nel"}
server: cloudflare
cf-ray: 62afd5e6bbee0a5c-KIX

@peaceirisさんのプレビュー環境は僕の方でも確認しましたが、たしかに x-robots-tag: noindex が付与されおりました！

公式ドキュメントに記載を見つけられなかったのでたしかなことは分かりませんが、 x-robots-tag: noindex が付与される仕様であると嬉しいです！

peaceiris

まだ Beta なので今後に期待ですね 👍