12
5

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

Last updated at Posted at 2023-12-05

これは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ボタンを押します。
スクリーンショット 2023-12-03 11.16.26.png

次に、遷移先の画面でVersion 2を選択すればOKです!
スクリーンショット 2023-12-03 11.16.37.png

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

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

移行してみて

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

before
スクリーンショット 2023-12-03 13.22.21.png

after
スクリーンショット 2023-12-03 13.22.44.png

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

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

参考文献

12
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
5