Cloudflare Pagesで限定公開のドキュメントサイトを作る

こんにちは、今回特定のメンバーにのみ公開するドキュメントサイトを作る必要があり、アプリで認証基盤とか作るのめんどくさいなとか思っていたら、Cloudflareを使って簡単にできることがわかったので、備忘録も兼ねてまとめます。

Cloudflare Pagesとは

もうご存知のかたも多いと思いますが、Cloudflare PagesはCloudflareが提供する静的サイトホスティングサービスです。GitHub PagesやNetlifyと同じようなものですが、Cloudflareのキャッシュ機能やセキュリティ機能を使うことができるのが特徴です。

Cloudflareは無料でとにかくたくさんの機能を使わせてくれるので個人的な勉強で色々やってみるのにとても助かっています。

今回作るドキュメントサイトについて

今回ドキュメントを作るために、Astroを使用します。

また、Astroでドキュメントサイトをつくるには、Astroが提供するテーマであるStarlightを使用することで、ドキュメント作成に必要な機能が揃ったテンプレートを簡単に利用することができます。

Starlightを使ってサイトを立ち上げる

まずは以下のコマンドで、Starlightテンプレートを使ってAstroプロジェクトを作成します。

npm create astro@latest -- --template starlight

色々聞かれますがまぁいい感じに答えます。

$ npm create astro@latest -- --template starlight
Need to install the following packages:
create-astro@4.7.5
Ok to proceed? (y) y

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./member-document
      ◼  tmpl Using starlight as project template

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./member-document
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

これで npm run dev でローカルでサイトが立ち上がるはずです。

Cloudflare Pagesにデプロイする

まずは先ほど作成したAstroプロジェクトをGitHubにプッシュします。

テキトーにリポジトリを作って、リモートリポジトリを追加してプッシュします。
このリポジトリはプライベートでもパブリックでもなんでもいいです。

ここまで完了したら次にCloudflare Pagesにデプロイします。

今回はwranglerを使ってデプロイします。

まずはAstroサイトをビルドします。

npm run build

ビルドが完了したら、dist ディレクトリにビルドされたファイルが出力されているので、それをデプロイします。

途中でプロジェクト名や本番環境のブランチ名を聞かれるので適宜入力をお願いします。

$ wrangler pages deploy dist
No project selected. Would you like to create one or use an existing project?
❯ Create a new project
  Use an existing project
✔ Enter the name of your new project: … member-document
✔ Enter the production branch name: … main
✨ Successfully created the 'member-document' project.
🌍  Uploading... (27/27)

✨ Success! Uploaded 27 files (5.66 sec)

✨ Deployment complete! Take a peek over at https://b06c42c2.member-document.pages.dev

これで先程入力したプロジェクト名を含めたURLにアクセスすると、デプロイされたAstroサイトが表示されるはずです。

今回はhttps://member-document.pages.dev にデプロイされました。

Cloudflare Zero Trustで制限をかける

Pagesのコンソールへアクセスし、管理 → アクセスポリシー を確認してみると、ここからプレビュー環境についてはアクセス制限をかけることができます。

しかし今回は本番環境についてアクセス制限をかけていきたいので、次の手順で設定をします。

Zero Trustの設定

Zero Trustが有効になっていない場合は、初期設定が入ります。

開くとこのような画面になります。

ここで左カラムの Access → Applications をクリックします。

初回アクセス時はZero Trustのプランを選ぶ画面が出てきますので、 Choose Plan をクリックして Free を選択します。

支払い情報の入力をしてプランの設定が完了したあと、 Applications 画面に戻ります。

アプリケーションの作成

すると今度はアプリケーションの作成ができるようになっているので、 Add an application をクリックします。

次に Self-hosted を選択します。

Application nameはお好みで、, Domainは先程デプロイしたpages.devのドメインを入力します。

その他の部分はデフォルトのままで、お好みで設定変更をしてください。
完了したらNextで次の画面へ進みます。

その次にポリシーの設定をします。

今回は許可されたメンバーのみアクセスできるようにするという場合の設定をします。

基本的にはこの画像通りでOKです。

次ページの設定はお好みで設定してください。

これでアプリケーションの設定は完了です。

動作確認

シークレットモード等で先程のpagesのURLにアクセスしてみると、アクセス制限がかかっていることが確認できます。

あとはメールアドレスを入力して、届いたOTPを入力すればアクセスできるようになります。

まとめ

今回はOTPでの認証を使っていますが、実際にはGoogleアカウントを用いた認証をしてメールアドレスのホワイトリストを作って認証しています。

Cloudflare PagesとZero Trustを使うことで、簡単に限定公開のドキュメントサイトを作ることができました。

何より驚きなのはこれがすべて無料でできていることで、個人的にはとても助かっています。

無料でできることが増えると、個人開発者や小規模なチームにとってはとてもありがたいです。

ぜひ試してみてください。