Cloudflare Pagesで動作するAstro製ブログのランタイムをbunに移行した話 #JavaScript

これはBun Advent Calendar 20236日目の記事です

はじめに

こんにちは！ @Yu_yukk_Y です！
先日Astroで作成した自身のブログのランタイムをbunに移行したのですが、実はそれまでの数ヶ月間Cloudflareでbunを使う方法がわからずにめっちゃ困っていました。。。
そこで、おそらく同じ悩みを抱えている人は自分の他にもいるだろうと思い、この機会に備忘録がてら記事にしてみることにしました！

記事の最後に移行後のビルド時間の比較も載せてあります！

元々の環境

パッケージマネージャー: pnpm
フレームワーク: Astro v2.10.15(HybridモードでCloudflare Adapterを使って動作させています)
Cloudflare Build System: v1
ランタイム: node v20.2.0

Cloudflare PagesとGithubを連携し、mainとdevelopブランチが更新されるとそれぞれ本番環境と検証環境に自動でデプロイされるようになっています。

手順

bunをインストールする

まだbunをインストールしていないなら、まずはインストールしましょう！MacOS、Linux、WSL環境をお使いの方は下記のコマンドでインストールできます！

curl -fsSL https://bun.sh/install | bash

bun -vと打ってバージョンが表示されたらインストール成功です！

% bun -v  
1.0.14

`pnpm-lock.yaml`を削除しローカル・CI環境(Github Actions)をbunに移行する

サブタイトルの通りですが、まずはpnpm-lock.yamlを削除し、パッケージマネージャーもbunにします。

bun i

するとbun.lockbというファイルが作成されるかと思います。
あとはtsconfig.jsonを下記のように編集すれば完了です！

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+   "types": ["bun-types"]
+ }
}

開発用サーバーを起動してみて起動すればOKです！

bun --bun run dev

--bunオプションについて詳しくはこちら

CI環境がある場合はそちらも更新しましょう！自分の場合はGithub Actionsを使ってPlaywrightを実行しているので、こちらもpnpmからbunへ移行します。

playwright.yml

name: Playwright Tests
on:
  pull_request:
    branches: [main, develop]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
-     - uses: pnpm/action-setup@v2
-       with:
-         version: latest
-     - uses: actions/setup-node@v3
-       with:
-         node-version: 20
-         cache: 'pnpm'
+     - uses: oven-sh/setup-bun@v1
+       with:
+         version: 1.0.14
      - name: Install dependencies
-       run: pnpm install --frozen-lockfile
+       run: bun i --no-save
      - name: Install Playwright Browsers
-       run: npx playwright install --with-deps
+       run: bunx playwright install --with-deps
      - name: Run Playwright tests
-       run: npx playwright test
+       run: bunx playwright test
        env:
          MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
          MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }}
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

playwright.config.ts

webServer: {
- command: "pnpm start",
+ command: "bun --bun run start",
  url: "http://localhost:3000/",
  reuseExistingServer: !process.env.CI,
},

Cloudflare Build Systemをv1からv2に移行する

2023年5月に有効になったCloudflare Build System v2を有効にすることでCloudflare上でbunが使用可能になります(自分はこれを知らなかったため、数ヶ月bunへのランタイム移行が遅れてしまいました。。。)

v2に移行することで、環境変数から使用するbunのバージョンを指定できるようになります。

v2にする手順ですが、まずWorkers & Pages > Overview > {プロジェクトのタイトル} > Settings > Builds & Deployments > Build system versionと移動し、画像のConfigure Production(Preview) build systemボタンを押します。