Azure部署Node.js Angular应用空白页及静态内容超限问题

• 检查部署日志：进入Azure门户的Static Web App资源，打开「部署」选项卡，查看最新部署日志，排查是否存在依赖安装失败、构建命令执行错误等问题。
• 确认构建输出路径：检查GitHub Actions工作流文件（.github/workflows/azure-static-web-apps-*.yml）中的output_location参数，确保指向Angular项目的构建输出目录（默认是dist/<项目名称>），比如output_location: dist/my-angular-app。
• 配置单页应用路由：在项目根目录创建staticwebapp.config.json，添加路由重写规则避免刷新404：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

• 排查浏览器控制台错误：打开网站按F12，查看控制台是否有404资源加载失败或JS执行报错，确认静态资源路径是否正确。

• 配置静态路由规则：
  • Windows环境：在项目根目录添加web.config文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular 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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• Linux环境：添加.htaccess文件：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• 设置正确的启动命令：在Azure门户的App Service「配置」->「常规设置」中，设置启动命令为npx serve -s dist/<项目名称>（若无需SSR，仅静态托管）。
• 优化静态内容大小（解决构建警告，避免加载异常）：
  • 强制使用生产构建：部署时执行ng build --configuration production，开启代码压缩和树摇。
  • 启用懒加载：拆分Angular模块，减少初始包体积。
  • 开启资源压缩：在angular.json中设置optimization: true，自动压缩图片、CSS、JS资源。
• 验证部署文件完整性：通过App Service的「高级工具」->「Kudu」->「调试控制台」，查看site/wwwroot目录，确认dist下的所有静态资源已成功上传。

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