Angular CLIで作成したアプリケーションを、IBM Cloudにツールチェーンを使ってDeployする

#やりたいこと
- IBM Cloudを使いたい
- Angular CLIを使ってアプリケーションを作りたい
- DevOps的な事をしたい

色々実験した結果、IBM Cloudのツールチェーンを使えば実現できたようなので、その忘備録になります。もっと、良いやり方があるかもしれませんが、取り敢えずは一本通ったという事で。下記の記事を大いに参考にさせていただいています。
- [Bluemix DevOps で Angular をデプロイする](https://qiita.com/kwnarita/items/1edae128e8d0da123ad3)
私が試している中、幾つか、異なる作業があったので、「 :exclamation:ハマりポイント」として記述しています。

#開発環境
- Mac OS
  - 10.13.6
- Node: 
  - 10.8.0
- Angular CLI
  - 6.1.3
- Git 
  - 2.16.2
  - IBM CloudのGitにssh公開鍵を登録して、SSH接続が出来るように設定しておく

#全体の流れ
1. IBM Cloudで、Node.jsのCloud Foundry アプリの構築
2. IBM Cloudで、ツールチェーンの構築
3. IBM Cloudで、Delivery pipelineの構成
4. Angular CLIを使ってアプリケーションを作成
5. アプリケーションをリモートにプッシュする
6. アプリケーションを確認



# 1. IBM Cloudで、Node.jsのCloud Foundry アプリの構築
IBM Cloudにログイン

カタログから「Node.jsランタイム環境」を選択
<img width="349" alt="スクリーンショット 2018-08-15 20.31.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/e3ec4435-374d-5d83-7607-98b3c50ecc86.png">

「アプリ名」や「ホスト名」などを入力して、「作成」を押下
<img width="925" alt="スクリーンショット 2018-08-15 20.31.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/77c6882b-7b77-442a-aabf-c562a150fd23.png">

# 2. IBM Cloudで、ツールチェーンの構築

「概要」のセクションを開く
<img width="194" alt="スクリーンショット 2018-08-15 20.36.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/fb6df762-c661-95c9-de27-2e58a0937793.png">

「継続的デリバリー」の「有効化」を押下
<img width="554" alt="スクリーンショット 2018-08-15 20.37.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/1e5611c0-a2b9-f485-e865-57b1c5a9b15e.png">

「ツールチェーン名」などを確認
<img width="780" alt="スクリーンショット 2018-08-15 20.39.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/44e05a9a-094b-0d49-a978-2fd001cbd4bf.png">

「ツール統合」の「GitリポジトリーおよびIssueトラッキング」では、「リポシトリー・タイプ」に「新規作成」を選択
<img width="791" alt="スクリーンショット 2018-08-15 20.39.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/8744d35a-01aa-5603-dd11-75edba278ff2.png">

「Delivery Pipeline」も設定して、「作成」を押下

# 3. IBM Cloudで、Delivery pipelineの構成

「継続的デリバリー」の「ツールチェーンの表示」を押下
<img width="559" alt="スクリーンショット 2018-08-15 20.43.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/2e679bf1-d3ff-fc34-6fc4-2d67e09fd59f.png">

新しいタブで、ツールチェーンが表示されるので、「Delivery pipeline」のアイコンを押して、Delivery pipelineを開く
<img width="189" alt="スクリーンショット 2018-08-15 21.30.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/caf94e99-280d-8e80-21b7-5b4b65bd06ce.png">

Build stageの歯車アイコンを押して、設定を開く
<img width="327" alt="スクリーンショット 2018-08-15 21.33.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/1867ad6d-5a34-5dda-0011-30ec6c55d3cb.png">

ビルダー・タイプにnpmを選択する

<img width="698" alt="スクリーンショット 2018-08-15 21.25.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/4808a598-86ab-97e4-2004-aa3e07c70327.png">

ビルドスクリプトに以下を入力する。
:exclamation:**ハマりポイント** NODE_VERSIONは8.10以上とのエラーメッセージがでたので、8.10を指定しています。

```console
#!/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/
```

# 4. Angular CLIを使ってアプリケーションを作成

新しい雛形を作成

```shell-session
ng new my-great-angular-app
```

フォルダに移動
 
```shell-session
cd my-great-angular-app/
```


app.jsファイルを、以下の内容で、プロジェクトのルートに、新規に作成。
:exclamation:**ハマりポイント** app.useの引数の部分は/dist/my-great-angular-appと生成物のフォルダまで含めないと動きませんでした。


```js
// 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を以下の内容で新規に作成。こちらも、場所はプロジェクトのルート。
:exclamation:**ハマりポイント** domainはアプリケーションを作成した時のリージョンに応じて変更する必要があります。参照：[dw Answers](https://developer.ibm.com/answers/questions/170284/deploying-app-to-different-region-in-bluemix-domai.html)

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

package.jsonに、expressとcfenvを追加する

```bash
npm install express cfenv --save
```

package.jsonのstartの部分を編集する

```json
"start": "node app.js"
```

# 5. アプリケーションをリモートにプッシュする

ツールチェーンに戻り、「Git」のアイコンを押して、Gitを開く

<img width="190" alt="スクリーンショット 2018-08-15 20.44.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/bd8d0faf-18b5-a8f0-eb0d-f0cf9007c502.png">

SSHの接続情報をコピー
<img width="393" alt="スクリーンショット 2018-08-15 20.46.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/d3acb60d-9737-6028-6915-7e0529556d07.png">

上記の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. アプリケーションを確認
<img width="836" alt="スクリーンショット 2018-08-15 21.37.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/158355/74124a92-5cdf-3d5e-55c7-2c993322b835.png">

# まとめ
IBM Cloudのツールチェーンを使って、DevOps的なアプリケーションを開発できるようになりました。コードを変更して、リモートにプッシュすると、それがトリガーになり、デプロイされているアプリケーションも更新されます。