【SAPUI5】SAP Continuous Integration and Deliveryを使ってみる

17809 ワード
CICD SAP scp SAPUI5 BTP scp テキストリンク

1. はじめに

この記事では、SAP Continuous Integration and DeliveryというSAP Business Technology Platform(BTP)のサービスを使って、SAPUI5アプリのCI/CDパイプラインを構築してみたいと思います。

SAPが提供するCI/CDに関するツール、ガイドには以下の3種類があります。右上にいくほど適用の難易度が上がるとともに、自由度も上がります。このうち、CI/CD service(SAP Continuous Integration and Delivery)はBTPでの設定だけでパイプラインが作成できるため、最も手軽にCI/CDを始めることができます。


DevOps with SAP: Holistic Overview and Latest News [DEV100]より引用

2. SAP Continuous Integration and Deliveryとは

SAP Continuous Integration and DeliveryはBTPのCloud Foundry環境で提供されるサービスで、Cloud Foundryにデプロイするアプリケーション向けのパイプラインを作成することができます。以下で説明する3種類のパイプラインのテンプレートが用意されています。テンプレートを使用して簡単にパイプラインを作成できる一方、目的に合ったテンプレートがない場合は使えないので自由度はそれほど高くないということになります。

2.1. サポートされているパイプライン

3つのパイプラインがサポートされています。今回はSAP Fiori in the Cloud Foundry environmentを使います。

  • SAP Cloud Application Programming Model: CAP用（Cloud Foundry環境）
  • SAP Fiori in the Cloud Foundry environment: SAP Fiori用（Cloud Foundry環境）
  • SAP Fiori in the Neo environment: SAP Fiori用（Neo環境）

2.2. SAP Fiori in the Cloud Foundry environmentのジョブ設定方法

ジョブの設定方法は2通りあります。
①Job Editorで設定
②ソースレポジトリのconfig.ymlファイルで設定

①は設定画面から入力する方式で、②はプロジェクトの中に設定ファイルを置く方法です。どちらも設定できる内容は同じなので、今回は①の方法で行います。

ジョブの設定内容

SAP Fiori in the Cloud Foundry environmentのジョブは5つのステージで構成されており、各ステージを実行するかどうかをState（ON/OFF）で指定します。なお、Buildステップは必ず実行されます。

ステージ パラメータ 設定値
Build Application Name（任意） アプリケーション名。指定しない場合はデフォルトの"ui5application"が使われる。※ここで指定した名前よりもmta.yamlで指定したapplication nameが優先される
Test State ONにした場合、テストステージが実行される。テストを実行するためにはFioriプロジェクト側にテスト用の設定が必要
Malware Scan State ONにした場合、Malware Scanが実行される
Deploy State ONにした場合、Cloud Foundryへのデプロイが行われる。以下のパラメータの設定が必要
API Endpoint Cloud FoundryのAPIエンドポイントを指定（例：https://api.cf.eu10.hana.ondemand.com）
Org Name Cloud FoundryのOrg Nameを指定（サブアカウントのOverviewで確認できる）
Space デプロイ先のSpaceを指定
Credentials Cloud FoundryにログインするためCredentials（自分のユーザ、パスワードのセット）を作成しておき、それを指定する
Upload to Transport Management Service State ONにした場合、Buildの結果をTransport Management Serviceにアップロードする。以下のパラメータの設定が必要
Node Name アップロード先のTransport Managementのノード名を指定
Service Key Transport Management用のCredentials（サービスキー）を作成しておき、それを指定する

3. やってみた内容

今回は、シンプルにSAP Fioriのパイプラインを実行することを目的とします。
実行するステップは①Build、②Test、③Malware Scan、④Deployです。
Transport Management Serviceへのアップロードについては、kanamen10さんの以下の記事で説明されています。
誰かSAP CP界隈の購買事情をなんとかしてくれ。

＜ステップ＞
1. 初期設定
2. Credentialsを作成
3. Fioriアプリを作成してGitHubにPush
4. リポジトリと接続
5. ジョブを作成して実行
6. Webhookの設定

1. 初期設定

1.1. サービスの有効化

サブアカウントのSubscriptionsから、Continuous Integration & Deliveryをサブスクライブします。

1.2. ロールの割り当て

Trust Configurationより、CICD Service Administratorのロールコレクションを自分に割り当てます。
（ロールの種類についてはこちらを参照）

1.3. サービスを実行

Go to Applicationのリンクからサービスを実行します。

2. Credentialsを作成

Cloud Foundryにログインするための認証情報を作成します。Credentialsのタブで+ボタンを押して新規作成します。

3. Fioriアプリを作成してGitにPush

3.1. Fioriアプリを作成

以下のチュートリアルのステップ4（Buildの手前）まで実行します。
Deploy Your First SAPUI5 App to Cloud Foundry

この結果、Build、Test、Deployに必要な設定がすでに入った状態のアプリが完成します。参考までに、CI/CDがどの設定を見て動いているのかについて説明します。

①Test
Testステージでは、UI5アプリのフォルダのpackage.jsonで指定されたtestスクリプトが実行されます。ここではKarmaというプラグインを使ってテストを実行するように設定されています。

Karmaはkarma.conf.jsというファイルを見に行き、テストに必要な設定を取得します。frameworksにui5が設定されているので、karma-ui5というUI5に特化したプラグインが使用されます。

karma-ui5は、特に指定がなければtestsuite.qunit.htmlというファイルをテストページとして実行します。

testsuite.qunit.htmlから参照されているtestsuite.qunit.jsファイルの中で、unit/unitTests.qunit.htmlとintegration/opaTests.qunit.htmlをテストページとして追加しています。これにより、unitフォルダ配下のQUnitテストと、integrationフォルダ配下のOPA5テストが実行されます。
Qunit、OPA5について詳しくはこちらをご参照ください。

テンプレートを使わず作成したプロジェクトなどで一からテストの設定が必要な場合は、以下のページのConfigure the Test Stageのセクションを参考にしてください。
Configure an SAP Fiori in the Cloud Foundry Environment Job with the Job Editor

②Build
Buildステージではプロジェクトのルートを指定してmbt buildコマンドが実行されます。このために必要なのはプロジェクトのルートにあるmta.yamlです。ここに、このプロジェクトに必要なモジュールやビルド時のパラメータ、使用するリソースなどが記載されています。mbt buildを実行すると各モジュールがビルドされ、Cloud Foundryにデプロイ可能なmtarファイルが作成されます。

③Deploy
DeployステージではBuildの結果できたmtarファイルをCloud Foundryにアップロードします。デプロイの前にDeployステージで指定したCredentialsを使ってCloud Foundryのスペースにログインが行われます。

3.2. ローカルでテスト

ローカルでCI/CDで実行されるのと同じテストを実行してみます。ターミナルを開き、UI5アプリのフォルダに移動してテストを実行します。

cd <UI5アプリのフォルダ名>
npm test

ターミナルにテストの結果が表示されます。

テストの結果、coverageというフォルダが作られます。このなかのindex.htmlファイルを右クリックし、Open with>Previewを選択すると、テストのカバレージが表示されます。

3.3. GitHubにPush

作成したプロジェクトをGitHubに上げます。

4. リポジトリと接続

Repositoriesのタブで+ボタンを押して新規作成します。

Name, Clone URL（GitリポジトリのURL）を入力してAddをクリックします。

5. ジョブを作成して実行

5.1. ジョブを作成

Jobsのタブで+ボタンを押して新規作成します。

以下の内容を設定し、保存します。下記以外はデフォルトのままとしています。

項目 設定値
Job Name 任意の名前
Repository ステップ4で作成したリポジトリを選択
Branch master（対象とするブランチを指定）
Pipeline SAP Fiori in the Cloud Foundry environment
Test ON
Deploy ON（Org Name, Space, Credentialsも設定）
Upload to Cloud Transport Management OFF

5.2. 実行

▷ボタンを押して実行します。


すべてのステージが正常終了しました。

※途中のステージでエラーになった場合は、後続のステージは実行されません。

5.3. デプロイされたアプリケーションを確認

アプリケーションがデプロイされ、起動しています。

中に入ってApplication RouteのURLをクリックします。

UI5アプリケーションが起動しました。

6. Webhookの設定

Webhookを使うと、GitリポジトリにPushしたタイミングでCI/CDに連携され、自動的にジョブが起動します。

6.1. Webhookの呼び出し情報を確認

Gitリポジトリから呼び出すWebhookのURLは、RepositoriesのWebhook Dataから確認できます。

6.2. Webhook連携の設定

GitリポジトリのSettingsタブから、新しいWebhookを追加します。

以下の項目を設定し、Add webhookをクリックします。

項目 設定値
Payload URL 6.1.で確認したPayload URL
Content type 6.1.で確認したContent type
Secret 6.1.で確認したSecret

6.3. アプリケーションを変更してPush

アプリケーションに少し変更を加えてGitにPushします。すると、すぐにJobが開始します。

4. おわりに

以前Jenkinsを使って一からパイプラインを構築した際は、トライアル&エラーで大変苦労したのですが、今回は一発でうまくいきました。テンプレートさえ合えば、CD/CDを始めるハードルとしてはこの上なく低いといえそうです。
一方で、例えば「FioriアプリをABAPサーバにデプロイしたい」など他の要求が出てきたときには、現状だと複数のツールを使いわけることになります。今後テンプレートの種類が拡充されていくことに期待したいです。