能否在Azure App Service中同时托管React前端与后端？

1. 补全Express核心配置（最关键的遗漏） #

你当前的Express代码缺少启动监听端口的逻辑，而且硬写端口8000不符合Azure的动态端口规则，必须修改：

const PORT = process.env.PORT || 8000; // 本地用8000，部署时自动适配Azure分配的端口
const express = require('express');
const cors = require('cors');
const axios = require('axios');
const path = require('path'); // 新增：用于托管静态文件
require('dotenv').config();

const app = express();

app.use(cors());

// 新增：托管React打包后的静态文件
app.use(express.static(path.join(__dirname, 'build')));

// 你的API路由
app.get('/', (req, res) => {
    res.json('hi');
});

// 新增：SPA路由兼容——除API外的所有请求返回React主页
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 新增：启动服务的核心代码
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

2. 修正package.json的启动脚本 #

Azure App Service默认会执行npm start，你需要配置统一的启动命令，同时避免GitHub Action挂起：

{
  "scripts": {
    "start:backend": "nodemon backend.js", // 本地开发用
    "start:frontend": "react-scripts start", // 本地开发用
    "build": "CI=false react-scripts build && gulp licenses", // 仅负责打包，不要加启动后端的命令
    "start": "node backend.js", // Azure部署时会自动执行这个命令
    "test": "react-scripts test --passWithNoTests",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
  }
}

之前在build里加&& node backend.js会导致GitHub Action挂起，因为后端是长运行进程，会卡住Action的结束流程。

3. 本地验证部署流程 #

先在本地模拟部署场景，确保逻辑正确：

• 执行npm run build生成静态文件
• 执行npm start启动Express服务
• 访问http://localhost:8000，应该能看到React前端，同时访问根路径能返回hi的API响应

4. 检查Azure配置（可选） #

如果Azure没自动识别start脚本，可以手动指定启动命令：

• 进入Azure Portal → 你的App Service → 配置 → 常规设置 → 启动命令
• 输入npm start或直接node backend.js

5. 查看Azure日志排查问题 #

如果部署后仍失败，直接看日志找错误：

• 进入Azure Portal → 你的App Service → 日志流，查看实时启动日志，常见问题包括：依赖缺失、端口绑定失败、文件路径错误等

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