部署在Azure上的Node.js & Express Web API请求超时问题求助

基于Azure示例项目搭建的React SPA与Node.js/Express Web API应用，本地运行时前端认证及后端API调用均正常，但部署到Azure后：

• 前端可正常运行
• 后端API调用完全超时，且无日志输出

已执行的排查操作：

1. 在Azure的/wwwroot/server目录手动执行node app.js，显示API已监听但请求仍超时
2. web.config.js指向server/app.js
3. Azure上React应用仅能在port 443运行，配置如下：

   // client/package.json
   ...
   "scripts": {
       "start": "set PORT=443&& react-scripts start",
   ...
   

   本地运行配置示例：

   // client/package.json
   ...
   "scripts": {
       "start": "set HTTPS=true&&set SSL_CRT_FILE=certificate.crt&&set SSL_KEY_FILE=privateKey.key&&set PORT=3000&& react-scripts start",
   ...
   

4. 前端fetch调用在Azure上超时，代码如下：

   // client/fetch.js
   export const getTest = async (env) => {
       // const accessToken = await getToken();
   
       const headers = new Headers();
       // const bearer = `Bearer ${accessToken}`;
   
       // headers.append("Authorization", bearer);
   
       const options = {
           method: "GET",
           headers: headers,
       };
   
       return fetch(protectedResources.apiList.test, options)
           .then(response => response.json())
           .catch(error => console.log(error));
   }
   

5. server/app.js中，本地无论是否启用认证逻辑均可正常调用API，但Azure上均无效；尝试过HTTP和HTTPS运行Node.js（本地仅HTTPS可正常运行，因redirectUri为HTTPS），配置如下：

   // server/app.js
   const path = require('path');
   const express = require("express");
   const cors = require("cors");
   const axios = require("axios");
   const PORT = process.env.PORT || 8080;
   require("dotenv").config();
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   //app.use(express.static(path.resolve(__dirname, '../client/build')));
   
   app.get("/api/test", (req, res) => {
     res.json("hi");
   });
   
   //...other bearer token code
   
   // https.createServer(httpsOptions, app).listen(PORT, () => console.log(`Server is running on port ${PORT}`));
   
   app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));
   

1. 修正端口配置逻辑 #

Azure App Service会动态分配内部端口，禁止硬指定端口：

• 修改server/app.js的端口定义为const PORT = process.env.PORT;，移除|| 8080的本地 fallback，确保完全使用Azure分配的端口。
• React应用部署到Azure后无需手动设置PORT=443，App Service会自动处理HTTPS与端口映射。将client/package.json的start脚本恢复为开发环境默认值，部署时改用build脚本生成静态文件：

  "start": "react-scripts start",
  "build": "react-scripts build"
  

2. 验证API访问路径与CORS配置 #

• 确认前端protectedResources.apiList.test指向Azure App Service的正确绝对路径，例如https://<your-app-name>.azurewebsites.net/api/test，而非本地测试路径。
• 在Azure Portal的App Service CORS设置中，添加前端域名（如https://<your-frontend-app>.azurewebsites.net），允许跨域请求；Express中的cors()中间件可保留，但避免与Azure CORS规则冲突。

3. 配置正确的启动命令 #

Azure App Service需要明确的启动指令来运行后端：

• 在Azure Portal进入配置 > 常规设置 > 启动命令，设置为node server/app.js，确保路径与部署后的文件结构一致。
• 避免依赖web.config.js（IIS配置文件），直接通过启动命令指定Node.js入口更可靠。

4. 启用日志排查问题 #

无日志输出是定位问题的核心障碍，需开启并增强日志：

• 在Azure Portal的App Service 监控 > 日志流中，开启“应用日志”和“Web服务器日志”，实时查看请求与错误信息。
• 在server/app.js的API路由中添加日志输出，确认请求是否到达后端：

  app.get("/api/test", (req, res) => {
    console.log("Received /api/test request from:", req.ip);
    res.json("hi");
  });
  

• 添加服务器错误监听：

  app.on('error', (err) => {
    console.error('Server runtime error:', err);
  });
  

5. 优化部署结构 #

推荐将前端与后端分别部署为独立的App Service，避免端口冲突与资源竞争：

• 前端部署为静态Web App，后端部署为Node.js App Service，两者通过公网域名通信。
• 如果必须合并部署，确保Express托管前端静态文件，取消React开发服务器的运行：

  // server/app.js
  app.use(express.static(path.resolve(__dirname, '../client/build')));
  // 所有非API请求返回前端页面
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
  });
  

6. 检查网络与防火墙规则 #

• 确认App Service未配置虚拟网络限制或防火墙规则，阻止内部或外部请求。
• 如果前端与后端在同一App Service，前端使用相对路径（如/api/test）发起请求，避免跨域或路由问题。

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