VercelにReactアプリケーションをデプロイしてみた
2025.05.04こんにちは！製造ビジネステクノロジー部の小林です。
Vercelは、WebサイトやWebアプリケーションのデプロイとホスティングを簡単に行うためのプラットフォームです。GitHubなどのリポジトリと連携し、コードをプッシュするだけで自動的にデプロイしてくれる便利なサービスです。
前回の記事ではCloudFrontとS3を組み合わせたReactアプリのデプロイ方法をご紹介しましたが、今回は同じアプリをVercelでデプロイしてみます。Vercel初体験の私が「こんな簡単にWEBに公開できるんか！？」と驚いた過程をお届けします！
前提
Vercelのプランは「Hobby Plan」を使用しています。
使用するReactアプリは下記になります。
やってみた
Vercelにアクセス
まずはVercelの公式サイトにアクセスし「Start Deploying」を選択します。
GitHubと連携
「Continue with GitHub」を選択して、GitHubアカウントとの連携を開始します。
「Authorize Vercel」を選択して承認します。
「install」を選択してGitHubリポジトリをVercelに連携します。
デプロイしたいリポジトリを選択します。
「Only select repositories」でreact-s3-hostを選択し「install」します。
ビルド設定とデプロイ
build時のコマンドを設定し、「Deploy」を選択します。
今回は下記のパラメータで設定しています。
- Framework Preset: Create React App
- Build Command: npm run build
- Output Directory: build
- Install Command: npm install
- Environment Variables: 設定なし
デプロイが完了したら、「Continue to Dashboard」を選択してダッシュボードを確認します。
ダッシュボードではプロジェクトの状態や設定を確認できます。
公開サイトの確認
「Domains」を選択すると、自動生成されたURLでアプリケーションにアクセスできます。デフォルトでは「プロジェクト名.vercel.app」というドメインが割り当てられるようです。
おわりに
今回はVercelを使ってReactアプリケーションをデプロイする方法をご紹介しました。Vercelでのデプロイは驚くほど簡単で、わずか数ステップで完了することができました！
次回は、カスタムドメインの設定や環境変数の管理など、より詳細な設定について掘り下げていきたいと思います。
この記事がVercelでのアプリケーションデプロイを検討されている方の参考になれば幸いです！
