React+Node.js+Firebase应用部署Azure失败，求解决方案及部署步骤

为啥会出这错？ #

Azure自动生成的GitHub Actions工作流默认用了.NET的构建逻辑（找msbuild或packages.config文件），但你的项目是React+Node.js栈，完全不沾.NET，所以必须把工作流里的.NET相关步骤删掉，换成Node.js的构建流程。

快速修复步骤 #

1. 打开你GitHub仓库里的.github/workflows文件夹，找到Azure自动生成的部署yml文件（名字一般是azure-static-web-apps-xxxx.yml这种）
2. 删掉里面所有带msbuild或者restore的步骤，这些是给.NET项目用的，对你没用
3. 添加上Node.js相关的构建步骤，示例代码如下：

   - name: 配置Node环境
     uses: actions/setup-node@v4
     with:
       node-version: '20' # 换成你项目实际用的Node版本，比如18
       cache: 'npm' # 可选，能加速依赖安装
   
   - name: 安装依赖
     run: npm install
   
   - name: 构建项目
     run: npm run build # 确保你package.json里有build脚本，输出到build或dist文件夹
   

4. 确认工作流里的app_location（React项目根目录）、output_location（build命令生成的文件夹，比如build）配置和你项目一致
5. 提交修改，重新触发GitHub Actions部署就行

提前准备 #

• 你的React项目已经开发完，package.json里有正确的build脚本
• Firebase的生产环境配置已经弄好（别直接把本地的firebaseConfig硬编码，用环境变量）
• 代码已经传到GitHub仓库
• 有Azure账号

步骤1：选对Azure服务类型 #

• 纯静态React应用：创建Azure静态Web应用
• 带Node.js后端API：要么创建Azure应用服务（Web应用），要么用静态Web应用的API功能（后端用Azure Functions）
  下面以「静态Web应用+Node.js后端（Azure Functions）」为例讲流程

步骤2：把GitHub和Azure连起来 #

1. 登录Azure门户，打开你刚创建的静态Web应用
2. 左边菜单点「部署中心」，选GitHub作为部署源
3. 授权Azure访问你的GitHub仓库，选好对应的仓库和要部署的分支（比如main），点保存

步骤3：改好GitHub Actions工作流 #

Azure自动生成的工作流不对，得改成适配Node.js的：

1. 打开GitHub仓库的.github/workflows文件夹，找到自动生成的yml文件
2. 替换成下面的示例代码，记得根据你项目的实际路径调整：

   name: Azure静态Web应用CI/CD
   
   on:
     push:
       branches:
         - main # 你的部署分支
     pull_request:
       types: [opened, synchronize, reopened, closed]
       branches:
         - main
   
   jobs:
     构建并部署:
       if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
           with:
             submodules: true
             lfs: false
   
         # 配置Node.js环境
         - name: 安装指定版本Node
           uses: actions/setup-node@v4
           with:
             node-version: '20'
             cache: 'npm'
   
         # 前端构建
         - name: 安装前端依赖
           working-directory: ./frontend # 如果React在子文件夹，这里改路径
           run: npm install
   
         - name: 构建前端
           working-directory: ./frontend
           run: npm run build
   
         # 后端API构建（如果有）
         - name: 安装后端依赖
           working-directory: ./api # 后端代码所在文件夹
           run: npm install
   
         - name: 构建后端
           working-directory: ./api
           run: npm run build # 后端需要构建的话加这步
   
         # 部署到Azure
         - name: 部署到Azure静态Web应用
           id: deploy-to-static-web-apps
           uses: Azure/static-web-apps-deploy@v1
           with:
             azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_XXXX }}
             repo_token: ${{ secrets.GITHUB_TOKEN }}
             action: "upload"
             app_location: "./frontend" # React项目根路径
             api_location: "./api" # 后端API路径（没有就删掉这行）
             output_location: "build" # React构建输出的文件夹
   

3. 提交修改到GitHub

步骤4：配置Firebase环境变量 #

1. 在Azure门户里找到你的应用，左边菜单点「配置」→「应用程序设置」
2. 添加Firebase的生产环境变量，比如：
   • REACT_APP_FIREBASE_API_KEY
   • REACT_APP_FIREBASE_AUTH_DOMAIN
   • 其他Firebase需要的配置项
3. 保存配置，Azure会自动更新应用

步骤5：测试部署 #

1. 提交代码到指定分支，触发GitHub Actions
2. 去GitHub看Actions的运行日志，确认构建和部署都成功
3. 访问Azure给的应用URL，测一下功能正常不正常

常见坑排查 #

• 构建失败先检查Node版本是不是和你项目要求的一致
• 确认package.json里的build脚本能正常生成文件，且输出文件夹和工作流里的output_location对应上
• 后端如果用Azure Functions，确保api_location指对了文件夹，函数配置没问题

内容的提问来源于stack exchange，提问作者Divya42