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

:::note info

これは[Bun Advent Calendar 2023](https://qiita.com/advent-calendar/2023/bunjs)6日目の記事です

:::

## はじめに

こんにちは！ @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環境をお使いの方は下記のコマンドでインストールできます！

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

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

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

サブタイトルの通りですが、まずは`pnpm-lock.yaml`を削除し、パッケージマネージャーもbunにします。
```shell
bun i
```
すると`bun.lockb`というファイルが作成されるかと思います。
あとは`tsconfig.json`を下記のように編集すれば完了です！
```diff_json:tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+   "types": ["bun-types"]
+ }
}
```
開発用サーバーを起動してみて起動すればOKです！
```
bun --bun run dev
```
:::note info
`--bun`オプションについて詳しくは[こちら](https://bun.sh/docs/cli/run#bun)
:::

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

```diff_yaml: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
```

```diff_typescript: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へのランタイム移行が遅れてしまいました。。。)

https://developers.cloudflare.com/pages/platform/language-support-and-tools/#v2-build-system

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

v2にする手順ですが、まず`Workers & Pages` > `Overview` > {プロジェクトのタイトル} > `Settings` > `Builds & Deployments` > `Build system version`と移動し、画像の`Configure Production(Preview) build system`ボタンを押します。
![スクリーンショット 2023-12-03 11.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/217209ff-befe-3db8-0afb-6fc8c7732140.png)

次に、遷移先の画面で`Version 2`を選択すればOKです！
![スクリーンショット 2023-12-03 11.16.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/67edbc9b-7747-e805-b9e3-1406ff1a5876.png)

たったこれだけのことなのですが、自分はこれに気づかず苦労しました。。。(こういうのクラウドあるあるだと思ってます😇)

ここまで来ればあとはいつも通りデプロイするだけです。お疲れ様でした！

## 移行してみて

ビルド時間が11秒ほど速くなりました🎉

before
![スクリーンショット 2023-12-03 13.22.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/56ac33cc-1e6f-5a88-800b-f3b7ae4a4a9d.png)

after
![スクリーンショット 2023-12-03 13.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1091686/dd0e8543-4677-5c9b-5da7-d3ff68aa2592.png)

11秒と聞くとあまり差はないように感じますが、パーセントでいうと**25%減**になっており、アプリケーションサイズが大きかれば十分な差が出たのではないかと思います。


また、現状自分のブログはHybridモードを有効にはしているものの依然SSGを主体に使用しているため、動作におけるベンチマークの話は割愛します。

## 参考文献

https://bun.sh/

https://developers.cloudflare.com/pages/platform/language-support-and-tools/#v2-build-system