使用Angular CLI创建的应用程序，通过IBM Cloud的工具链进行部署

2 年 ago

文, 翔

2 minutes

想做的事情

DevOps的な事をしたい

经过各种实验的结果，我觉得使用IBM Cloud的工具链可以实现，所以这里是我做的备忘录。可能还有更好的方法，但总体来说，这个方法可行。参考了下面的文章：在Bluemix DevOps上部署Angular。

在我尝试的过程中，有一些不同的步骤，我将它们作为”问题点”记录下来。

开发环境

10.13.6

Node:

10.8.0

Angular CLI

6.1.3

Git

2.16.2
IBM CloudのGitにssh公開鍵を登録して、SSH接続が出来るように設定しておく

整体的趋势

确认应用程序

在IBM Cloud上，构建一个Node.js的Cloud Foundry应用。

登入IBM云

登入IBM云端

在IBM Cloud上搭建工具链。

设定「交付管道」，然后点击「创建」。

3. 在IBM云上，配置交付流程。

选择npm作为构建类型

在构建脚本中输入以下内容。
出现错误信息“NODE_VERSION必须大于等于8.10”，因此我指定了8.10作为版本。

#!/bin/bash
export NVM_DIR=/home/pipeline/nvm
export NODE_VERSION=8.10
export NVM_VERSION=0.33.2

npm config delete prefix \
  && curl https://raw.githubusercontent.com/creationix/nvm/v${NVM_VERSION}/install.sh | sh \
  && . $NVM_DIR/nvm.sh \
  && nvm install $NODE_VERSION \
  && nvm alias default $NODE_VERSION \
  && nvm use default \
  && node -v \
  && npm -v
npm install -g @angular/cli

npm install
ng build --prod --aot
rm -rf node_modules/

使用Angular CLI创建应用程序。

创建一个新的模板

ng new my-great-angular-app

进入文件夹

cd my-great-angular-app/

在项目根目录下，使用以下内容创建名为app.js的新文件。
需要注意的是，app.use的参数部分必须包含/dist/my-great-angular-app和生成的文件夹路径，否则无法正常运行。

// This application uses express as its web server
// for more info, see: http://expressjs.com
var express = require('express');

// cfenv provides access to your Cloud Foundry environment
// for more info, see: https://www.npmjs.com/package/cfenv
var cfenv = require('cfenv');

// create a new express server
var app = express();

app.use(express.static(__dirname + '/dist/my-great-angular-app'));

// get the app environment from Cloud Foundry
var appEnv = cfenv.getAppEnv();

// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {

    // print a message when the server starts listening
  console.log("server starting on " + appEnv.url);
});

请使用以下内容新建manifest.yml文件。同样，请将其放在项目的根目录下。
注意事项：根据您创建应用程序所在的地区，您需要更改domain字段。请参考：dw Answers。

applications:
- name: my-great-angular-app
  memory: 128M
  buildpack: sdk-for-nodejs
  host: my-great-angular-app
  domain: mybluemix.net

在package.json中添加express和cfenv模块。

npm install express cfenv --save

只需要一种选项，将以下内容用中文进行翻译：编辑 package.json 中的 start 部分。

"start": "node app.js"

将应用程序远程推送

回到工具链，点击“Git”图标，打开Git。

使用上述的SSH连接信息进行push操作。

git remote rename origin old-origin
git remote add origin git@git.ng.bluemix.net:user_name/my-great-angular-app.git
git push -u origin --all
git push -u origin --tags

6. 确认应用程序

总结

通过使用IBM Cloud的工具链，我们现在能够开发基于DevOps的应用程序。当我们修改代码并将其推送到远程时，这将触发应用程序的部署并进行更新。