Vercelで簡単！Reactアプリを無料でデプロイする方法

こんにちは、とまだです。

別記事で React アプリを作った際、Vercel というサービスを使ってアプリをデプロイしました。

その知見を元に、Vercel で React アプリをデプロイする手順をまとめてみました！

みなさんのお役に立てれば幸いです。

Vercel とは？

Vercel は、フロントエンドアプリケーションのホスティングに特化したプラットフォームです。

React 以外にも、Next.js、Vue.js など、人気のフレームワークやライブラリに対応していることで知られています。

前提条件

まず、以下の準備ができていることを確認してください。

1. GitHub アカウントを持っていること
2. React アプリを作成済みであること
3. GitHub に React アプリのリポジトリを作成済みであること

これらの準備ができていれば、すぐにデプロイを始められます！

デプロイ手順

Step 1: Vercel にログイン

まず、Vercel の公式サイトにアクセスしましょう。

1. ブラウザで https://vercel.com/login を開きます。
2. 「Continue with GitHub」ボタンをクリックして、GitHub アカウントでログインします。

Step 2: 新しいプロジェクトを追加

ログインしたら、新しいプロジェクトを作成します。

1. ダッシュボードの右上にある「Add New」ボタンをクリックします。
2. ドロップダウンメニューから「Project」を選択します。

Step 3: GitHub リポジトリを選択

次に、デプロイしたい React アプリの GitHub リポジトリを選択します。

1. リポジトリの一覧から、デプロイしたい React アプリのリポジトリを探します。
2. 該当するリポジトリの「Import」ボタンをクリックします。

初めて Vercel を使用する場合、GitHub との連携を求められることがあります。
その場合は、画面の指示に従って連携を行っていただければ大丈夫です。

Step 4: プロジェクト設定とデプロイ

リポジトリを選択したら、プロジェクトの設定を行います。

1. 「Framework Preset」で「Create React App」を選択します。
2. 他の設定はデフォルトのままで問題ありません。
3. 画面下部の「Deploy」ボタンをクリックして、デプロイを開始します。

Step 5: デプロイの進行

「Deploy」ボタンをクリックすると、Vercel が自動的にデプロイプロセスを開始します。

1. 画面上でデプロイの進行状況を確認できます。
2. ビルド、テスト、デプロイの各段階が自動的に実行されます。

Step 6: デプロイ完了

デプロイが成功すると、完了画面が表示されます。

1. 「Congratulations!」というメッセージが表示されます。
2. デプロイされたアプリの URL も表示されます。

Step 7: ダッシュボードの確認

1. 「Continue to Dashboard」ボタンをクリックして、プロジェクトのダッシュボードに移動します。
2. ダッシュボードでは、デプロイの履歴、パフォーマンス統計、設定などを確認できます。

Step 8: デプロイされたアプリの確認

1. ダッシュボードの「Domains」セクションに表示されている URL をクリックします。
2. ブラウザで新しいタブが開き、デプロイされた React アプリが表示されます。

以下は、デプロイされたアプリの例です。

アプリが正常に動作していることを確認しましょう。

まとめ

お疲れさまでした！これで、あなたの React アプリが Vercel 上で公開されました。

他にも、押さえておくべきポイントがいくつかありますので、以下にまとめておきます。

• Vercel は、GitHub と連携することで簡単にデプロイできます。
• デプロイ後も、GitHub リポジトリに変更をプッシュするたびに自動的に再デプロイされます。
• Vercel のダッシュボードから、デプロイの履歴やパフォーマンスを簡単に確認できます。

Vercel を使えば、複雑な設定なしで簡単に React アプリをデプロイできます。ぜひ、自分のプロジェクトでも試してみてください！