Webアプリを無料でデプロイするなら…Vercel
Vercelはホスティングサービスで、Reactなどを利用したWebアプリを無料で簡単に公開することができます。最近のAI利用による開発でこちらにアプリをデプロイしている方も多いと思います。
Webアプリを公開したあと 「ここを直したい！」 と思うことは当然あるかと思いますが、いきなり更新するのは恐い…そんなときのためにテスト環境の作成、現在の環境（本番環境）へ統合する方法を紹介したいと思います。
※VercelへはGitHubを利用してデプロイしていることを前提としています。
また操作はGitHubデスクトップを使って行います。
以前GitHubを使ってVercelへデプロイする方法を紹介した記事はこちら
①クライアントのみの場合
まずReactやNext.jsなどでクライアント（フロントエンド）側を開発した場合についてです。（フルスタックも含む）
この場合はGitでブランチを作成するだけです。ブランチはGitの入門記事などを見てもらった方がわかりやすいですが、簡単に言うと「本家に対して分家を作る」ということです。
※画像はサル先生のGit入門より
ラーメン屋に例えると同じレシピでのれん分けをするイメージです。仮にラーメン店 "Qiita家（本家）" があり、そののれん分けとして "Qiita商店（分家）" をオープンするとします。Qiita商店は最初こそQiita家と同じ味ですが独自に試行錯誤してスープの味を変えていきます。
そしてQiita商店の方が好評となったためQiita家のスープをQiita商店のものに変えることにします！（実際のラーメン屋ではあまりないかもしれませんが…）
大まかに言うとこんな流れです。この例えで言うと
Qiita商店の出店 → ブランチの作成
Qiita家のスープの入れ替え → ブランチのマージ
となります。ブランチの作成はよく「ブランチを切る」と言われます。
※マージはざっくりですが統合すると言う意味です
説明は以上で実際にGitHubデスクトップでのブランチ作成方法を紹介します。
以下のようなサイトを修正して左上に通知を付けたいと思います。
[Current repository]をテスト環境を作りたいリポジトリにして、[Current branch]をクリック。[New branch]をクリックします。
ブランチの名前を適当に付けます。今回は "feature" にします。（ちゃんとした開発には命名規則などがあります。）
これでブランチができました。あとはバグの修正や機能の追加など思う存分コードをいじって下さい。
修正を終えたらコミット（ローカルリポジトリへの保存）をします。メッセージが必須の場合があるので何か適当に入力して下さい。
※[Current branch]を切り替えるとローカルにあるコードがそのブランチのものに切り替わります。ですのでコミットせずに切り替えると修正したソースが消えてしまうので注意して下さい。
これをリモートリポジトリに反映させるためにプッシュします。
Web上のGitHubで確認すると作成したブランチができています。
Vercelで見てみます。[Active Branches]の下にプッシュしたブランチの名前があります。（デフォルトで自動デプロイの設定になっているはずです）
これがコードを修正された環境となるのでクリックしてみて下さい。（右の方に小さく書いてありますがこの環境はVercel内で Preview（テスト環境） と呼ばれます）
修正内容が反映されたテストページが表示されました。
これで色々テストして問題が無ければマージ、本家に統合して本番環境に反映させます。最初に必ず[Current branch]でmainを選んで下さい。下の方にある[Choose a branch to merge into main]をクリック。
ここで先ほど更新したブランチのfeatureを選んでマージします。
このマージを本番環境に反映させるためにプッシュします。
これで更新が完了です。
これがブランチ作成→マージまでの一連の流れとなります。
なぜこれがクライアントのみの場合かと言いますと認証が必要となるからです。（最初に起動した際、Vercelの認証画面が一瞬表示されたかと思います。）
つまりVercelでログインしていないと利用できないため、ブラウザ以外でアクセスするとはじかれてしまいます。そのためサーバー側は以下の方法を利用してください。また自分以外の人に利用してもらいたい場合もこちらを利用して下さい。
②サーバー（API）側の場合
Express.jsやFlaskなどでAPIを作成した場合です。この場合は先ほどの通り、ログインしてブラウザでアクセスしない限りはじかれてしまいます。
簡単な対応方法はブランチを先ほどと同様に作成して、ログイン不要の認証オフにするだけです。Vercelで該当プロジェクトのSettingページへ。
左のメニューからDeployment Protectionを選びます。
設定をいじるのはVercel Authenticationです。
Vercel Authenticationの説明を訳しますと「デプロイメントへの訪問者が Vercel にログインしており、チームのメンバーであることを確認します。」となっています。つまり非認証者は利用できないようになっているのでこれをオフして保存にします。
これでAPIなどサーバー側もブランチによるテスト環境が利用できるようになり、ログイン不要で誰かに試してもらうこともできます。
③新たにテスト用のプロジェクトを作る
②の方法の欠点として、全てのブランチの環境が公開されるというセキュリティ上の懸念があります。またCORSでAllow-Originを指定していると色々と設定を変えなくてはいけないのでややこしいです。（プレビュー環境での環境変数の切り替えはできますので最後に紹介。）
ということでめんどうですが一番安全ともいえる、別ブランチでのプロジェクトの作成方法を紹介します。
ブランチは①と同じく "feature" を作成したとします。mainではなくfeatureが動かせる別のプロジェクトを作ることを目的とします。
Vercelの自身のページから[Add New] - [Project]を選択します。
[Import Git Repository]から現在の環境と同じリポジトリを選択します。（同じリポジトリから複数のプロジェクトができることになりますが問題ありません）
プロジェクト名はtestを付けるなど分かりやすいものを付けて、[Deploy]をクリック。
テスト用プロジェクトが出来ました。
当然このままだと今までの環境と同じなので、feature用の環境にします。[Setting]タブをクリック。
左のメニュー[Environments]を選択し、[Production]をクリック。（"Production"は"本番"という意味になります）
Branch Trackingの[Branch is]の右が"main"となっているので、ここでブランチを指定します。今回は"feature"とします。変更したら[save]で保存して下さい。
保存してもすぐに環境は変わらないので、ソースに何か追加するのなど変更してコミット→プッシュして下さい。
そうしますとプロジェクトページのSourceは今までmainであったのが、先ほど指定したブランチ"feature"になっているかと思います。（逆に今度は"main"がテスト環境であるPreviewになっているかと思います。）
これで正真正銘？のテスト環境になります。サーバー側もある場合はこちらをもう一つ作ると、最初は面倒ですがテストがだいぶはかどるかと思います。
補足 環境変数に関して
①②の場合に環境変数をテストと本番で分ける方法を紹介します。[Setting]の左のメニュー[Environment Variables]で設定できます。
デフォルトはEnvironmentsがAll Environments（全部選択）になっていますので、テスト環境だけに適用する変数を追加したい場合はPreviewのみにチェックを入れます。
あとはその環境で利用したい変数を追加して[Save]で保存します。
All EnvironmentsとPreviewどちらも設定している場合はPreviewが優先されるようですが、念のためテストなどで確認してみて下さい。
宣伝
BlueSkyの画像だけを見れるWebアプリをv0を元に作りました！使ってみてください！