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