はじめに
今回はAstroを Pages にデプロイしてカスタムドメインを設定するところまでやってみようと思います。正直なところ筆者はバックエンドを主に扱ってきていたのでフロントエンドのことは全くと言っていいほどわかりません。流石に何も知らないのもまずいかと思い Cloudflare と Astro を題材に入門してみようと思います。
Astro is an all-in-one web framework for building fast, content-focused websites. By default, Astro builds websites that have zero JavaScript runtime code.
Astro は、高速でコンテンツ重視のウェブサイトを構築するためのオールインワンウェブフレームワークです。デフォルトでは、Astro は JavaScript の実行コードを一切含まないウェブサイトを構築します。
Cloudflare Pages のドキュメントには上記のようにありますが、Astro はもちろん JS を含めることもできます。今回 Astro でやってみようと思った理由としては State of JS 2024 のMeta-Frameworks Ratios Over Timeで 2 位まで上がってきていたのを見かけたので触ってみようかなと思ったからです。
筆者の環境
以下のものが必要になります。本題ではないので以下の導入については扱いません。
- MacBookPro
- Bun
v1.1.43 - Cloudflare アカウント
- カスタムドメインを設定する場合：
- Cloudflare で管理されているドメイン
プロジェクトの作成
まず、Cloudflare のテンプレートを使用して Astro プロジェクトを作成します。今回は筆者の好みで Bun を使用しますが Bun を使用していない場合はnpmでもpnpmでもyarnでもお好きなものをお使いください。
# プロジェクトの作成
bun create cloudflare@latest your-project-name --framework=astro
出力はこちら
上記のコマンドを実行した際のログを参考に記載しておきます。
bun create cloudflare@latest your-project-name --framework=astro
──────────────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.37.3!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.
Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
──────────────────────────────────────────────────────────────────────────────────────────────────────────
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./your-project-name
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Astro
│
├ Continue with Astro via `bunx create-astro@4.11.0 your-project-name --no-install`
│
astro Launch sequence initiated.
◼ dir Using your-project-name as project directory
tmpl How would you like to start your new project?
A basic, minimal starter
◼ No problem! Remember to install dependencies after setup.
git Initialize a new git repository?
Yes
✔ Project initialized!
■ Template copied
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./your-project-name
Run bun 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! 🚀
╰─────╯
├ Copying template files
│ files copied to project directory
│
├ Installing dependencies
│ installed via `bun install`
│
╰ Application created
╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `bun install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types
│ installed via bun
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-01-24
│
├ Installing adapter
│ installed via `bunx astro add cloudflare`
│
├ Updating configuration in astro.config.mjs
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Committing new files
│ git commit
│
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `bun run deploy`
│
╰ Done
────────────────────────────────────────────────────────────
🎉 SUCCESS Application created successfully!
💻 Continue Developing
Change directories: cd your-project-name
Start dev server: bun run dev
Deploy: bun run deploy
📖 Explore Documentation
https://developers.cloudflare.com/pages
🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose
💬 Join our Community
https://discord.cloudflare.com
────────────────────────────────────────────────────────────
この段階で以下のようなディレクトリ構成になっていると思います。
.
├── README.md
├── astro.config.mjs
├── bun.lockb
├── package.json
├── public
│ └── favicon.svg
├── src
│ ├── assets
│ ├── components
│ ├── env.d.ts
│ ├── layouts
│ └── pages
├── tsconfig.json
├── worker-configuration.d.ts
└── wrangler.json
Astro の設定ファイルを追加
さて、 @astrojs/cloudflare アダプターを使用して SSR サイトを Cloudflare Pages にデプロイすることが可能になりますが、create cloudflare@latest(C3コマンド)のテンプレートを使用した場合は Astro テンプレートに含まれているためここは飛ばして構いません。@astrojs/cloudflare アダプターの使用方法は Astoro 側のドキュメントに詳しく説明されています。
ローカルで動作確認
プロジェクトを作成したら、ローカルで動作確認をしましょう。以下のコマンドを実行するとhttp://localhost:8788でローカル環境が立ち上がりますのでお使いのブラウザからテンプレートが確認できるかみておきましょう。
# プロジェクトディレクトリに移動
cd your-project-name
# プレビュービルド
bun run preview
デプロイ
Cloudflare Pages へのデプロイは、以下の手順で行います：
-
GitHub リポジトリにプロジェクトをプッシュします。
-
Cloudflare ダッシュボードにログインし、コンピューティング(Workers) > Workers & Pages から作成ボタンを選択します。
-
「アプリケーションを作成する」の項目から Pages のタブに切り替えます。
- 「Git に接続」を押下して GitHub アカウントを連携し、デプロイするリポジトリを選択します。
-
ビルド設定を以下のように構成します：(ビルドツールによっては環境変数の設定が必要になることがあります。)
- フレームワーク プリセット: Astro
- ビルド コマンド:
npm run build - ビルド出力ディレクトリ:
dist
- 「保存してデプロイする」をクリックしてデプロイを開始します。
デプロイが完了すると、<project-name>.pages.devの URL でサイトにアクセスできます。
デプロイ後の確認
以下のリンクからデプロイが正常に完了したことを確認しておきましょう。
カスタムドメインの設定
簡単なのでカスタムドメインの設定まで行っておきましょう。前提にも記載しましたが、今回の方法は Cloudflare で管理されているドメインが必要です。
- Pages プロジェクトの「カスタム ドメイン」タブを開きます。
-
「カスタム ドメインを設定」をクリックします。
-
使用したいドメインを入力し、「続行」をクリックします。
- DNS レコードの設定方法が表示されます。設定したいドメインが間違いないことを確認して「ドメインをアクティブにする」をクリックしましょう。
- SSL/TLS の設定は自動的に行われ、HTTPS が有効化されます。検証中からアクティブになれば作業完了です。
デプロイを確認
自身で設定したカスタムドメインでアクセスしてみましょう。ドメインがアクティブになっていれば問題なくアクセス可能なはずですが最大 48 時間かかるのですぐにアクセスできない場合は時間を空けて確認してみてください。(筆者はかかったことがないですが…)
ハマったポイント
実は記事を書き始めた時に Astro と React を使ったサイトを Pages にデプロイしようしていました。今回は React まで盛り込まなくていいやと思ったのですが、見事にハマったことがあったので共有しておこうと思います。
Astro v5 + React19 の構成で Cloudflare Pages(Workers) にデプロイしようとすると@astrojs/cloudflare アダプターが対応していないのかビルドがうまくいかずエラーになります。調べてみると以下の issue が上がっていました。ビルド時に edge 用の React を参照するようにするとデプロイ出来るようになりました。将来的には解消されると思いますが、詰まった際のご参考までに共有しておこうと思います。
まとめ
今回は Cloudflare に Astro をデプロイしてカスタムドメインを設定するところまでをやってみました！やっていて Pages に触りたいモチベの方がだんだん勝ってしまって Astro にはほぼ触れずになってしまいましたがひとまずカスタムドメインで立ち上げるところまではできました。作業も簡単でスイスイとできるので触ってなかったものの Pages もやっぱり魅力的なサービスだなと再確認できました！少しづつにはなると思いますが、フロントも触ってみようと思います！Pages 触ったことないよ！って方はぜひやってみてください。
参考資料
Discussion