uni memo

Tags uni's GitHub repo dashboard for blog analytics

サイトの構築をastroに移行

| 7 min read | engineering astro cloudflare typescript

この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したサイトが自動デプロイされるようになる

cloudflare-worker-pr-comment

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の設定タブからドメインとルートの項目よりカスタムドメインを追加する。画像は設定後の状態

cloudflare-worker-custom-domain

  • 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

cloudflare