在 IBM Cloud 上利用 Loopback 模板搭建 Angular 应用并实现自动部署（4）

look_w

Delivery pipeline 由多个可配置的阶段（stage）组成，示例工程中配置了如下四个阶段：
Stage1：从对应的Git工程中取代码在第一阶段，需要把 delivery pipeline 和 git 工程相关联，这样可以清晰看到工程的最后一次提交和工程目录。这可以利用自动生成的 Build                Stage 来实现 。通常我们会在 shell 脚本中加入如下代码，用来在输出控制台上追溯工程目录和文件结构：

1 2 3 4 5

#!/bin/bash             # your script here             echo 'directory:'            echo `pwd`             echo `ls -la`

图 5. Stage1示意图
Stage2：构建 Angular UI在自动生成的 Deploy Stage 里面，我们可以加入多个 job，也可以通过新建多个 Deploy                Stage 实现。也就是说，从这个步骤开始的几个步骤可以作为多个 job 放在一个 Deploy                Stage 中，也可以分别建立多个只有一个 job 的 stage 实现。但需要注意的是一个 stage                如果不能正确地执行完，在下一次执行时会把下属的所有 job 从头执行一遍（所以建立多个只有一个 job 的 stage 是比较好的选择）。
构建 Angular UI 时，需要先在全局安装 Angular                cli 以便执行构建命令（也可以选择在本地，也就是该 angular 工程下安装，区别在于后面的 ng                build 命令需要改成 ./node_modules/.bin/ng build）。

1 2 3 4 5 6 7 8 9 10 11 12 13

#!/bin/bash # The default Node.js version is 0.10.40 # To use Node.js 0.10.48, uncomment the following line: #export PATH=/opt/IBM/node-v0.10.48/binPATH # To use Node.js 0.12.7, uncomment the following line: #export PATH=/opt/IBM/node-v0.12/binPATH # To use Node.js 4.4.5, uncomment the following line: #export PATH=/opt/IBM/node-v4.4.5/binPATH # To use Node.js 6.7.0, uncomment the following line: export PATH=/opt/IBM/node-v6.7.0/binPATH cd ui-part npm install -g @angular/cli npm install && ng build

图 6. Stage2示意图
构建 Loopback 工程为了方便区分不同的环境和编译方式，可以通过不同的文件夹加以区分，并将 Angular 工程和 Loopback                工程分别拷贝进同一个文件夹。由于是部署在 IBM                Cloud 上的 Angular 工程，建议使用 AoT 方式进行编译，尽量减小浏览器对应用的影响。在 Angular                工程中，编译后的静态文件会生成到 ./dist 文件夹中。为了把 Angular 工程和 Loopback 工程整合在一起，将 Angular                工程构建后生成的 dist 文件夹及其中所有文件拷贝到目标文件夹（./bluemix-dev）下面的 client 目录，并将 Loopback                工程整个拷贝进目标文件夹。以便 Loopback 工程可以找到对应的前端静态页面。最后，通过 npm                install 命令，将 Loopback 工程所依赖的包安装在云环境中。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#!/bin/bash # your script here echo 'current directory: ' echo `pwd` echo `ls -la` echo 'copy files: ' if [ ! -d ./bluemix-dev/client ]; then `mkdir ./bluemix-dev/client` fi echo `cp -rf ./angular-project/dist/* ./bluemix-dev/client && rsync     -arv --exclude=package.json ./loopback-project/* ./bluemix-dev` echo 'list client files:' echo `ls -la ./bluemix-dev/client` echo `cd loopback-project && npm install`

图 7. Stage3示意图
部署 CF 应用将应用按照 manifest.yml 中的配置部署在 IBM Cloud 上
#!/bin/bash
echo `ls -la`
cf push "${CF_APP}"
图 8. Stage 概览示意图