如何在Azure上部署基于Universal Starter的Angular 5 build:ssr项目？

嘿，我来帮你捋清楚从VSTS部署到Azure Web App的完整流程，一步一步来，保证你能搞定：

1. 先搞定Azure Web App的基础配置 #

首先登录Azure门户，找到你要部署的Web App，先做两个关键配置：

• 设置Node.js运行时：进入「配置」>「常规设置」，把运行时堆栈改成Node.js，版本选和你本地开发一致的（比如18.x，别选太新或太旧的，避免依赖兼容问题）。
• 开启「始终开启」：同样在常规设置里，把这个选项打开，防止Web App闲置后冷启动变慢，对SSR应用体验影响很大。
• （重点！）修改你的server.js端口配置：Azure不会让你用本地的4000端口，它会通过环境变量PORT指定端口。所以把server.js里的端口代码改成：

  const port = process.env.PORT || 4000;
  

  这样本地测试还是用4000，部署到Azure会自动适配它的端口。

2. 完善VSTS的构建流程（确保产物正确） #

假设你已经有了npm install和npm run build:ssr的步骤，现在要把正确的文件发布到工件库：

• 添加「发布构建工件」任务，配置：
  • 工件名称随便填（比如drop），发布位置选「Azure Pipelines」。
  • 要发布的路径：得包含server.js、package.json、整个dist文件夹。比如填 $(System.DefaultWorkingDirectory)/** 或者明确指定路径：$(System.DefaultWorkingDirectory)/server.js;$(System.DefaultWorkingDirectory)/package.json;$(System.DefaultWorkingDirectory)/dist/*，确保这些文件都能被传到部署环节。
  • （可选但推荐）如果不想让Azure重新安装依赖，可以在构建流程里加一步npm install --production，然后把node_modules也包含到发布路径里，这样部署速度会更快。

3. 添加VSTS部署任务到Azure Web App #

在构建流程的最后，添加官方的「Azure Web App部署」任务，配置这些关键项：

• Azure订阅：选择你关联的Azure订阅，如果还没关联，点击「管理」去添加服务连接（跟着向导走就行，很简单）。
• 应用类型：选「Web App on Windows」或者「Web App on Linux」，对应你的Web App类型。
• 应用名称：选中你要部署的目标Web App。
• 包或文件夹：填$(Build.ArtifactStagingDirectory)/drop（就是你刚才发布的工件路径）。
• 启动命令：填node server.js——这是告诉Azure怎么启动你的SSR应用，别写错路径！如果你的server.js在dist文件夹里（比如universal-starter有些版本会把server.js生成在dist/server里），那就要改成node dist/server/server.js，根据你本地build后的结构来调整。

4. 测试部署&排障 #

部署完成后，点击Azure Web App的「浏览」按钮看看应用能不能正常运行。如果出错，去「监控」>「日志流」里看错误信息，常见坑点：

• Node版本不匹配：检查Azure的Node版本和本地一致。
• 启动命令路径错误：对比本地dist里的server.js位置，调整启动命令。
• 依赖缺失：如果没把node_modules传上去，Azure会自动执行npm install，但如果有私有包或者版本问题，可能会失败——这时候最好在构建时就装好production依赖，一起传上去。

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