Bluemix
ibmcloud
angular-cli

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

やりたいこと

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

色々実験した結果、IBM Cloudのツールチェーンを使えば実現できたようなので、その忘備録になります。もっと、良いやり方があるかもしれませんが、取り敢えずは一本通ったという事で。下記の記事を大いに参考にさせていただいています。
- Bluemix DevOps で Angular をデプロイする
私が試している中、幾つか、異なる作業があったので、「 :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ランタイム環境」を選択
スクリーンショット 2018-08-15 20.31.08.png

「アプリ名」や「ホスト名」などを入力して、「作成」を押下
スクリーンショット 2018-08-15 20.31.40.png

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

「概要」のセクションを開く
スクリーンショット 2018-08-15 20.36.02.png

「継続的デリバリー」の「有効化」を押下
スクリーンショット 2018-08-15 20.37.53.png

「ツールチェーン名」などを確認
スクリーンショット 2018-08-15 20.39.03.png

「ツール統合」の「GitリポジトリーおよびIssueトラッキング」では、「リポシトリー・タイプ」に「新規作成」を選択
スクリーンショット 2018-08-15 20.39.25.png

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

3. IBM Cloudで、Delivery pipelineの構成

「継続的デリバリー」の「ツールチェーンの表示」を押下
スクリーンショット 2018-08-15 20.43.12.png

新しいタブで、ツールチェーンが表示されるので、「Delivery pipeline」のアイコンを押して、Delivery pipelineを開く
スクリーンショット 2018-08-15 21.30.05.png

Build stageの歯車アイコンを押して、設定を開く
スクリーンショット 2018-08-15 21.33.25.png

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

スクリーンショット 2018-08-15 21.25.57.png

ビルドスクリプトに以下を入力する。
:exclamation:ハマりポイント 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/

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

新しい雛形を作成

ng new my-great-angular-app

フォルダに移動

cd my-great-angular-app/

app.jsファイルを、以下の内容で、プロジェクトのルートに、新規に作成。
:exclamation:ハマりポイント 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を以下の内容で新規に作成。こちらも、場所はプロジェクトのルート。
:exclamation:ハマりポイント 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"

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

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

スクリーンショット 2018-08-15 20.44.14.png

SSHの接続情報をコピー
スクリーンショット 2018-08-15 20.46.29.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. アプリケーションを確認

スクリーンショット 2018-08-15 21.37.03.png

まとめ

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