誰でもできる！ReactアプリをVercelにデプロイしてURLで公開する方法

自分で作ったReactアプリを、友達や誰かに見てもらいたい。そんなときに便利なのが「Vercel（ヴァーセル）」です。この記事では、専門用語をできるだけ使わず、初心者でもわかるように「アプリをURLで公開する手順」を丁寧に説明します。

---

✅ この記事でできること

• 自分のReactアプリを「URL」で見られるようにする
• 無料のサービス「Vercel」にアップロードする
• 更新するたびにURLが自動で最新になるようにする

---

1. 事前に用意するもの

必要なもの	内容
GitHubアカウント	ソースコードをアップする場所（無料で作れます）
Vercelアカウント	アプリを公開する場所（GitHub連携が簡単）
Reactアプリ	すでに作ってある状態でOK（例：Viteで作成したもの）

---

2. GitHubにアップロードする

すでにローカル（自分のパソコン）にあるアプリのフォルダをGitHubにアップロードします。

手順（VS CodeまたはCursorを使用）

1. ターミナルで以下のコマンドを順番に実行：

cd プロジェクトのフォルダ名

git init
git add .
git commit -m "初回コミット"
git branch -M main
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main

※ GitHub上でリポジトリを先に作っておく必要があります。

---

3. Vercelで新しいプロジェクトを作成する

手順

1. https://vercel.com にアクセスし、GitHubアカウントでログインします。
2. 「New Project（新しいプロジェクト）」をクリック
3. GitHubにアップしたプロジェクトを選ぶ
4. 設定画面で以下のように入力：
   • Framework Preset（フレームワークの種類） → “Other”
   • Build Command（ビルドのコマンド） → npm run build:web
   • Output Directory（出力先フォルダ） → dist
5. 「Deploy（デプロイ）」を押す

---

4. 公開URLを確認する

デプロイが完了すると、https://プロジェクト名.vercel.app のようなURLが表示されます。

このURLをコピーして、友達に送ればすぐに見てもらえます！

---

5. 更新したいときは？

コードを更新したら、以下を実行するだけです：

git add .
git commit -m "修正内容"
git push origin main

これでVercelが自動で再デプロイ（再公開）してくれます。

---

よくある質問

Q. 「dist」フォルダはGitに入れなくていいの？

→ はい、大丈夫です。Vercelが自動でビルドして「dist」を作るので、アップする必要はありません。

Q. Expoで作ったアプリも同じ？

→ Expoの場合はちょっと手順が変わるので、別記事にまとめます。

---

まとめ

• Vercelを使えば、Reactアプリを簡単にURLで公開できます
• GitHubと連携すれば、更新もスムーズです
• 「npm run build:web」→「dist」フォルダ出力が基本

難しそうに感じるかもしれませんが、1度やってみると「意外とカンタン！」と思えるはずです。

もし詰まったら、またこの記事を見返してくださいね！