将配置好Angular Universal的Angular应用部署至Azure服务遇问题

一、解决web.config构建后消失的问题 #

直接手动添加到server文件夹会被Angular构建覆盖，因为构建过程会清空并重新生成dist/server目录。正确做法是把web.config纳入项目构建资源：

• 在项目根目录创建一个server-config文件夹，将web.config放入其中。
• 修改angular.json配置，找到projects -> [你的项目名] -> architect -> server -> options -> assets，添加以下配置：

  {
    "glob": "web.config",
    "input": "./server-config",
    "output": "./"
  }
  

• 重新执行构建命令ng build --configuration production && ng run [你的项目名]:server:production，此时web.config会自动复制到dist/server目录下，不会被覆盖。

二、SSR模式下正确的web.config配置 #

SSR依赖Node.js运行，web.config需要配置iisnode托管Node服务，而非纯静态文件配置。示例配置如下：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <handlers>
      <!-- 配置iisnode处理Node.js入口文件 -->
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <!-- 所有请求转发到Node服务入口 -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^main.js\/debug[\/]?" />
        </rule>
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}" />
        </rule>
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
          </conditions>
          <action type="Rewrite" url="main.js" />
        </rule>
      </rules>
    </rewrite>
    <!-- 设置Node.js环境变量 -->
    <iisnode node_env="production" />
    <!-- 确保静态资源可访问 -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

注意：替换main.js为你Angular Universal生成的实际入口文件名（可能是server.js，取决于你的配置）。

三、排查报错根源（不止web.config） #

• 本地验证SSR可用性：在dist/server目录下执行node main.js，访问http://localhost:4000，如果本地运行正常，说明代码无问题，问题出在Azure配置；如果本地也报错，先解决代码或构建问题。
• Azure应用服务配置检查：
  • 启动命令：在Azure门户的应用服务 -> 配置 -> 常规设置中，设置启动命令为node main.js（对应你的入口文件）。
  • Node版本：应用设置中添加WEBSITE_NODE_DEFAULT_VERSION，值为你项目使用的Node版本（比如18.x），避免版本不兼容。
  • 路径设置：确保Azure指向的是dist/server目录，而非browser目录。
• 查看Azure日志：在应用服务 -> 日志流中查看实时报错信息，精准定位问题（比如端口占用、依赖缺失、路由错误等）。

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