VercelでReactアプリを簡単デプロイ！

VercelでReactアプリをデプロイする

大学時代に所属していた部活動のホームページをリニューアルして欲しいとのことで、Reactを使って作成しました。

ホスティングサービスとして、以前はNetlifyを使っていたようですが、今回は JavaScriptとの相性が良く、シンプルに公開できる Vercel を採用しました。
（正直、シンプルに使ってみたかったというのも理由の一つです…！）

---

🌱 前提条件

以下の準備ができている前提で進めます：

1. Reactでプロジェクトを作成済み（例：npx create-react-app my-app）
2. GitHubにプロジェクトのリポジトリを作成・push済み

---

🚀 デプロイまでの流れ

VercelではGitHub連携を使うことで、非常に簡単にデプロイできます。

ここでは以下の手順に沿って説明していきます：

• 手順 3: GitHubとVercelの連携
• 手順 4: 公開したいリポジトリを選択
• 手順 5: デプロイ完了！

---

🔗 手順 3: GitHubとVercelの連携

1. Vercel公式サイト にアクセスし、アカウントを作成またはログインします。
   （GitHubアカウントでのログインがおすすめです）

2. ダッシュボード右上の 「Add New」 ボタンをクリックし、「Project」 を選択します。

3. プロジェクトのインポート画面に遷移するので、GitHubアカウントを選択します。

   ※ 初めての場合はここでGitHubアカウントとのバインド（連携許可）を行う必要があります。

4. 表示されたリポジトリ一覧から、対象のReactプロジェクトを選択し、「Import」 をクリックします。

---

⚙️ 手順 4: プロジェクト設定

プロジェクトの設定画面では、特に変更がなければ、そのまま 「Deploy」 ボタンをクリックすればOKです！

---

✅ 手順 5: デプロイ完了！

数十秒ほどでデプロイが完了し、
https://<プロジェクト名>.vercel.app の形式で 自動的に公開URL が生成されます。

また、GitHubと連携しているため、コードをPushするたびに自動で再デプロイしてくれます。
運用も非常にスムーズでおすすめです！

---

🎉 おわりに

VercelはReactやNext.jsと相性が抜群で、数クリックで本番公開まで進めるのが最大の魅力です。

部活動サイトやポートフォリオなど、気軽にWebアプリを公開したい人には特におすすめのサービスです！

「デプロイでつまずきたくない…」という方は、ぜひ一度Vercelを試してみてください。

---