このblogをastroで構築するようにした。いままで使っていたgatsbyjsは、remarkの作成やデータの加工に逐一graphqlで定義するのが少し面倒になったのと、buildがだんだん遅くなってきたので移行することにした
タグページの作成などコード周りの生成はほぼAIにタスク渡したので、ほとんどcloudflare周りの設定メモになってしまった
astro projectの初期設定
チュートリアルのとおりにやったので割愛
https://docs.astro.build/ja/tutorial/0-introduction/
既存のmarkdownで作った記事ページは多少frontmatterのkey名を変えたのみでcontentフォルダごと移動するだけで動いたので楽でよかった。また、react componentも使い回せるのでいくつかの機能をそのまま持ってこれた
cloudflare workerのデプロイ設定
pagesのprojectを開くと以下のようなinfoが表示される
Cloudflare Workersは現在、Pages のほぼすべての機能に加え、Pages にはない追加のツールと統合をサポートしています。 Workers に今すぐ移行する方法については、移行ガイドと互換性マトリックスをご覧ください。
移行というか、workerで新規作成することでpagesと同じようにプレビューやデプロイができた
リポジトリにconfig追加設定
astroのドキュメントにconfigなどの設定方法が書いてあるので設定しておく
このブログは静的サイトなので@astrojs/cloudflareのinstallは行わない
wrangler.jsoncの作成、dashboardから設定もできるが念の為 まんまコピペした
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "my-astro-app",
// Update to today's date
"compatibility_date": "2025-03-25",
"assets": {
"directory": "./dist"
}
}
localにてbuildし、サイトのpreviewを立ち上げる astro previewコマンドでも変わらない気がする
npm i -D wrangler@latest
npx astro build && npx wrangler dev
deployも簡単。cloudflareにloginなどする必要がある
npx wrangler deploy
cloudflareのプロジェクト設定
cloudflare dashboardより コンピューティング(Workers)のWorker & Pagesをクリック
作成ボタンをクリックし、workerを選択し、リポジトリをインポートする、からすすめていく
ブランチは試しにwrangerの設定を追加したfeatureブランチを選択（あとで設定で変更できるので試す用に選択） PR上にbuild状況についてコメントもしてくれる。pagesみたいにpreview URLをだしてくれたりはしなかった これでリポジトリにpushするたびにbuildしたサイトが自動デプロイされるようになる
preview urlはprojectページのデプロイタブ、Version HistoryからバージョンIDをクリックするとアクセスできる
gihtub actionsなどでCI/CDの設定もできるが、リポジトリ連携するほうが簡単
public/.assetsignore
https://docs.astro.build/en/guides/deploy/cloudflare/#cloudflare-workers
https://developers.cloudflare.com/workers/ci-cd/external-cicd/github-actions/#github-actions
DNS設定
cloudflareのDNS設定を更新する
- 既存の設定削除
cloudflareのドメインページよりDNS->レコード
DNS 管理の項目より、blogサブドメインに設定していたDNSレコード
CNAMEを削除 - 新しいprojectのほうにDNSレコードの設定 projectの設定タブからドメインとルートの項目よりカスタムドメインを追加する。画像は設定後の状態
- DNSキャッシュの削除 旧サイトのキャッシュが残っている場合があるので、キャッシュを削除しておく cloudflareのドメインページよりcaching->構成 キャッシュをパージ、からすべてのキャッシュをパージする。特定ドメインを指定して削除もできるが、めんどうなので全部削除しておく
sitemapの設定
tagページはindexingしたくないのでsitemapに登録しないようにする
// astro.config.ts
export default defineConfig({
...
integrations: [
mdx(),
sitemap({
filter: (page) => !page.includes("404") && !page.includes("/tags/"),
i18n: { defaultLocale: "ja", locales: { ja: "ja", en: "en-US" } },
}),
...
cloudflare worker apiの設定
https://blog.uni-3.app/gatsbyjs-gemini-search の記事で作成した
検索機能はworkerにはfunctions機能ないので、apiとして別途projectを作成した
secret登録
適当なフォルダでnpx wrangler initなどとしてwranglerのプロジェクトをローカルにつくる
workerを作成してない場合はworker作ってくれる
npx wrangler secret put GEMINI_API_KEY
✔ Enter a secret value: … ***********
🌀 Creating the secret for the Worker "my-api" k
✔ There doesn't seem to be a Worker called "my-api". Do you want to create a new Worker with that name and add secrets to it? … yes
🌀 Creating new Worker "search-api"...
- deploy
wrangler deploy
⛅️ wrangler 4.18.0
───────────────────
Total Upload: 241.24 KiB / gzip: 32.66 KiB
Uploaded search-api (2.87 sec)
Deployed search-api triggers (0.71 sec)
<https://my-api>.{SUBDOMAIN}.workers.dev
Current Version ID: c727d427-13ff-485a-9c41-00997a23885f
適当にechoエンドポイントをつくってやって、curlでリクエストするなどして確認できる
export default {
async fetch(request: Request, env: any): Promise<Response> {
const url = new URL(request.url);
const pathname = url.pathname;
switch (pathname) {
case "/echo": {
let body = "";
try {
body = await request.text();
} catch {}
return new Response(
JSON.stringify({
method: request.method,
url: request.url,
headers: Object.fromEntries(request.headers.entries()),
body,
})
);
}
default:
return new Response("Not found", {
status: 404,
});
}
},
};curl -X GET https://my-api.{SUBDOMAIN}.workers.dev/echoなにやら環境をわけたいときはwrangler deploy --env devなどとして別プロジェクト（ドメイン）にデプロイすることでわける構成にするといいみたい
参考
astro
- https://docs.astro.build/ja/guides/integrations-guide/sitemap/
- https://docs.astro.build/ja/recipes/reading-time/
cloudflare