Azure部署React+Express应用的配置与结构问题咨询

项目背景与当前配置 #

本人为资深开发者，初次接触Node.js/React/Azure及相关构建流程，部署Node.js/React应用至Azure Windows App Service时遇到问题，已尝试多种方案未解决，现确认生产构建与基础托管配置正确性：

项目结构 #

client
└─build
   ├─static
   ├─index.html
   └─其他文件
server
├─index.js
└─其他文件
node_modules
package.json（仅含启动命令"node server/index.js"）
web.config

web.config配置 #

<?xml version="1.0"?>
<configuration>
 <system.webServer>
   <handlers>
     <add name="iisnode" path="index.js" verb="*" modules="iisnode" />
   </handlers>
   <rewrite>
     <rules>
       <rule name="Client Routes" stopProcessing="true">
         <match url=".*" />
         <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
         </conditions>
         <action type="Rewrite" url="/" />
       </rule>
     </rules>
   </rewrite>
 </system.webServer>
</configuration>

Azure虚拟应用与目录配置 #

注：React homepage已设置为/application

已完成设置 #

• 通过VS Code部署构建文件夹
• 设置SCM_DO_BUILD_DURNG_DEPLOYMENT=false（因VM内存不足，无法在部署时构建）

当前现象 #

• /application路径可显示React静态内容，但路由（如/application/api/..）无法工作
• 访问/及API路由时，index.js内容被直接显示而非执行

核心疑问与解答 #

1. Azure是否要求此类应用采用特定文件夹结构？是否必须将server目录下的文件置于wwwroot根目录？ #

Azure没有强制固定文件夹结构，但推荐将Node.js服务入口文件所在目录作为wwwroot根目录，或确保web.config能准确定位到入口文件。当前将server放在wwwroot子目录，只要配置正确也能运行，但容易出现路径匹配问题——比如你当前web.config里的path="index.js"指向wwwroot根目录的文件，而实际入口在server子目录，这就是问题根源之一。

2. Azure是否要求Node.js服务文件必须命名为server.js？使用index.js是否需额外配置？ #

没有强制要求必须用server.js。如果用index.js作为入口，需确保：

• package.json的启动命令正确指向server/index.js
• web.config的handlers节点中，path要正确指向入口文件路径（比如你的情况应该是path="server/index.js"）
• 可在web.config中添加<defaultDocument>节点指定默认启动文件：

  <defaultDocument>
    <files>
      <add value="server/index.js" />
    </files>
  </defaultDocument>
  

3. web.config应放置于wwwroot根目录还是wwwroot/server目录？ #

必须放在wwwroot根目录。Azure Windows App Service的IIS从wwwroot根目录加载web.config来处理请求路由和iisnode配置，放在子目录无法全局生效。

4. 虚拟目录配置中，根路径/指向wwwroot，但index.js在wwwroot/server，React主页设为/application，是否需配置虚拟目录？还是应通过应用根路径/处理？ #

虚拟目录配置可选，但当前配置引发了路由冲突：

• React的/application虚拟目录对应静态文件，但API路由被web.config规则拦截后重写到/，而你的API服务在server/index.js，当前配置未正确将API请求转发到服务入口。
• 更合理的方式是：不需要单独配置/application虚拟目录，让Node.js服务直接托管React静态文件（在server/index.js中添加静态文件服务，指向client/build目录），所有请求通过Node.js服务处理，避免虚拟目录的路由冲突。

如果坚持用虚拟目录，需修改web.config的重写规则，区分/application下的客户端路由和/api下的服务路由，确保API请求能正确转发到server/index.js。

5. 已设置Node版本并配置iisnode处理器，但访问站点根路径时index.js内容被直接显示而非执行，API路由也无法解析，是否为配置错误？ #

是明确的配置错误，核心问题：

• web.config的handlers节点中path="index.js"指向wwwroot根目录的文件，但你的入口在server/index.js，IIS找不到对应的iisnode处理目标，因此直接返回文件内容。
• 重写规则中的API路由匹配^/(api)，但服务入口未被正确关联，导致API请求无法被Node.js服务处理。

修正方案：

1. 修改web.config的handlers节点，将path改为server/index.js：

   <add name="iisnode" path="server/index.js" verb="*" modules="iisnode" />
   

2. 添加API路由的重写规则，将请求转发到服务入口：

   <rule name="API Routes" stopProcessing="true">
     <match url="^api/(.*)" />
     <action type="Rewrite" url="server/index.js" />
   </rule>
   

3. 调整客户端路由的重写规则，确保/application下的路由重写到对应静态文件：

   <rule name="Client Routes" stopProcessing="true">
     <match url="application/.*" />
     <conditions logicalGrouping="MatchAll">
       <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
       <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
     </conditions>
     <action type="Rewrite" url="/application/index.html" />
   </rule>
   

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