Amazon Web Services ブログ

SAP用のAWS DevOpsツール, パート2: SAP Fiori Apps

このブログシリーズのパート1では、SAP Cloud Platform Cloud Foundryのアプリケーションの保存とバージョン管理にAWSの開発者用ツールをどのように活用できるかを紹介しました。お客様は、Jenkinsのインスタンスやその他のインフラストラクチャを設定、管理する必要がなく、アプリケーションのビルド、テスト、デプロイを自動化できます。このサーバーレスのアプローチにより、大規模かつ高品質なソフトウェアのデリバリープロセスと変更のデプロイに集中できます。

この記事では、AWS DevOpsツールを使用して、オンプレミスやクラウド (フロントエンドのコンポーネントのみ)で稼働するSAP Fioriアプリケーションの簡略化された継続的インテグレーションと継続的デリバリー (CI/CD)のパイプラインの実装方法を紹介します。このブログのソリューションには、SAP社が提供するサンプルアプリを使用します。

統合開発環境 (IDE)にはAWS Cloud9を使用し、サンプルアプリに変更を加えます。プロジェクトのアーティファクトは、ソース管理リポジトリのAWS CodeCommitに保存されます。最終的に、デプロイメントは、AWS CodeDeployのエージェントを介して実行され、SAP移送番号や開発パッケージを指定することで、SAP移送管理とシームレスに統合できます。

The following high-level architecture of how to use AWS CodePipeline with AWS CodeBuild and AWS CodeDeploy as a serverless CI/CD toolset for your SAP Fiori frontend running on-premises or in the cloud.

前提条件

パイプラインを実装する前に、次の要件を満たしているか確認してください。

  1. SAP NetWeaver ABAP バージョン7.40以上で稼働している
  2. 一般的な開発者権限を持つSAPユーザーである
  3. SICFのパス /sap/bc/adt を有効化し、ABAP Development Tools (ADT)が利用可能である。設定の問題は、SAPトラブルシューティングガイドを参照してください
  4. AWS CodeDeployのエージェントが動作できるよう、アウトバウンドのインターネット接続とターゲットのSAPシステムとの接続性を備えたサーバーである
  5. SAP Fioriアプリケーションのための一意の名前 (例: my-sap-fiori-app)を持った、新しいAWS CodeCommitのリポジトリを作成済みである。設定方法は、SAP用のAWS DevOpsツール, パート1: Cloud Foundryアプリケーションを参照してください
  6. AWS Cloud9の開発環境が構成済みである。設定方法は、SAP用のAWS DevOpsツール, パート1: Cloud Foundryアプリケーションを参照してください

SAP Fioriのサンプルアプリケーションの作成

1. AWS Cloud9環境を起動します
2. SAP Fioriアプリケーション用に作成されたCodeCommitの空のリポジトリをクローンし、ディレクトリに移動します

$ git clone <CodeCommit repo-url>
$ cd <repo-url>

3. 次のリポジトリをクローンして、SAP Fioriの新しいサンプルアプリケーションを作成します

$ git clone https://github.com/SAP/openui5-sample-app.git

4. bashコマンドを実行して、AWS Cloud9のリポジトリ構造を変更します

$ rm -Rf openui5-sample-app/.git
$ cp -Ra openui5-sample-app/. .
$ rm -Rf openui5-sample-app/
$ npm install --global @ui5/cli
$ npm install

5. AWS Cloud9で変更されたリポジトリの構造を確認します。この構造のようになっているはずです

CodeCommit repository in AWS Cloud9

AWS Secrets Managerを使用したSAPシークレットの保存

AWS Secrets Managerを使用して、SAP環境に接続するためのシークレットとして、SAP NetWeaver ABAP環境のユーザー名、パスワード、ホスト名を保存します。

1. 次のプレーンテキスト値をシークレットに追加します。SAP環境の認証情報とSICFサービスと一致するホスト情報を渡します。認証情報の設定は、AWS Secrets Managerのドキュメントを参照してください

{
“USER”: “”,
“PASSWORD”: “”,
“URL”: “http://host:port”
}

2. シークレットに SAP_DEPLOY という名前をつけ、次へ を選択してシークレットを保存します

AWS Cloud9でビルドとデプロイ用のファイルを構成

AWS Cloud9のメニューから、”新しいファイルを作成” を選択し、CI/CDパイプラインを実行するために必要となるGitHubリポジトリのフォルダの中に次のファイルを作成します。

1. 次のコードスニペットを使って新しいファイルを作成し、‘buildspec.yml’ ファイルとして保存します

version: 0.2
 
phases:
  install:
    runtime-versions:
      nodejs: 10
      
  build:
    commands:
       - npm install --global @ui5/cli
       - npm install
       - ui5 build -a
       - npm test

reports: #New
  FioriReports: # CodeBuild will create a report group called "FioriReports".
    files: #Store all of the files
      - '**/*.xml'
    base-directory: 'junit' # Location of the reports
    #file-format: CucumberJson #Type of the report, defaults to JunitXml
    
artifacts:
  files:
    - dist/*
    - appspec.yml
    - appspec_deploy.sh
    - appspec_cleanup.sh
    - Gruntfile.js
    - package.json
	

2. 次のコードスニペットを使って新しいファイルを作成し、‘appspec.yml’ ファイルとして保存します。このファイルは、エージェントのデプロイメントのステップ、およびデプロイメントのアーティファクトをダウンロードあるいは保存する作業ディレクトリを決定します

version: 0.0
os: linux
files:
  - source: /
    destination: /codedeploy/sapfioriapp
hooks:
  BeforeInstall:
    - location: appspec_cleanup.sh
  AfterInstall:
    - location: appspec_deploy.sh
      timeout: 180

3. 次のコードスニペットを使用して新しいファイルを作成し、‘appspec_cleanup.sh’ ファイルとして保存します。このファイルは、デプロイメントプロセス中に作業ディレクトリをクリーンアップし、最新のアプリケーションのアーティファクトが確実にデプロイされるようにします

echo "Cleanup"
rm /codedeploy/sapfioriapp -R -f 

4. 次のコードスニペットを使用して新しいファイルを作成し、‘appspec_deploy.sh’ ファイルとして保存します。このファイルは、CodeDeployのエージェントによって実行され、デプロイメントタスクを開始し、grunt-nwabap-ui5uploader (Node.jsとgruntのオープンソースプラグイン – Node.jsタスクランナー)を用いて、指定されたSAP NetWeaver ABAP – Business Server Pages (BSP)のリポジトリにアプリケーションのアーティファクトをアップロードします

echo "Starting Deployment Task"
cd /codedeploy/sapfioriapp
echo "Installing grunt & dependencies"
npm install grunt
npm install grunt-nwabap-ui5uploader
echo "Deploy to"
# AWS CLI SECRETSMANAGER - Get SAP access from AWS Secrets Manager
duser=$(aws secretsmanager get-secret-value --secret-id SAP_DEPLOY --region us-east-1 --query SecretString --output text | grep -oP '(?<="USER":")[^"]*') dpw=$(aws secretsmanager get-secret-value --secret-id SAP_DEPLOY --region us-east-1 --query SecretString --output text | grep -oP '(?<="PASSWORD":")[^"]*') durl=$(aws secretsmanager get-secret-value --secret-id SAP_DEPLOY --region us-east-1 --query SecretString --output text | grep -oP '(?<="URL":")[^"]*')
echo $durl
echo "as"
echo $duser
grunt deploy --server=$durl --user=$duser --pwd=$dpw

5. 次のコードスニペットを使用して新しいファイルを作成し、‘Gruntfile.js’ ファイルとして保存します。このファイルは、SAP NetWeaver ABAPのデプロイメントを構成します。SAP Business Server Page (BSP)の名前、パッケージ、移送は、このファイルで管理されます

module.exports = function (grunt) {

    //DOC: https://www.npmjs.com/package/grunt-nwabap-ui5uploader

    var sUser = grunt.option('user');
    var sPwd = grunt.option('pwd');
    var sServer = grunt.option('server');

    grunt.initConfig({
        nwabap_ui5uploader: {
            options: {
                conn: {
                    server: sServer,
                    useStrictSSL: false
                },
                auth: {
                    user: sUser,
                    pwd: sPwd
                }
            },
            upload_build: {
                options: {
                    ui5: {
                        package: '$TMP',
                        bspcontainer: 'z_sap_fiori_app',
                        bspcontainer_text: 'test App',
                    },
                    resources: {
                        cwd: 'dist',
                        src: '**/*.*'
                    }
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-nwabap-ui5uploader');
    grunt.registerTask('deploy', ['nwabap_ui5uploader']);
};	

注釈: 既存の移送要求を使用するか、異なるサーバーにアップロードするには、npmプラグインのドキュメントを参照してください

6. 作成された新しいファイルが、AWS Cloud9環境のサンプルアプリケーションのリポジトリで利用可能か確認します

Validate the sample application repository in your AWS Cloud9 environment.

7. ‘karma-ci.conf.js’ のJunit出力を有効にして、AWS CodeBuildのテストレポートを有効にします。サンプルアプリケーションのリポジトリから、次のコードスニペットを追加して、‘karma-ci.conf.js’ を編集します。 ‘karma-ci.conf.js’ ファイルの構造を理解するには、aws-samplesのリポジトリを参照してください

...
  //NEW
  junitReporter: {
      outputDir: 'junit', // results will be saved as $outputDir/$browserName.xml
      outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: true, // add browser name to report and classes names
      nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
      classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
      properties: {}, // key value pair of properties to add to the section of the report
      xmlVersion: null // use '1' if reporting to be per SonarQube 6.2 XML format
  },

  reporters: ["progress", "coverage", "junit"], //NEW
  //reporters: ["progress", "coverage"], OLD
...

8. ‘npm install karma-junit-reporter’ を実行して、ランタイム依存関係をインストールします

CodeCommitのリポジトリにプロジェクトコードを追加

1. AWS Cloud9環境のプロジェクトフォルダーのパスから、コードをリポジトリにプッシュします。必ず、.eslintrc ファイル (静的コードチェックのガイドラインを定義)も追加してください

$ git add *
$ git add .eslintrc
$ git commit -m 'initial setup'
$ git push

2. CodeCommitのリポジトリ内の結果を確認します

Validate the result inside the CodeCommit repository

AWS CodeDeployのエージェントを展開

CodeDeployのエージェントは、アウトバウンドのインターネット接続が利用可能である限り、任意のサポートされる環境上で動作するよう展開できます。

1. ここで示すように、IAMユーザーを作成し、CodeDeploy、S3、IAMのそれぞれの権限を持つCLIの認証情報を生成します
2. AWS Secrets ManagerのIAMポリシーを追加して、IAMユーザーが“SAP_DEPLOY” シークレットにアクセスできるようにします

{

"Effect":"Allow",
"Action":[
   "secretsmanager:GetSecretValue"
 ],
   "Resource": "<Secret ARN>"
}

3. SSHクライアントを使用して選択したインスタンスに接続し、CodeDeployのエージェントの展開を開始します
4. インスタンスにNode.jsをインストールします。OS固有のインストール方法は、Node.jsのパッケージマネージャのドキュメントを参照してください
5. インストールにAWS CLIをインストールします。設定手順は、AWS CLIのドキュメントを参照してください
6. “aws configure” コマンドを実行して、インスタンスにAWS CLIを設定し、先ほど生成したIAM認証情報を渡します
7. インスタンスにデプロイメントアーティファクト用の新しいフォルダーを作成します

$ mkdir /codedeploy
$ mkdir /codedeploy/sapfioriapp

8. CodeDeployのエージェントをインストールします。インストール方法は、AWSドキュメントを参照してください
9. 次のコマンドを実行して、エージェントを登録します

$ aws deploy register --instance-name <NAME> --tags Key=Name,Value=CodeDeployDemo-OnPrem --region <AWS REGION> 

10. 次のコマンドを実行して、設定ファイルをエージェントディレクトリにコピーします

$ cp codedeploy.onpremises.yml /etc/codedeploy-agent/conf/codedeploy.onpremises.yml

11. 次のコマンドを実行して、CodeDeployのエージェントを再起動します

$ sudo service codedeploy-agent stop
$ sudo service codedeploy-agent start
$ sudo service codedeploy-agent status

12. AWSマネジメントコンソールでCodeDeployのエージェントの登録を確認します。AWS CodeDeployのオンプレミスインスタンスのリストに登録したインスタンスが表示されるはずです

ビルドプロセス用にAWS CodePipelineを構成

1. 新しいSNSトピックを作成して、名前を入力します。SNSトピックを作成するには、SAP用のAWS DevOpsツール, パート1: Cloud Foundryアプリケーションを参照してください
2. 最初に、SAP FioriアプリケーションのCodeCommitのリポジトリを使用して、ビルドプロセス用にAWS CodePipelineを構成します。SAP Fioriアプリケーション用にパイプラインを作成するには、SAP用のAWS DevOpsツール, パート1: Cloud Foundryアプリケーションを参照してください。ビルドイメージには、再び Ubuntu を選択します
3. パイプラインが正常に作成されると、最後のコミットに基づいて自動的にトリガーされます。ビルドステージ内の詳細リンクをクリックして、ビルドの出力を確認します

新しいAWS CodeDeployのアプリケーション設定の作成

1. CodeDeployのメニューから新しいアプリケーションを作成します。アプリケーションとデプロイメントグループを作成するには、AWSドキュメントを参照してください
2. アプリケーション名として一意の名前を入力し、コンピューティングプラットフォームにはEC2/オンプレミスを選択します
3. 一意の名前で新しいデプロイメントグループを作成し、デプロイメントタイプにはインプレースを選択します

Creating a new deployment group

4. 環境設定から ‘オンプレミスインスタンス’ を選択し、CodeDeployの登録情報をもとにタググループを入力します
    キー: 名前
    値: CodeDeployDemo-OnPrem
5. ‘ロードバランシング’ を無効にし、詳細セクションで ‘ロールバックを無効にする’ を選択してください
6. ウィザードを終了します

デプロイメントプロセス用にAWS CodePipelineを構成

1. パイプラインの編集モードに移動します。新しいアクショングループと“承認” アクションを作成します。SAP用のAWS DevOpsツール, パート1: Cloud Foundryアプリケーションを参照してください
2. Deploy という追加のアクションを作成し、アクションプロバイダーにはAWS CodeDeployを選択します
3. プロバイダーには BuildArtifact を選択し、SAP Fioriアプリケーションとデプロイメントグループを選択します
4. ウィザードを終了し、保存 をクリックして変更をリリースし、パイプラインをトリガーします

Release the change to trigger the pipeline

5. デプロイメントのメニューからビルドログを使用して、パイプラインの実行を確認します
6. SAPトランザクションSE80かブラウザーを使用して、SAP Fioriアプリケーションをテストします

SAP BSP Application ‘z_sap_fiori_app’

https://:/sap/bc/ui5_ui5/sap/z_sap_fiori_app/index.html

OpenUI5 App

結論

このブログシリーズでは、AWS CodePipeline、AWS CodeCommit、AWS CodeBuild、AWS CodeDeployといったAWS DevOpsツールをサーバーレスなCI/CDツールセットとして活用し、SAP Fioriベースのアプリケーションをオーケストレート、ビルド、検証、承認、デプロイする方法を紹介しました。この完全マネージドなAWSソリューションにより、お客様はミッションクリティカルなSAPアプリケーション用のサーバー管理や維持を心配する必要なく、ビジネスの革新と変革に集中できます。

翻訳はPartner SA 河原が担当しました。原文はこちらです。