こんにちは、とまだです。
別記事で React アプリを作った際、Vercel というサービスを使ってアプリをデプロイしました。
その知見を元に、Vercel で React アプリをデプロイする手順をまとめてみました！
みなさんのお役に立てれば幸いです。
Vercel とは？
Vercelは、フロントエンドアプリケーションのホスティングに特化したプラットフォームです。
React 以外にも、Next.js、Vue.js など、人気のフレームワークやライブラリに対応していることで知られています。
前提条件
まず、以下の準備ができていることを確認してください。
- GitHubアカウントを持っていること
- Reactアプリを作成済みであること
- GitHubにReactアプリのリポジトリを作成済みであること
これらの準備ができていれば、すぐにデプロイを始められます！
デプロイ手順
Step 1: Vercelにログイン
まず、Vercelの公式サイトにアクセスしましょう。
- ブラウザで https://vercel.com/login を開きます。
- 「Continue with GitHub」ボタンをクリックして、GitHubアカウントでログインします。
Step 2: 新しいプロジェクトを追加
ログインしたら、新しいプロジェクトを作成します。
- ダッシュボードの右上にある「Add New」ボタンをクリックします。
- ドロップダウンメニューから「Project」を選択します。
Step 3: GitHubリポジトリを選択
次に、デプロイしたいReactアプリのGitHubリポジトリを選択します。
- リポジトリの一覧から、デプロイしたいReactアプリのリポジトリを探します。
- 該当するリポジトリの「Import」ボタンをクリックします。
初めてVercelを使用する場合、GitHubとの連携を求められることがあります。
その場合は、画面の指示に従って連携を行っていただければ大丈夫です。
Step 4: プロジェクト設定とデプロイ
リポジトリを選択したら、プロジェクトの設定を行います。
- 「Framework Preset」で「Create React App」を選択します。
- 他の設定はデフォルトのままで問題ありません。
- 画面下部の「Deploy」ボタンをクリックして、デプロイを開始します。
Step 5: デプロイの進行
「Deploy」ボタンをクリックすると、Vercelが自動的にデプロイプロセスを開始します。
- 画面上でデプロイの進行状況を確認できます。
- ビルド、テスト、デプロイの各段階が自動的に実行されます。
Step 6: デプロイ完了
デプロイが成功すると、完了画面が表示されます。
- 「Congratulations!」というメッセージが表示されます。
- デプロイされたアプリのURLも表示されます。
Step 7: ダッシュボードの確認
- 「Continue to Dashboard」ボタンをクリックして、プロジェクトのダッシュボードに移動します。
- ダッシュボードでは、デプロイの履歴、パフォーマンス統計、設定などを確認できます。
Step 8: デプロイされたアプリの確認
- ダッシュボードの「Domains」セクションに表示されているURLをクリックします。
- ブラウザで新しいタブが開き、デプロイされたReactアプリが表示されます。
以下は、デプロイされたアプリの例です。
アプリが正常に動作していることを確認しましょう。
まとめ
お疲れさまでした！これで、あなたのReactアプリがVercel上で公開されました。
他にも、押さえておくべきポイントがいくつかありますので、以下にまとめておきます。
- Vercelは、GitHubと連携することで簡単にデプロイできます。
- デプロイ後も、GitHubリポジトリに変更をプッシュするたびに自動的に再デプロイされます。
- Vercelのダッシュボードから、デプロイの履歴やパフォーマンスを簡単に確認できます。
Vercelを使えば、複雑な設定なしで簡単にReactアプリをデプロイできます。ぜひ、自分のプロジェクトでも試してみてください！