はじめに｜Reactアプリを公開すると世界が広がる
Reactの学習を進めて「動くアプリ」が手元で完成すると、次に思うのが…
「これ、誰かに見せたいな」ではないでしょうか？
僕自身、最初は「公開＝サーバーを借りて難しい設定をするもの」というイメージがありました。
でも実際にやってみると、Vercelというサービスを使えば数分で世界に公開できてしまいます。
この記事では、React入門シリーズの続きとして「自分で作ったアプリを公開するところ」まで一緒にやってみましょう！
Reactアプリ公開のための事前準備
公開する前に必要なものは2つだけです。
- GitHubアカウント（ソースコードを置く場所）
- Vercelアカウント（アプリを公開する場所）
どちらも無料で作れます。
僕は最初「登録が面倒そう」と思ったのですが、Googleアカウント連携で数分で完了しました。
0) 前提チェック（3分）
- Node.js が入っているか
- ターミナル/コマンドプロンプトで
node -vを実行 → 例:v18.x.xと出ればOK - もし「見つからない」と出たら、Node.js（推奨: 18 以上）を先に入れてください
- ターミナル/コマンドプロンプトで
- Git が入っているか
git --version→ 例:git version 2.xx.xと出ればOK
- エディタは VS Code 推奨（内蔵ターミナルが使えて便利）
▼ターミナルの開き方
- Windows: スタート →「PowerShell」または「Windows Terminal」
- macOS: Launchpad →「ターミナル」
- VS Code: メニュー「表示」→「ターミナル」 or
Ctrl +（バッククオート）
1) プロジェクトフォルダを開く
- ターミナルで、あなたのReactアプリのフォルダへ移動します
例：cd C:\Users\あなた\my-react-app - フォルダ直下に
package.jsonがあるのを確認
2) ローカルで動くか確認
- 開発用サーバー起動（Vite想定）
npm run dev - ターミナルに表示されたURLへアクセス（例：
http://localhost:5173）
→ 画面が動けばOK - 終了はターミナルで
Ctrl + C
3) 本番用ビルドが通るか確認
- エラーが無いかチェック
npm run build - 成功すれば、
dist/フォルダ（Viteの場合）ができます。
ここまで通れば公開準備OK！
4) GitHubリポジトリを作成
- GitHubにログイン → 「New」から空のリポジトリ作成（例：
my-react-github-repository-app） - リポジトリURL を控える（例：
https://github.com/ユーザー名/my-react-github-repository-app.git）
5) Gitで初回コミット＆push
ターミナルでプロジェクト直下から、次を上から順番に実行します
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin mainすると、gitにローカルのファイルたちが反映されているはずです！！
ReactアプリをVercelにデプロイする方法
1) Vercelにサインイン＆GitHub連携
- Vercel（vercel.com）にログイン
- ダッシュボードで 「New Project」 をクリック
- 「Import Git Repository」 で、さきほどのリポジトリ（
my-react-app）を選ぶ- 初回は 「Add GitHub Account」 の許可が必要です（画面の指示に従ってOK）
2) プロジェクト設定（基本は自動でOK）
Vercel は フレームワークを自動検出 します（Vite/Reactなど）。
次の項目が見えたら、基本は触らずOKです：
- Framework Preset:
Vite（またはReactと表示されることも） - Build Command:
npm run build - Output Directory:
dist（Viteの場合の出力先） - Install Command:
npm install
モノレポ（複数プロジェクト）やサブディレクトリの場合は 「Root Directory」 を正しく指定してください。
例：apps/web など。
3) 環境変数が必要な場合
- APIキーなどを使う場合、ソースに直書きしない
- Vercelの Project → Settings → Environment Variables で追加
- 例（Viteの場合）：
VITE_API_URL/VITE_OPENAI_API_KEY
- 例（Viteの場合）：
- 追加後は 「Save」→「Redeploy」 で反映
Viteは VITE_ で始まるキーだけ フロントから参照可能です。
ここが超ハマりポイント。
4) 「Deploy」を押す → 数十秒待つ → 公開URL発行！
ビルドが通ると 「Congratulations!」 と表示されます！
上記画像赤枠の部分を押下して、さっそく公開されたURLをのぞいてみましょう！
感激…!!
以後は GitHubにpushするたびに自動デプロイ。main にマージされたら本番、PRブランチはプレビューURLが自動発行されます（めちゃ便利）。
ReactアプリをVercelで公開するときの注意点
環境変数の扱い（超重要）
APIキーなどはそのままpushすると危険です。
僕も最初 .env ファイルにOpenAI APIキーを入れたままGitHubにpushしてしまい、GitHubから「シークレットが含まれているのでブロックしました」と怒られました…。
その瞬間は「え、なにそれ？」と。。
結局APIキーを再発行するハメになりました。
安全に扱うには
.envは.gitignoreに必ず追加- Vercelの「Project Settings → Environment Variables」に設定する
- コード内では
import.meta.env.VITE_...の形式で呼び出す
これを覚えておくだけで、秘密情報が漏れるリスクをぐっと減らせます！
まとめ｜Reactアプリを数分で公開できる！
この記事では、ReactアプリをVercelで公開する手順を紹介しました。
- GitHubにコードをpush
- VercelでNew Projectを作成
- Deployを押すだけで公開完了
難しいことを考えなくても、数分で「世界に向けてアプリを公開」できるのは本当に感動的です。
Reactの学習で「作って動かす」から「公開して共有する」まで体験できると、一気にモチベーションが上がりますよ！
次はカスタムドメインを設定したり、より複雑なアプリを公開してみるのもおすすめです！
自分の場合は以前【30分でできるアプリ】GraphQL × TypeScript × React入門｜作って学ぶAPI連携（コード完全解説付き）で作成したGithubのリポジトリ一覧を表示させるアプリを公開しようと思います！