Angular应用部署Azure App Service成功后浏览器显示404错误求助

问题描述 #

将Angular应用部署到Azure App Service Web App，部署状态显示成功，但浏览器访问始终返回404 Not Found错误。相关日志如下：

/home/LogFiles/2023_06_08_lw0sdlwk0005Y6_default_docker.log
2023-06-08T10:38:05.458442645Z   requireStack: [ '/home/site/wwwroot/node_modules/.bin/ng' ]
2023-06-08T10:38:05.458447245Z }
2023-06-08T10:38:05.467645994Z
2023-06-08T10:38:05.467666994Z Node.js v18.16.0
2023-06-08T10:38:05.589260559Z npm notice
2023-06-08T10:38:05.590561180Z npm notice New minor version of npm available! 9.6.4 -> 9.7.1
2023-06-08T10:38:05.597526393Z npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.7.1>
2023-06-08T10:38:05.600323238Z npm notice Run `npm install -g npm@9.7.1` to update!
2023-06-08T10:38:05.600345538Z npm notice
/home/LogFiles/2023_06_08_lw0sdlwk0005Y6_docker.log
2023-06-08T11:03:52.503Z INFO  -  Digest: sha256:b1dc34abcaac6f00dd945840a5bc6367123b63b56465a5ec20c316eca98e569e
2023-06-08T11:03:52.504Z INFO  -  Status: Image is up to date for mcr.microsoft.com/appsvc/node:18-lts_20230502.1.tuxprod
2023-06-08T11:03:52.564Z INFO  - Pull Image successful, Time taken: 0 Minutes and 0 Seconds
2023-06-08T11:03:52.814Z INFO  - Starting container for site
2023-06-08T11:03:52.816Z INFO  - docker run -d --expose=8080 --name smartinventorytestapp_2_3ea52a68 -e WEBSITE_SITE_NAME=smartinventorytestapp -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=smartinventorytestapp.azurewebsites.net -e WEBSITE_INSTANCE_ID=b11066f3267a7e6498984ab6d3b7a2745eba6596408cd3418260e10128c4799c -e NODE_OPTIONS=--require /agents/nodejs/build/src/Loader.js -e WEBSITE_USE_DIAGNOSTIC_SERVER=True appsvc/node:18-lts_20230502.1.tuxprod pm2 serve /home/site/wwwroot --no-daemon --spa
2023-06-08T11:03:52.816Z INFO  - Logging is not enabled for this container.Please use https://aka.ms/linux-diagnostics to enable logging to see container logs here.
2023-06-08T11:04:01.385Z INFO  - Initiating warmup request to container smartinventorytestapp_2_3ea52a68 for site smartinventorytestapp
2023-06-08T11:04:20.272Z INFO  - Waiting for response to warmup request for container smartinventorytestapp_2_3ea52a68. Elapsed time = 18.887329 sec
Ending Log Tail of existing logs ---
Starting Live Log Stream ---
2023-06-08T11:04:27.567Z INFO  - Container smartinventorytestapp_2_3ea52a68 for site smartinventorytestapp initialized successfully and is ready to serve requests

解决方案 #

• 确认部署内容：确保部署到Azure的是Angular编译后的dist/[你的应用名称]文件夹下的所有文件，而非整个项目源码。如果部署的是项目根目录，pm2无法找到正确的静态文件入口，会导致404。
• 修正pm2启动路径：日志中启动命令为pm2 serve /home/site/wwwroot --no-daemon --spa，如果构建产物实际在/home/site/wwwroot/dist/[你的应用名称]，需修改启动命令为pm2 serve /home/site/wwwroot/dist/[你的应用名称] --no-daemon --spa。可在Azure门户的“配置”→“常规设置”中更新启动命令。
• 增强SPA路由配置：Angular是单页应用，需确保所有路由请求都重定向到index.html。可在构建产物根目录添加staticwebapp.config.json文件，内容如下：

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

• 检查CI/CD部署流程：若使用GitHub Actions、Azure DevOps等工具，确认部署任务是将dist/[你的应用名称]下的文件复制到Azure App Service的/home/site/wwwroot目录，而非复制整个项目。

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