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

问题描述 投票:0回答:1

我目前正在开发一个 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。有没有可能让这个按照描述的方式工作?

angular continuous-integration azure-web-app-service continuous-deployment angular-cli
1个回答
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
下载正确的内容。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.