Azure Linux版Web Service部署Angular应用遇404：index.html路径求助

1. 确认部署文件的实际位置 #

Azure Web App部署后，文件默认存放路径为/home/site/wwwroot，但如果你的Pipeline部署的是Angular源码而非构建后的dist文件夹，index.html不会在这个目录下。

通过Azure门户进入高级工具 > Kudu（或直接访问https://<你的应用名>.scm.azurewebsites.net），打开Debug console > Bash，执行命令查看文件结构：

ls -la /home/site/wwwroot

如果看到src、angular.json等源码文件，说明部署的是未构建的项目，需在Pipeline中先执行构建步骤：

npm install
ng build --prod

再将dist/<你的项目名>文件夹内的所有文件部署到/home/site/wwwroot。

2. 修正pm2启动命令 #

若已确认index.html在/home/site/wwwroot下仍报错，调整启动命令：

• 使用相对路径（Web App默认工作目录为/home/site/wwwroot）：

pm2 serve . --spa --no-daemon

• 若构建文件在dist子目录，明确指定路径：

pm2 serve /home/site/wwwroot/dist/<你的项目名> --spa --no-daemon

3. 检查Web App运行时配置 #

• 确认Web App运行时为Node.js，版本与本地开发环境一致；
• 在配置 > 常规设置中填写正确的启动命令，保存后重启应用。

4. 配置单页应用路由 fallback #

Angular作为单页应用，需配置路由 fallback到index.html。在/home/site/wwwroot下创建对应配置文件：

Linux环境（.htaccess） #

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

Windows环境（web.config） #

<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>

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