Angular2 - 使用Bitbucket(或其他GIT仓库)连续部署Azure

Question

目标是在提交repo中的更改后立即在Windows Azure中进行两次自动部署.

这是我做的步骤

1. 下载Angular2快速入门(确保它在本地运行)
2. 推送回购中的文件(Bitbucket)
3. 在Azure中配置连续部署(在Azure门户中使用Bitbucket集成)

在Azure中配置持续部署后,Azure会自动在repo中部署最新内容并失败(请参阅下面的azure部署日志)

我在互联网上搜索了一段时间如何做到这一点.我不想使用Visual Studio,我只想使用VS Code.

是否有人可以一步一步地指导这样做？

TIA

更新 - 我实际上使用的是Angular-CLI样板,而不是angular-quickstart.这是package.json

{
  "name": "my-webapp",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular2-material/button": "^2.0.0-alpha.5-2",
    "@angular2-material/core": "^2.0.0-alpha.5-2",
    "@angular2-material/toolbar": "^2.0.0-alpha.5-2",
    "@angular2-material/icon": "^2.0.0-alpha.5-2",
    "@angular2-material/sidenav": "^2.0.0-alpha.5-2",
    "@angular2-material/list": "^2.0.0-alpha.5-2",
    "@angular2-material/card": "^2.0.0-alpha.5-2",
    "@angular2-material/input": "^2.0.0-alpha.5-2",
    "@angular2-material/radio": "^2.0.0-alpha.5-2",
    "@angular2-material/checkbox": "^2.0.0-alpha.5-2",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.8",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "1.8.10",
    "typings": "0.8.1"
  }
}

Answer 1

我们应该在package.json文件中进行一些修改,以使应用程序成功部署到Azure Web Apps.

1. 正如https://github.com/angular/quickstart#prerequisites上的描述,我们需要在Azure上指定nodejs和npm verion.在Azure站点的门户网站上的" 配置"选项卡上,将其修改WEBSITE_NODE_DEFAULT_VERSION为更高版本,例如5.4.0.
2. 在package.json根目录的文件中,添加以下部分以指定Web应用程序运行时的nodejs版本:"engines":{"node":"5.4.0"},.
3. 将"devDependencies"部分中的以下模块复制到"dependencies"部分package.json: "concurrently": "^2.0.0", "typescript": "^1.8.10", "typings": "^1.0.4",
4. 修改"脚本"部分中的npm脚本package.json,我们需要将所有nodejs modules命令更改为Auzre目录体系结构上的相对本地路径: "lite": "node_modules\\.bin\\lite-server", "tsc": "node_modules\\.bin\\tsc", "concurrently": "node_modules\\.bin\\concurrently", "tsc:w": "node_modules\\.bin\\tsc -w", "typings": "node_modules\\.bin\\typings",
5. 创建一个名为" web.config显示Azure部署任务" 的空文件web.config,使用您在此应用程序中不需要的重写mod 自动创建.
6. 部署之后,您可以登录到Kudu控制台站点或VSO,进入应用程序的根目录,即"D:\home\site\wwwroot\"运行命令npm start编译应用程序.

此外,您可以利用VSO在Azure上调试您的应用程序,请参阅Visual Studio 2015和Microsoft Azure同步文件,服务器/本地以获取更多信息.

如有任何疑问,请随时告诉我.