Reactアプリをデプロイしよう

― VercelやNetlifyを使った公開手順と注意点

これまでReactを使ってアプリを開発し、構築・設計・スタイリングまで一通り学習してきました。いよいよ今回からは、**作ったアプリをインターネット上に公開する「デプロイ」**のステップへ進みます。

「自分で作ったアプリを人に見せたい」「ポートフォリオとしてGitHubと連携して公開したい」――その第一歩が、Reactアプリのデプロイです。

この記事では、モダンなホスティングサービスである Vercel と Netlify を用いた公開方法と、それぞれの特徴や注意点を解説していきます。

**デプロイ（Deploy）**とは、開発したアプリケーションをインターネット上のサーバーに配置し、誰でもアクセスできるようにすることを指します。

ローカル環境では npm run dev のように開発用のサーバーを立てて動作させていましたが、デプロイによって以下のようなURLが付与され、一般公開されます：

https://your-app.vercel.app

Your Project Title
your-project.netlify.app

サービス	特徴
Vercel	React/Next.js製作者が提供。GitHub連携・自動デプロイが強力
Netlify	Jamstack構成と相性がよく、簡単なUI操作で公開できる
Firebase Hosting	Google提供。認証・DB連携と相性がよい
GitHub Pages	静的ファイル専用。Reactも可能だが設定がやや手間

この記事では、初心者でも扱いやすい Vercel と Netlify に絞って解説します。

git init
git remote add origin https://github.com/yourname/your-project.git
git add .
git commit -m "first commit"
git push -u origin main

https://vercel.com にアクセス → アカウント作成 → 「New Project」 → GitHubのリポジトリを選択

数十秒でビルドが完了し、URLが発行されます。以降はGitHubに push するだけで自動デプロイされます。

🔗 Vercel公式サイト

npm run build

これにより、dist/ フォルダに静的ファイルが出力されます。

🔗 Netlify公式サイト

ルーティングをクライアントサイドで処理している場合、リロード時に 404 エラーになることがあります。

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

/* /index.html 200

🔗 参考：SPAのルーティング対策 – Netlify Docs

どちらを選んでも問題ありませんが、Reactを使うならVercelのシンプルさが魅力的です。

せっかく公開したアプリも、ユーザーに伝わらなければ意味がありません。丁寧な仕上げと紹介文があると、ポートフォリオとしての完成度がぐっと上がります。

Reactアプリのデプロイは、モダンなサービスのおかげで非常に簡単になりました。ローカルで完結していた開発を「世界に向けて発信する」ことで、初めてエンジニアとしてのアウトプットが形になります。

次回は、Reactアプリの品質をさらに高めるために、Linter・Formatter・型（TypeScript）による開発体験の向上について解説します。

React開発を快適にしよう ― ESLint・Prettier・TypeScript導入ガイド