こんにちは、かつコーチです。
前回はテスト編の締めくくりとして、Playwrightを使ったE2Eテストを解説しました。
ここからはデプロイ編に入り、実際に作ったReactアプリを世の中に公開する方法を学んでいきます。
初回の今回は、Vercelというサービスを使って、数クリックでReactアプリを公開する手順を解説します。
デプロイとは？公開の前に知っておきたいこと
「デプロイ」の意味
デプロイとは、自分のパソコンの中だけで動いていたアプリを、インターネット上の誰でもアクセスできるサーバーに置くことを指します。
npm run devで動く開発用の画面は、あくまで自分のパソコンの中だけで見られるものです。
デプロイして初めて、URLを知っている人なら誰でもアプリにアクセスできるようになります。
なぜVercelが選ばれやすいのか
Reactアプリのデプロイ先には、Netlify・AWS・GitHub Pagesなど複数の選択肢があります。
その中でもVercelは、Next.jsの開発元が運営していることもあり、GitHubと連携するだけで設定不要に近い形でデプロイできる手軽さが特徴です。
個人開発や学習用のプロジェクトであれば無料プランでも十分実用的なので、最初の1つとしておすすめしています。
Vercelにデプロイする手順
手順1：GitHubにリポジトリをプッシュする
Vercelはビルドの元になるコードを、基本的にGitHubなどのリポジトリから取得します。
まだGitHubにコードを置いていない場合は、先にリポジトリを作成してプッシュしておきましょう。
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-name/your-app.git
git push -u origin main
手順2：Vercelにサインアップし、プロジェクトをインポートする
vercel.comにアクセスし、GitHubアカウントでサインアップします。
ダッシュボードの「Add New…」→「Project」から、先ほどプッシュしたリポジトリを選択します。
Viteで作成したReactプロジェクトであれば、多くの場合Vercelが自動でビルド設定を検出してくれます。
- Framework Preset：
Vite - Build Command：
npm run build - Output Directory：
dist
このあたりの項目が自動入力されていれば、変更せずそのまま「Deploy」ボタンを押して問題ありません。
手順3：デプロイ完了とURLの確認
「Deploy」ボタンを押すと、Vercel側でビルドが実行され、数十秒〜数分程度で公開が完了します。
完了するとhttps://your-app.vercel.appのようなURLが発行され、そのままアクセスすればアプリが表示されます。
以降はmainブランチにプッシュするだけで、自動的に再ビルド・再デプロイされる仕組みが最初から組み込まれています。
つまずきやすいポイント：ビルド設定のミス
かつコーチが実際にハマった「404エラー」
私が初めてVercelにデプロイしたとき、トップページは表示されるのに、ページをリロードしたりURLを直接入力したりすると404が表示される、という現象に遭遇しました。
原因は、React Router（クライアントサイドルーティング）を使ったSPA（Single Page Application）向けの設定を、Vercel側に伝えられていなかったことでした。
❌ Before：SPA向けのリライト設定を用意していない
// vite.config.tsだけ用意して、Vercel側の設定ファイルを何も置いていない状態
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});
このままだと、Vercelは/users/1のようなパスへの直接アクセスを「そんなファイルはありません」と判断し、404ページを返してしまいます。
トップページからボタンをクリックして遷移する分には問題なく動くため、開発中は気づきにくいのも厄介なポイントでした。
✅ After：vercel.jsonですべてのパスをindex.htmlに向ける
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
プロジェクト直下にvercel.jsonをこの内容で追加し、再度プッシュすると、どのパスへ直接アクセスしてもindex.htmlが返されるようになります。
index.htmlが読み込まれた後は、React Router側がURLを見て適切なコンポーネントを表示してくれるため、404が解消されます。
SPAをデプロイするときは、サーバー側の設定でも「すべてのパスをindex.htmlに流す」設定が必要になる、という点は覚えておいて損はありません。
環境変数とプレビュー環境
環境変数の設定場所
APIキーなど、コードに直接書きたくない値は、Vercelダッシュボードの「Settings」→「Environment Variables」から設定できます。
const apiUrl = import.meta.env.VITE_API_BASE_URL;
Viteプロジェクトの場合、VITE_から始まる名前の変数だけがフロントエンドのコードから参照できる、というルールがあります。
このあたりの詳しい設定方法は、次回の記事でさらに掘り下げます。
プルリクエストごとのプレビューURL
Vercelの便利な機能の1つが、プレビューデプロイです。
mainブランチ以外にプッシュしたりプルリクエストを作成したりすると、そのブランチ専用の確認用URLが自動生成されます。
本番環境にマージする前に、実際に動く状態でレビューできるので、チーム開発では特に重宝する機能です。
まとめ
この記事のポイント
- デプロイとは、ローカルで動くアプリを誰でもアクセスできる状態にすること
- VercelはGitHub連携だけで設定不要に近い形でデプロイできるサービス
- React RouterなどSPAを使う場合は、
vercel.jsonでリライト設定をしないと直接アクセス時に404になる - 環境変数はVercelダッシュボードから設定し、コードには直接書かない
- プルリクエストごとにプレビューURLが発行され、本番反映前の確認に使える
次に読むべき記事
次回は、開発環境・本番環境で値を切り替える「環境変数管理」をもう一歩掘り下げて解説します。
→ 次の記事：環境ごとの環境変数管理（.env）