Angular 14 SSR部署Azure Web App：如何正确使用server文件夹？

你的问题核心在于只部署了Angular SSR的前端(browser)目录，完全没配置SSR的服务端(server)逻辑，而且当前的web.config会把所有非文件/目录的请求都重写到index.html——这就是为什么API返回200但内容是HTML的原因。

修复步骤 #

1. 调整部署目录结构 #

把dist目录下的browser和server两个文件夹都上传到Azure Web App的site/wwwroot目录下，最终结构应该是：

site/wwwroot/
├─ browser/
│  ├─ index.html
│  └─ 静态资源文件...
└─ server/
   └─ main.js (或server.js，取决于你的Angular构建输出)

2. 更新web.config配置 #

替换原有的web.config，新增规则区分静态资源、API请求和SSR路由：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <handlers>
      <!-- Node.js handler for SSR and API -->
      <add name="iisnode" path="server/main.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- 优先处理静态资源 -->
        <rule name="StaticContent" stopProcessing="true">
          <match url="([\S]+[.](html|css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot))" />
          <action type="Rewrite" url="browser/{R:1}"/>
        </rule>
        <!-- 转发API请求到SSR服务端 -->
        <rule name="API Routes" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="server/main.js"/>
        </rule>
        <!-- 所有其他路由交给SSR处理 -->
        <rule name="SSR Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="server/main.js"/>
        </rule>
      </rules>
    </rewrite>
    <security>
      <requestFiltering>
        <fileExtensions>
          <add fileExtension=".svg" allowed="true" />
          <add fileExtension=".woff" allowed="true" />
          <add fileExtension=".woff2" allowed="true" />
        </fileExtensions>
      </requestFiltering>
    </security>
    <httpProtocol>
      <customHeaders>
        <!-- 按需启用安全头 -->
        <!-- <add name="X-Content-Type-Options" value="no-sniff"/>
        <add name="X-Frame-Options" value="SAMEORIGIN"/>
        <add name="X-Xss-Protection" value="1; mode=block"/>
        <add name="Strict-Transport-Security" value="max-age=31536000; includeSubDomains"/> -->
      </customHeaders>
    </httpProtocol>
    <httpRedirect enabled="false" destination="" />
    <!-- 配置iisnode日志 -->
    <iisnode node_env="production" loggingEnabled="true" />
  </system.webServer>
</configuration>

3. 设置Azure启动命令 #

在Azure Web App的配置页面 → 常规设置 → 启动命令中，填入：

node server/main.js

注意：如果你的server目录下入口文件是server.js，就改成node server/server.js

关键说明 #

• 本地运行正常是因为Angular CLI的SSR命令（ng serve --ssr）会同时启动前端静态服务和SSR服务端，自动处理请求转发；但Azure上默认只会处理静态文件，必须手动配置路由转发到Node.js服务端。
• 新的web.config逻辑：先匹配静态资源直接返回，API请求和页面路由都转发到SSR服务端，由Angular的SSR逻辑处理API响应和页面渲染。

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