Azure App Services中React前端与Express后端连接及代理配置问题

问题场景 #

在Windows环境Azure App Service中，通过虚拟应用和目录功能连接React前端（site/wwwroot/index.html）与Express(Node.js)后端（site/server/server.js），前端可正常加载，但后端接口请求失败，手动执行node server启动无效。

后端示例（原代码） #

const express = require('express');
const app = express();
const port = 3003; // 硬编码端口是核心问题之一
require("dotenv").config();

[...]

app.get("/api/getBooks", async (req, res) => {
    const books = await Books.find();
    res.send(books);
});

前端示例（原代码） #

const getBooks = () => {
  axios.get('/api/getBooks')
    .then(res => {
      setBooks(res.data);
      console.log("Got books: ")
      console.log(res.data);
    })
    .catch(err => {
      console.log(err);
    })
}

Azure文件夹结构 #

site/server/server.js (Express后端)
site/wwwroot/index.html (React前端)

解决步骤 #

1. 修复后端端口配置 #

Azure App Service Windows环境使用动态分配端口，不能硬编码固定值。修改server.js中的端口配置：

const port = process.env.PORT || 3003; // 优先使用平台分配的端口，本地开发 fallback 到3003

2. 配置App Service启动命令 #

在Azure门户的App Service控制台中，进入配置 > 常规设置：

• 设置启动命令：node D:\home\site\server\server.js（指定后端服务的绝对路径）
• 设置WEBSITE_NODE_DEFAULT_VERSION为项目依赖的Node.js版本（如18.x，需与本地开发版本一致）

3. 调整虚拟应用路径映射 #

进入配置 > 虚拟应用和目录，确保映射规则正确：

• 前端：虚拟路径/，物理路径site\wwwroot，不勾选“应用”（静态文件服务无需标记为应用）
• 后端：虚拟路径/api，物理路径site\server，勾选“应用”（标记为Node.js应用，处理所有/api前缀的请求）

关键调整：此时后端路由需去掉/api前缀，避免路径重复匹配。修改后端接口路由：

// 原路由 /api/getBooks 改为 /getBooks
app.get("/getBooks", async (req, res) => {
    const books = await Books.find();
    res.send(books);
});

前端请求路径/api/getBooks会被虚拟应用映射转发到后端的/getBooks接口，实现正确匹配。

4. 确认后端依赖安装完成 #

在Azure门户的开发工具 > 控制台中，进入后端目录执行依赖安装：

cd D:\home\site\server
npm install

5. 验证服务状态 #

• 查看日志流：在Azure门户的监视 > 日志流中，检查后端启动日志，排查依赖缺失、数据库连接失败等错误。
• 测试接口：直接访问https://<你的App Service域名>/api/getBooks，确认返回正常数据。

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