React + Bun + Viteで構築したアプリケーションをVercelへデプロイ

2024 2/27

2024年2月26日 2024年2月27日

この記事では、Bunを使用してReactアプリケーションを構築し、Vercelにデプロイするプロセスを詳しく説明します。Bunの高速なパフォーマンスとVercelの容易なデプロイ機能を組み合わせることで、開発からデプロイまでの流れをスムーズに行うことが可能です。また、デプロイするだけではありますが、よくあるパターンであるTypeScriptとViteをベースにReactを構築していきます。

【得られること】
Bunを使ってReactを構築する方法について
Vercelへのデプロイ方法について

Bunについて

Bunは、JavaScript、TypeScriptのための新世代ランタイムおよびパッケージマネージャーです。2023年9月に安定版（v1.0.0）がリリースされました。

2023 JavaScript Rising Starsにおいても2位にランクイン

JavaScriptとTypeScriptプロジェクトの開発、テスト、実行、バンドルはすべてBunで対応可能。Bunは、バンドル、テストランナー、Node.js互換のパッケージマネージャを備えた、スピードを追求したオールインワンのJavaScriptランタイム＆ツールキットです。
https://bun.sh

Bunは特に、開発効率と実行速度を重視する開発者に向けて設計されており、Node.jsに代わるランタイムとして開発されています。Bunを使用することで、プロジェクトのセットアップからデプロイメントまでの全工程がスムーズになり、開発サイクルを短縮できるため、多くの開発者にとって新たな選択肢となっています。

主な特長は以下の通りです。

インストールから実行まで、非常に高速なパフォーマンスを提供。BunがRust言語で書かれ、最適化された実行エンジンを持っている
GitHubリポジトリとシームレスに連携し、簡単に依存関係の管理やプロジェクトのセットアップが可能
JavaScriptやTypeScriptのコードを即座にコンパイルし、自動的に依存関係を解決。これにより、開発プロセスが大幅に効率化
TypeScriptにもデフォルトで対応

その他、詳しい情報は公式Docを参照

Vercelについて

Vercelは、Next.jsの開発元であるVercel社が提供するフロントエンド専用のクラウドサービスです。
主な特徴は以下の通りです。

GitHubリポジトリを繋げるだけで、特別な設定なしにすぐに使えるデプロイ環境を用意可能
プルリクエストごとに自動的にプレビュー環境が作成される機能
JavaScriptやCSSなどのファイルを自動圧縮し、CDNを通じて高速に配信する仕組み

特に、VercelはNext.jsの最適なホスティング環境を目指して設計されているため、Next.jsのプロジェクトにおいて他に特別な要件がなければ、Vercelをホスティングサービスとして選択することがデファクトスタンダードとなっている。

Viteについて

Viteは、Vue.js の作者 Evan You 氏が中心となり開発されているフロントエンドのビルドツールで、以下のような特徴があります。と呼びます

即時起動: Viteは開発モードでの即時サーバー起動を実現し、ファイルの変更があった場合の即座のホットモジュールリプレースメント（HMR）を提供。これは、ESモジュールを直接ブラウザで利用することで達成されている
効率的なビルド: プロダクションビルドには、Rollupを基にした最適化が施されており、結果として生成されるアセットは非常に効率的
幅広い互換性: ViteはVue、React、Svelte、Preactなど、さまざまなフレームワークやライブラリとの統合をサポート。これにより、開発者は好みのツールを自由に選択してプロジェクトを開始可能

Viteの設計哲学は、開発体験を第一に考えることです。これにより、開発者はビルドの遅延を気にすることなく、より開発作業に集中できます。また、プラグインシステムにより、開発者は自分のニーズに合わせてViteを拡張することが可能。これまでビルドツールはWebpackが中心でしたが、新たな選択肢として登場し、その高速ビルドが注目されています。

実装の流れ

STEP

Bunのインストール

コマンド一つでBunをインストール

STEP

Reactアプリケーションの構築

BunコマンドにてTypeScriptとViteをベースにしたReact環境を構築

STEP

Vercelへデプロイ

Githubと連携するだけで手軽にデプロイ

開発環境

Bun：v1.0.29
React：v18.2.0
TypeScript：v5.2.2
Vite：v5.1.4
OS：MacOS Ventura

構築手順

Bunのインストール

公式Docの通りにインストールを実施します。

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

# 一度ターミナルを再起動

$ bun --version
1.0.29

他にもbrewコマンドやnpmコマンドなどでインストールが可能

# brewコマンドの場合
$ brew install oven-sh/bun/bun

# npmコマンドの場合
$ npm install -g bun

ターミナルを再起動しないとBunコマンドが有効になっていない場合があるため注意

bun createコマンドでReactアプリケーションの構築

bun initでコツコツと構築する方法もあるようですが、bun createコマンドでエコシステムを対象にテンプレートを使用できるため、今回は楽に構築していきます。

https://bun.sh/guides/ecosystem/vite

下記コマンドを実行し、React → TypeScript + SWCを選択していけばOKです。

$ bun create vite bun-sample-app    
                                                                                                                                             20:25:19
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
    Remix ↗

SWC：JavaScript/TypeScriptのトランスパイラーおよびバンドラーで、高速なコンパイルを実現する。Vite内でオプショナルなトランスパイラーとして使用することができ、特にTypeScriptのコンパイルやJSXのトランスパイル、コードの最適化などを高速化する

Next.jsを構築&デプロイする場合でもほとんど手順は一緒ですが、createの部分のみが違います。
詳しくは公式Docを参照

パッケージのインストール

続いてbunコマンドを使ってパッケージをインストールしていきます。
今回は比較まではしていませんが、npmやyarnよりもインストールが高速化するそうです。

$ cd bun-sample-app

$ bun install

インストールが完了すると、npmやyarnの時と同様にプロジェクト直下にnode_modulesが作成されます。

ローカル環境でのプレビュー

package.jsonのscriptsにすでに定義されているbun run devでローカル上にサーバーを構築します。
※ 内部では、viteコマンドにて起動しています

$ bun run dev

  VITE v5.1.4  ready in 209 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

bun --bun viteでbun上でviteコマンドを実行した方が速いとの情報もありましたが、あまり変わらなかったためデフォルトのままにしています。

GithubへPush

ここまでのソースコードをGithubへPushしていきます。
具体的なやり方はここでは割愛しますが、リモートリポジトリにPushまでできたら完了です。

Vercelへデプロイ

一通りローカル環境でReactアプリケーションの構築が確認できたら、いよいよVercelへデプロイしていきます。

大まかな流れとしては以下です。

Vercelにアカウント登録（必要であれば）
Githubのリポジトリと連携
Configの設定
デプロイの実施

Vercelにアカウント登録

※ すでに登録済みであれば次以降の作業から実施

Vercelの公式サイトへアクセスし、「Sign Up」からGithubアカウントと紐付ける
※ 画面に従っていけば登録できるはずです

Githubとの連携

ホーム画面へ遷移すると、Githubとの連携ができる「install」ボタンがあるため押下
「Only select repositories」から対象のリポジトリを検索し、installを実施

Vercelへデプロイ

再びホーム画面へ遷移するため、「import」を押下してデプロイするための設定を行うが、
デフォルトのままでOKです。

VercelがBunをサポートとしているため、bunコマンドが正常に動作する
仕組みとしては、bun.lockbファイルがあれば自動的にbun installがデフォルトコマンドとして設定される

デプロイ時のログを見ると、確かにbun installとbun run buildがvercel側で実行されていることを確認できました。

Running build in Washington, D.C., USA (East) – iad1
Cloning github.com/gorida/bun-sample-app (Branch: fix-title, Commit: 015f123)
Skipping build cache, deployment was triggered without cache.
Cloning completed: 743.186ms
Running "vercel build"
Vercel CLI 33.5.2
Installing dependencies...
bun install v1.0.28 (70563847)
 + @types/react@18.2.58
 + @types/react-dom@18.2.19
....
略
....
 159 packages installed [1.53s]
Running "bun run build"
$ tsc && vite build
vite v5.1.4 building for production...
transforming...
✓ 34 modules transformed.

明示的にコマンドを記載したい場合は、以下のように上書きしてください。
「Configure Project」にて、「Build and Output Settings」を開く
「Install Command」の「OVERRIDE」をONにして、bun installを入力する