如何在Azure App Service运行Angular 17 Universal SSR的main.js并映射端口

1. 设置Azure App Service启动命令 #

Azure需要明确启动SSR服务的指令，操作步骤如下：

• 登录Azure门户，打开你的App Service实例
• 左侧菜单选配置 > 常规设置
• 在启动命令栏输入：node dist/[你的项目名称]/server/main.js

  替换[你的项目名称]为实际项目名，确保路径和你部署到Azure的server文件夹路径匹配，比如项目名是my-angular-app，就写node dist/my-angular-app/server/main.js

• 点击保存，App Service会自动重启应用

2. 调整端口监听逻辑 #

Angular Universal默认监听4000端口，但Azure会自动管理端口映射，需确保代码兼容环境变量：

• 打开项目的server.ts文件，修改端口监听代码：

  const PORT = process.env.PORT || 4000;
  app.listen(PORT, () => {
    console.log(`Node Express server listening on http://localhost:${PORT}`);
  });
  

  配置后，Azure会自动将外部域名请求转发到应用监听的端口，无需手动绑定localhost:4000。

3. 验证部署文件结构 #

确保部署到Azure的文件结构正确，需包含：

• dist/[项目名]/browser：前端静态资源文件夹
• dist/[项目名]/server：SSR服务端代码文件夹（包含main.js）
  可通过Azure App Service的高级工具 > Kudu > 调试控制台 > CMD查看目录，确认路径无误。

4. 查看日志排查问题 #

若SSR仍未生效，通过日志定位问题：

• 在App Service左侧菜单选日志流，实时查看应用启动日志
• 或通过Kudu的LogFiles目录查看详细错误信息，排查路径错误、依赖缺失等问题

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