bun.mdx

title	description	type	i18nReady
AstroでBunを使う	AstroサイトでのBunの使い方を紹介します。	recipe	true

BunはオールインワンのJavaScriptランタイム＆ツールキットです。詳しくはBunのドキュメントを参照してください。

:::caution Bunは最近、最初の安定リリースを公開しました。しかし、BunをAstroと一緒に使うと、荒削りな部分が見えてくるかもしれません。いくつかのインテグレーションは期待通りに動作しないかもしれません。詳しくはBunのAstroとの連携に関する公式ドキュメントを参照してください。

Bunを使用していて何か問題がある場合は、GitHubのBunのリポジトリに直接Issueを開いてください。 :::

前提条件

• あなたのマシンにローカルにBunがインストールされていること。Bunの公式ドキュメントのインストール手順を参照してください。

Bunで新しいAstroプロジェクトを作成する

以下のcreate-astroコマンドを使用して、Bunで新しいAstroプロジェクトを作成します。

bunx create-astro@latest my-astro-project-using-bun

:::tip また、--templateフラグを使用して、既存のAstro GitHubリポジトリから新しいAstroプロジェクトを作成することもできます。

bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal

:::

依存関係のインストール

bunx create-astroを使用して新しいプロジェクトを開始する場合、CLIは自動的にBunを使用して依存関係をインストールするので、この手順を省略することができます。

そうでない場合は、Bunで依存関係をインストールする必要があります。

bun install

型の追加

Bunは@types/bunパッケージを公開しており、Bunのランタイム型が含まれています。

以下のコマンドを使って@types/bunをインストールしてください。

bun add -d @types/bun

Astroインテグレーションを使う

Astro addコマンドにより、Astroの公式インテグレーションも使えます。

bunx astro add react

BunでAstroを実行する

:::note Nodeの代わりにBun独自のランタイムを使用するには、すべてのastroコマンドの前に--bun CLIフラグを指定します。 :::

開発サーバーの実行

Bunをランタイムとして開発サーバーを実行するには、以下のコマンドを使用します。

bunx --bun astro dev

Bunでサイトをビルドする

Bunをランタイムとして使用してサイトをビルドするには、次のコマンドを使用します。

bunx --bun astro build

Astroはあなたのサイトをdist/ディレクトリに出力します。その後、previewコマンドを使ってサイトを表示することができます。

bunx --bun astro preview

astrojs/nodeを使ってBunでSSRをおこなう

BunはNode.js APIとの互換性があります。astrojs/nodeアダプターを使用すると、BunのランタイムをNodeの代わりに使用して、サーバーサイドレンダリングをAstroプロジェクトに追加できます。

次のコマンドを実行して、Node.jsアダプターをAstroプロジェクトに追加します。

bunx astro add node

上記と同じビルドコマンドを使用して、サイトを再度ビルドします。

bunx --bun astro build

最後に、以下のコマンドを使ってビルドしたサイトを実行します。

bun ./dist/server/entry.mjs

公式リソース

• AstroとBunでアプリを作る

コミュニティー・リソース

AstroでBunを使っていますか？このページにブログ記事やビデオを追加してください！

• BunでCloudflare Pagesサイトを構築する - ブログ記事