Chapter 08

本番環境へのデプロイ

とまだ@Webエンジニア
とまだ@Webエンジニア
2024.11.04に更新
このチャプターの目次
  1. 本番環境へのデプロイ
    1. Vercel とは
    2. Vercel アカウントの作成
    3. プロジェクトのインポート
    4. デプロイ設定
    5. デプロイの実行
    6. デプロイ後の確認
    7. 補足：自動デプロイ
    8. トラブルシューティング
    9. まとめ

本番環境へのデプロイ

ここまでで作成してきた React アプリケーションを、実際にインターネット上で公開できる状態にする方法を学んでいきましょう。

この章では、Vercel というホスティングサービスを使用して、私たちのアプリケーションを簡単にデプロイする方法を説明します。

Vercel とは

Vercel は、フロントエンドアプリケーションを簡単にデプロイできるホスティングプラットフォームです。

特に React などのモダンなフロントエンドフレームワークとの相性が良く、初心者でも簡単にデプロイができる特徴があります。

主な特徴は以下の通りです。

  • GitHub と連携して自動デプロイができる
  • プレビュー環境が自動で作成される
  • SSL 証明書が自動で設定される
  • カスタムドメインの設定が可能

今回は、Vercel を使用して React アプリケーションをデプロイする手順を説明します。

なお、Vercel のアップデートにより、多少の画面の変更があるかもしれませんが、基本的な手順は変わらないはずです。

Vercel アカウントの作成

まずは Vercel のウェブサイト（https://vercel.com）にアクセスします。

その後、右上の 「Sign Up」 をクリックします。

Plan Type は上の I'm working on personal projects を選択し、Your Name 欄に名前を入力したら Continue をクリックします。

次にログイン方法を聞かれるので、 「Continue with GitHub」 を選択し、GitHub アカウントでログインします

あとは画面の指示に従って追加情報を入力し、アカウント作成を完了させます。

プロジェクトのインポート

https://vercel.com/new にアクセスして、新しいプロジェクトを作成していきます。

Vercel のダッシュボードから 「Add New」 をクリックし、中の 「Project」 を選択します。

「Import Git Repository」 セクションで、前章で作成した 「react-my-template」 リポジトリを探して 「Import」 をクリックします
（もし表示されない場合は、 「Adjust GitHub App Permissions」 をクリックして権限を追加します）

デプロイ設定

プロジェクトをインポートしたら、以下の設定を確認します。

  1. Project Name:

    • デフォルトでリポジトリ名が入力されています
    • 必要に応じて変更可能です（例：my-first-react-app）

  2. Framework Preset:

    • 自動的に 「Vite」 が選択されているはずです
    • もし選択されていない場合は、手動で 「Vite」 を選択します

  3. Build and Output Settings:

    • Build Command: npm run build（デフォルトのまま）
    • Output Directory: dist（デフォルトのまま）
    • Install Command: npm install（デフォルトのまま）

  4. Environment Variables:

    • 環境変数が必要な場合はここで設定します
    • 今回のプロジェクトでは特に必要ありません
    • より複雑なプロジェクトでは、ここで API キーなどを設定します

デプロイの実行

  1. 「Deploy」 ボタンをクリックします
  2. デプロイが開始され、以下のような処理が自動的に行われます。
    • ソースコードのクローン
    • 依存関係のインストール
    • ビルドの実行
    • デプロイの完了

デプロイ後の確認

少し待つと、以下のような画面が表示されてデプロイ完了です。

デプロイが完了したら、 「Continue to Dashboard」 をクリックしてダッシュボードに移動します。

「Domains」 と表示されている欄に、デプロイされたアプリケーションの URL が表示されています。

ここはリポジトリ名などによって異なりますが、クリックすると実際にアプリケーションが表示されます。

これでデプロイ完了です！お疲れ様でした。

補足：自動デプロイ

Vercel の便利な機能の 1 つは、GitHub と連携した自動デプロイです。

これにより、GitHub リポジトリに変更があった際に自動的にデプロイが実行されます。

  1. main ブランチへのプッシュ:

    • main ブランチに変更をプッシュすると、自動的にデプロイが実行されます
    • これにより、常に最新のコードが本番環境に反映されます

  2. プレビューデプロイ:

    • プルリクエストを作成すると、自動的にプレビュー環境が作成されます
    • ご自身やレビュアーは実際の動作を確認してからマージを判断できます

トラブルシューティング

ここまで作ってきたリポジトリはほとんどの場合問題なくデプロイできるはずです。

しかし、もしオリジナルのアプリではデプロイに失敗した場合は、以下の点を確認しましょう。

  1. ビルドエラー:

    • npm run build がローカルで成功することを確認
    • 必要な依存関係がすべて package.json に記載されているか確認

  2. 環境変数:

    • 必要な環境変数が設定されているか確認（必要な場合）
    • 環境変数の名前が正しいか確認

  3. Node.js バージョン:

    • package.json に指定されている Node.js バージョンが Vercel でサポートされているか確認

まとめ

この章では、Vercel を使用して私たちの React アプリケーションを本番環境にデプロイする方法を学びました。

Vercel の主な特徴は以下の通りです。

  • デプロイが簡単で初心者にも扱いやすい
  • GitHub と連携した自動デプロイが可能
  • プレビュー環境が自動で作成される
  • SSL やカスタムドメインなどの高度な機能も利用可能

これで、あなたの作成した React アプリケーションを世界中の人々が利用できるようになります！

今後はポートフォリオや個人プロジェクトなど、Vercel を活用して自分のアプリケーションを公開してみましょう。