前提条件と準備
デプロイを始める前に、以下を準備してください：
- Azureサブスクリプション
- Azure App Service（Webアプリ）（あらかじめAzureポータルで作成）
- ローカル環境：Gitインストール済み、ReactアプリがGitリポジトリとして初期化済み
- Node.js/npm：Reactアプリのビルドに必要
- Azure App ServiceのローカルGitデプロイ設定：AzureポータルやCLIで有効化
1. Git リモート: origin と Azure 用リモートの違い
-
origin：GitHub等、通常のコード管理用 - 例：
azure-front：Azureデプロイ用リモート名（任意で追加） -
git remote -vで確認可
2. Azure側の準備
2.1 Local Gitの有効化
Azureポータル > 対象App Service > Deployment Center > Source = Local Git に変更 → Save
2.2 発行プロファイルの取得
Azureポータル > Web App 概要ページ > 「Download publish profile」から取得。.PublishSettings ファイル内に資格情報が含まれる。
2.3 資格情報の確認
発行プロファイル内の以下を確認：
userName="$アプリ名"userPWD="..."publishUrl="...azurewebsites.net..."
3. Azure用Gitリモートの設定
3.1 Git Clone URLの確認
形式例：
https://$username@yourapp.scm.azurewebsites.net:443/yourapp.git
3.2 リモートの追加
git remote add azure-front https://$username@yourapp.scm.azurewebsites.net:443/yourapp.git
4. React アプリのビルドと準備
npm install
npm run build
-
.gitignoreからbuild/を除外またはgit add -f build/ - コミット：
git commit -m "Add build files for Azure deployment"
5. Azure へのデプロイ (Git Push)
-
mainブランチをmasterにプッシュする例：
git push azure-front main:master
-
認証時にパスワードを聞かれたら発行プロファイルの
userPWDを使用 -
ログに
Deployment successful.と出れば成功
6. 2FA 有効時の認証方法
- 発行プロファイルの資格情報を使用（最も簡単で推奨）
- ユーザースコープの資格情報を別途設定（Azure CLI などで）
- Microsoft アカウントのアプリパスワード使用
- SSH公開鍵の利用（上級者向け）
7. よくあるエラーと対処法
認証失敗
- Azureログインパスワードではなく発行プロファイルのパスワードを使う
ホストに接続できない
- URLやネットワーク確認、App ServiceがRunningか確認
デプロイされない
- ブランチ指定ミス、
git push azure-front main:masterなどで再実行
デプロイ失敗
- Deployment Center > Logs や Kudu のログで詳細を確認
Reactが表示されない
-
web.configの設定確認（SPAの場合）
これでReactアプリをAzure App Serviceにデプロイする準備・実行・確認・トラブル対応まで一通り完了です！