めも: Docusaurus x Cloudflare Pages やってみた

project setup

とりあえずこれに沿ってやってみる

npm create cloudflare@latest my-docusaurus-app -- --framework=docusaurus

ドキュメントの通りにやればそのままいけるんだけど、注意ポイントが自分的には2個あった

(1) nodenv 使ってるなら system の node version を確認してから実行する (まあこれはこのプロジェクトに限らないけど)

(2) Do you want to deploy your application? に Yes で回答すると、今の環境の wrangler の設定でデプロイされる

複数アカウントで Cloudflare を運用している場合は注意かも

password protection

Cloudflare Access でできる。というか、Cloudflare Pages の画面 > 自分の Pages プロジェクト > Settings タブ > Access Policy で、許可とか拒否ルールが設定できる。やりたかった access control は Google Drive みたいにメアドベースで許可したいというシンプルなものだったのでこれでよかった。

Vercel とか Netlify にも password protection 機能があるらしいんだけど、少なくとも Vercel は Pro プラン以上が必要ぽかった。Cloudflare Access は 50 users まではタダなのでうれしい。

あとは Cloudflare Workers でも password protection が実装できたり、Octauthent っていう別のサービスもあるらしい

Cloudflare community のスレ

https://community.cloudflare.com/t/password-protect-access-to-websites/136361

Octauthent

with Cloudflare Workers

Cloudflare Access について追記 (2024-01-29)

実際に触ってみたら、そのまま設定すると preview deployments (*.<your-project>.pages.dev) だけが protect されて、production (<your-project>.pages.dev) はアクセス制限がかからない。ググると皆さんの記事が色々出てくるけど、自分はとりあえず Cloudflare Access からサブドメなしの Domain を追加したらできた

あと、メールが届くのにちょっと時間がかかる (4-5分くらいかかる気がする)