使用发布管理和 angular-cli 持续将 Angular2 应用程序部署到 Azure Web 应用程序

Question

我目前正在开发一个 Angular2 应用程序，想要使用 azure 发布管理器配置持续集成和持续部署。

到目前为止我所做的工作：CI 和 CD 到 WebApp，home/site/wwwroot 包含源文件（无 node_modules）。

事情不工作：应用程序无法启动。浏览 URL 会看到占位符（例如“正在加载...”）。在我的本地计算机上，我会调用

npm install

，然后调用

npm start

，后者又调用

tsc && concurrently "tsc -w" "lite-server"

。据我了解，这对于开发环境来说很好，但不应该在生产中使用。

我尝试过的事情：

1. 将

   npm install

   添加到构建步骤会导致非常长的构建时间（因为要下载软件包）和很长的部署时间（因为软件包数量较多）
2. 添加

   npm install --production

   缩短了构建和部署时间，但在目标机器上运行

   npm start

   失败，因为缺少一些包（包含在 DevDependency 中）
3. 使用控制台在目标机器上执行

   npm install

   和

   npm start

   似乎可以工作，但无法自动化

所以问题是：

1. 在 Azure Web 应用程序上构建和部署 Angular2 应用程序的正确方法是什么？
2. 如何处理node_modules？

提前谢谢您。

更新：当我切换到 Angular-cli 时，事情变得更加清晰了。在我的开发机器上，我使用“ng build”和“ngserve”在本地运行。对于部署，我使用“ng build -prod”并将创建的“dist”目录的内容部署到生产环境。但是，这仍然是一种解决方法，因为我无法让构建代理执行这些步骤。我尝试将 angular-cli 引用移至“依赖项”，然后在代理上调用“npm install”和“ng build -prod”以获取“dist”文件夹。然后，我的部署配置会将 dist 文件夹的内容复制到 Web 应用程序。然后“ng build -prod”步骤失败

“ng”不被识别为内部或外部命令

我知道我无法在构建代理上安装和运行任何包，但我真的很想使用 angular-cli 来构建应用程序，因为它包含 webpack。有没有可能让这个按照描述的方式工作？

Answer 1

您可以利用使用 Git 部署的 Azure Web 应用程序的自定义部署脚本来实现您的要求。

特别是对于 Angular2，我们应该在

package.json

文件中进行一些修改，以使 Angular2 成功部署到 Azure Web Apps。

1. 将

   devDependeccies

   部分中的所有依赖模块移至

   dependencies

   部分。
2. 使用

   "postinstall": "typings install && tsc"

   代替

   "postinstall": "typings install"

   。

对于问题 2，您不必将

node_modules

文件夹与您的项目一起推送。如果您在

package.json

的依赖项中声明了它，那么 kudu 将克隆您的项目并运行

npm install –production

下载正确的内容。