使用VSTS将Angular2应用程序从GitHub部署到Azure的WebApp

2 年 ago

清, 宇

2 minutes

目标

以下是创建前端应用程序的Angular2，将源代码保存在GitHub上，并解释一系列操作步骤以利用Azure的PaaS服务App Service来托管应用程序。

以下是使用的服务。

Visual Studio Team Services (VSTS) – 別名Visual Studio Online

准备Angular2应用程序的源代码。

在GitHub上创建一个分支。

在这个阶段，我们将创建一个存储Angular 2应用程序源代码的仓库和分支。但是，如果已经存在一个仓库和分支，您也可以使用现有的，那么您可以跳过这一步。

我使用了一个名为demo的现有Git仓库。我在其中创建了一个名为angular2-demo的新分支。虽然分支名称可以是master，但为了避免混淆，我决定将其命名为angular2-demo。

在本地的demo仓库中移动到以下命令后，执行。

切换到并创建名为angular2-demo的新分支

在本地的demo存储库中创建了一个新的angular2-demo分支。
接下来，我们将创建一个angular的HelloWorld应用程序。

使用 Angular CLI 制作一个简单的 HelloWorld 应用程序。

假设Angular CLI已经安装好了，我们继续进行下去。

首先要创建一个应用程序。使用以下命令生成应用程序。

ng new helloworld –使用内联样式 –使用内联模板 –跳过测试

上述命令中的 “–inline-style –inline-template –skiptest” 是选项，用于阻止组件的样式和HTML模板分别生成。只用 “ng new helloworld” 也可以，但为了尽可能明了，我们决定限制生成的文件数量。

以下是命令执行的结果。

现在，Angular应用的准备工作已经完成。接下来，将HelloWorld应用程序的源代码暂时保存在GitHub仓库中。

暂时将其推送至GitHub仓库。

在这个阶段，先将文件添加到Git仓库并进行提交，然后再进行推送（关于git add和git commit命令的详细说明请省略）。
由于angular2-demo分支仅存在于本地，所以下面的推送命令将在GitHub仓库中创建angular2-demo分支，并上传上一步创建的HelloWorld应用程序的源代码。

推送代码到远程仓库的angular2-demo分支，并设置为上游分支。

现在已经完成了源代码的基础。从这里开始，我们将逐步进行一些变更。

将web.config添加到项目中

在Azure的Web App中，必须添加一个特定于.NET的配置文件，称为web.config。请参考下方的屏幕截图，将web.config文件添加到HelloWorld应用程序中。

这里是web.config的内容。

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
            <rule name="redirect all requests" stopProcessing="true">
                <match url="^(.*)$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                </conditions>
                <action type="Rewrite" url="index.html" appendQueryString="true" />
            </rule>
        </rules>
    </rewrite>
    </system.webServer>
</configuration>

此web.config文件已配置为将所有针对Azure Web App的HTTP请求重定向到index.html文件。该index.html文件是Angular应用的主体。

接下来，需要进行设置以确保在构建时正确地复制此web.config文件。

修改angular-cli.json文件，以便复制web.config文件。

angular-cli.json是指定使用Angular CLI（ng命令）时的各种设置的文件。
通过在此添加web.config作为静态资源，可以将其配置为构建时的分发的一部分。

请根据下方的屏幕截图进行更改。

现在，构建后，web.config文件将被复制到应用程序的根文件夹中。

然后，我们将添加一个新的生产环境构建脚本（命令）。

将用于生产环境的构建脚本添加到package.json中。

这一步骤并非必需，完全可以使用已定义的名为build的脚本，没有任何问题。然而，为了在稍后设置VSTS构建定义时更加清晰明了，我们将另外设置一个新的命令，与已经设置的命令不同。

根据以下屏幕截图为参考，我们将添加一个名为build-prod的新的npm命令脚本。

我們通過添加-prod選項來生成用於生產環境的代碼。

接下来，执行新增的build-prodscript并确认生成的代码。

在本地执行生产环境的构建脚本，以确认输出。

请按照上述步骤手动执行预先设定的`build-prod`命令。

运行“npm run build-prod”的构建命令。

在上面的屏幕截图中，可以看到一个名为dist的文件夹已被创建。这是存储生产环境文件的文件夹。请记住，在后续配置VSTS的构建定义时，这将再次提到，请牢记。

接下来，暂时将正式环境放一边，先确认本地开发环境。

在本地开发和运行HelloWorld应用程序。

使用Angular CLI创建Angular应用程序的开发非常简单。只需执行以下命令即可。

npm 启动

使用Angular CLI进行构建后，将输出保存在内存中，并运行轻量级的Web服务器来托管HelloWorld应用程序。Angular CLI的命令`ng serve`执行这个一系列的操作，对应于`start`脚本（请在`package.json`中搜索`”start”`）。

当在浏览器中请求localhost:4200时，将加载HelloWorld应用程序的页面。

那么，我们来仿照开发循环，加入一些简单的更改来看看。

由于ng serve的作用，它可以自动检测到文件的更改并自动进行构建。

可以确认变更已经生效。

这样，Angular2的HelloWorld应用程序就完成了。我将更改推送到GitHub仓库。

推送 Git

接下来，我们将创建一个用于托管HelloWorld应用的Azure App Service。

准备Angular2应用程序的主机

创建Azure App Service

可以重新利用现有的Azure App Service，因此此步骤是可选的。我使用个人Hotmail地址创建了一个免费的Azure订阅，创建了一个名为tw-angular01的App Service。

暂不详述此任务的详细信息。下方的截图是在本文中使用的App Service。关于App Service Plan，由于Angular应用是静态应用程序，所以免费版（与其他用户共享的较弱虚拟机）已足够。

现在可以准备好作为部署目标的Azure App Service。

接下来，我们将进入一系列关于设置Visual Studio Team Services（VSTS）构建定义的工作。首先，我们要开始设置VSTS与GitHub的协作。

准备用于托管部署Angular2应用的构建定义。

设置 Service Endpoint 以连接 GitHub 的 VSTS。

在这一系列步骤中有两个前提条件。

我已经在VSTS内创建了想要使用的项目。

VSTS以前又称为Visual Studio Online。如果您还没有账户，可以使用Microsoft帐户（例如：hotmail、outlook.com）等邮箱地址来新建一个账户。
关于项目，可以是现有的项目，也可以是默认提供的项目，但我创建了一个名为samples的项目。

VSTS的网址：https://www.visualstudio.com/vso/

一旦准备好VSTS项目后，按照以下截图的参考，我们将进入GitHub服务连接的新建界面。

请在新的服务终端点下拉菜单中选择GitHub。

如果这样做，就会显示下面这样的对话框。

按下「授权」按钮，根据指示在单一登录中授予权限。
连接名称可以任意，但我选择了“githubyoshiwatanabe”，因为我将在以后再次使用它，所以选择了一个易于理解的名称。

使用这个创建了VSTS和GitHub之间协作所需的服务连接（服务端点）。

然后创建VSTS的构建定义。

创建新的VSTS构建定义

我不会详细介绍如何创建VSTS的新建构建定义。当您选择顶部的Build ＆ Release菜单时，您会知道如何操作。我给它起了一个名字叫samples-angular-cli-CI。

因为我们将在下面详细解释，所以现在即使是空的状态也可以添加到构建定义中的步骤中。

只要在构建定义列表中显示与下面的屏幕截图类似的状态，就表示已完成。

接下来，您需要根据下面的屏幕截图，按照顺序设置一个包含三个构建步骤的构建定义。

首先，在构建定义中指定从哪里下载源代码。

构建定义中的”Get Source”步骤使用GitHub。

在这里，我们将使用先前设置的VSTS和GitHub进行协作的服务连接。

在选择源代码时，您可以选择GitHub，并指定存储库和分支。这里指定了一个名为angular2-demo的分支，但您也可以选择其他分支，如master等（当然，前提是在该分支上有angular2应用程序）。

下面是从相关的GitHub仓库和分支的角度来看的。为了以防万一，我会先确认一下内容。

从这里开始，我们将逐步设置三个构建步骤。首先是下载npm包的步骤。

设置第一个npm安装步骤

参考以下屏幕截图，设置执行npm install命令的步骤。需要注意的是，在Working folder with package.json（包含package.json的工作文件夹）字段中指定正确的路径。

接下来，我们将添加构建HelloWorld的步骤。

设置第二个npm自定义步骤

Angular应用可以通过执行npm的脚本来构建。通过选择自定义命令，可以执行任意的脚本。在这里，我们通过运行之前配置的build-prod脚本来生成生产环境的输出。

以下是package.json中的build-prod脚本，确保它等同于Angular CLI命令ng build -prod。

这样就设置了一个操作步骤，即从GitHub下载源代码，然后安装npm包，最后构建HelloWorld应用程序。

最后只需将构建好的HelloWorld应用部署到Azure的App Service上。

最后一步是设置将应用部署到Azure App Service。

选择正确的Azure订阅并指定所需的应用服务。在“Package or Folder”字段中，特别注意指定helloworld/dist文件夹。确保该文件夹包含名为“dist”的子文件夹。此文件夹会在执行ng build时自动生成。如果在本地执行ng serve，则不会生成此文件夹（而是将构建文件保存在内存中）。