在Azure上部署Angular 5 build：ssr

Question

我已经从这里找到的角度通用模板开始构建了我的项目： Universal-starter

我正在尝试将ssr构建部署为azure Web应用程序。我的代码在VSTS上。

在我的本地计算机上，我可以运行以下命令：

1. npm install
2. npm run build:ssr。这将产生dist文件夹。
3. 然后，我可以将dist文件夹复制到其他位置，并使用以下命令运行
4. node server.js

该应用程序在本地计算机上的端口4000上启动。

因此，按照上述步骤，我在VSTS上创建了一个构建过程，其中包含以下任务：

1. 运行的npm任务 npm install
2. 运行的npm任务 npm run build:ssr
3. 具有以下配置的azure应用程序服务部署任务：
   • 包文件夹：dist /
   • web.config参数：-Handler iisnode -NodeStartFile server.js -appType节点

上面的过程成功运行，但是当我导航到https://my-site-name.azurewebsites.net/时，无法访问该站点。

如何在Azure上成功部署Angular 5 SSR？

更新： 由于此NodeJS-EmptySiteTemplate在azure上运行而没有错误，因此我对该项目进行了以下更改：

1. 该服务器正在侦听process.env.PORT | 8080
2. 我在那里缺少一个web.config文件。我将相同的Web配置文件放在wwwroot中。

但是我没有得到：“由于发生内部服务器错误，因此无法显示该页面。”

Answer 1

我建议您使用当前目录作为工作文件夹，而不是添加其他dist文件夹 ( const DIST_FOLDER = join(process.cwd(), 'dist');)。

您可以启用该应用程序服务的诊断日志并检查详细日志，它仍然会在 中查找索引视图D:\home\site\wwwroot\dist\dist\browser，因此它不正确并且会抛出 500 错误。

顺便说一句：端口是 80 ( process.env.PORT) 而不是 4000。

更新：

需要文件夹server.ts中的模块文件dist，因此仅更改DIST_FOLDER是行不通的。简单的方法是将 server.js 放在 dist 文件夹中（不要修改 server.ts）。

简单步骤：

1. 打开 webpack.server.config.js
2. 替换路径：path.join(__dirname, 'dist')到path:__dirname
3. NPM 安装任务
4. NPM 自定义任务（运行 build:ssr）
5. 复制文件任务（源文件夹：$(Build.SourcesDirectory)/dist；内容：**；目标文件夹$(Build.ArtifactStagingDirectory)/app/dist：）
6. 复制文件任务（源文件夹：$(Build.SourcesDirectory)；内容：（server.js prerender.js每行一个）
7. Azure 应用服务部署任务（包或文件夹：$(Build.ArtifactStagingDirectory)/app；Webconfig 参数-Handler iisnode -NodeStartFile server.js -appType node：）