自分で作ったReactアプリを、友達や誰かに見てもらいたい。そんなときに便利なのが「Vercel（ヴァーセル）」です。この記事では、専門用語をできるだけ使わず、初心者でもわかるように「アプリをURLで公開する手順」を丁寧に説明します。
目次
✅ この記事でできること
- 自分のReactアプリを「URL」で見られるようにする
- 無料のサービス「Vercel」にアップロードする
- 更新するたびにURLが自動で最新になるようにする
1. 事前に用意するもの
| 必要なもの | 内容 |
|---|---|
| GitHubアカウント | ソースコードをアップする場所（無料で作れます） |
| Vercelアカウント | アプリを公開する場所（GitHub連携が簡単） |
| Reactアプリ | すでに作ってある状態でOK（例：Viteで作成したもの） |
2. GitHubにアップロードする
すでにローカル（自分のパソコン）にあるアプリのフォルダをGitHubにアップロードします。
手順（VS CodeまたはCursorを使用）
- ターミナルで以下のコマンドを順番に実行：
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で新しいプロジェクトを作成する
手順
- https://vercel.com にアクセスし、GitHubアカウントでログインします。
- 「New Project（新しいプロジェクト）」をクリック
- GitHubにアップしたプロジェクトを選ぶ
- 設定画面で以下のように入力：
- Framework Preset（フレームワークの種類） → “Other”
- Build Command（ビルドのコマンド） →
npm run build:web - Output Directory（出力先フォルダ） →
dist
- 「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度やってみると「意外とカンタン！」と思えるはずです。
もし詰まったら、またこの記事を見返してくださいね！
