Angular2 - 使用 Bitbucket（或其他 GIT 存储库）的 Azure 持续部署

Question

目标是在存储库中提交更改后立即在 Windows Azure 中进行两次自动部署。

这是我做的步骤

1. 下载Angular2 quickstarter（确保它在本地运行）
2. 将文件推送到 repo (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 应用程序。

1. 正如https://github.com/angular/quickstart#prerequisites 的描述，我们需要在Azure 上指定nodejs 和npm 版本。在 Azure 站点门户上的 CONFIGURE 选项卡上，将 WEBSITE_NODE_DEFAULT_VERSION 修改为更高版本，例如到5.4.0.
2. 在根目录的package.json文件中，添加以下部分来指定web应用运行时的nodejs版本："engines":{"node":"5.4.0"},。
3. 将“devDependencies”部分中的以下模块复制到package.json中的“dependencies”部分： "concurrently": "^2.0.0", "typescript": "^1.8.10", "typings": "^1.0.4",
4. 修改package.json中“scripts”部分的npm脚本，我们需要将所有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 并使用此应用程序中不需要的重写模块。
6. 部署完成后，您可以登录Kudu控制台站点或VSO，进入您应用的根目录"D:\home\site\wwwroot\"，运行命令npm start编译应用。

此外，您可以利用 VSO 在 Azure 上在线调试您的应用程序，请参阅Visual Studio 2015 and Microsoft Azure syncing files, Server/Local 了解更多信息。

如有任何疑问，请随时告诉我。