Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@tami(Yasutake Mio)

【CI/CD】UI5プロジェクトのパイプラインを構築するまで　～パイプライン編～

Last updated at Posted at 2020-05-31

##はじめに
UI5のCI/CDパイプラインを構築してみて、苦労した点、解決方法などを紹介します。
目的は、Test、Build、Deployまで通してやってみることです。
SAPのProject Piperという洗練されたツールもあるのですが、まだDockerもJenkinsもよくわかっていないので、まずは自分が理解できるレベルから始めようと思いました。

環境構築編はこちら

##ゴール
以下のリポジトリにあるUI5 Toolingのサンプルプロジェクトを使ってパイプラインを構築します。
https://github.com/SAP/openui5-sample-app
Test、Buildを経てABAPサーバへのデプロイまで実行します。
image.png

##ステップ

  1. UI5 ToolingのサンプルアプリをFork
  2. Jenkinsfileを追加
  3. Jenkinsのパイプラインを作成
  4. Testステップでのエラーつぶし
  5. Deploy

##1. UI5 ToolingのサンプルアプリをFork
今回の目的はCI/CDのパイプラインを作ることなので、アプリの作成は省略しました。
以下のサンプルアプリをForkして自分のリポジトリに持ってきました。
このプロジェクトはテストがちゃんと書いてあるのでTestステップの確認にも使えるのです。
https://github.com/SAP/openui5-sample-app

###パイプラインに関係するファイル
####project.json
project.jsonでは以下のスクリプトが定義されていました。buildとtestのスクリプトはそのまま使えそうです。

package.json
{
	"name": "openui5-sample-app",
	"version": "0.2.0",
	"description": "Sample of an OpenUI5 app",
	"private": true,
	"scripts": {
		"start": "ui5 serve",
		"lint": "eslint webapp",
		"karma": "karma start",
		"karma-ci": "rimraf coverage && karma start karma-ci.conf.js",
		"watch": "npm run karma",
		"test": "npm run lint && npm run karma-ci",
		"build": "ui5 build -a --clean-dest",
		"build-self-contained": "ui5 build self-contained -a --clean-dest",
		"serve-dist": "ws --compress -d dist"
	},
	"dependencies": {},
	"devDependencies": {
		"@ui5/cli": "^2.2.6",
		"eslint": "^6.8.0",
		"karma": "^4.4.1",
		"karma-chrome-launcher": "^3.1.0",
		"karma-coverage": "^2.0.2",
		"karma-ui5": "^2.1.2",
		"local-web-server": "^3.0.7",
		"rimraf": "^3.0.2"
	}
}

####karma.conf.js
karma.conf.jsはKarmaによる自動テストで使われる設定ファイルです。devDependencyにあるkarma-ui5というモジュールのおかげで、UI5のテストがとてもシンプルな設定で行えます。customLaunchersとして2つの設定（Chrome、ChromeHeadless）がありますが、CI環境ではChromeHeadlessを使います。ChromeHeadlessでは大変苦労することになるのですが、これについては後述します。

karma.conf.js
module.exports = function(config) {
	"use strict";

	var chromeFlags = [
		"--window-size=1280,1024"
	];

	config.set({

		frameworks: ["ui5"],

		browsers: ["CustomChrome"],

		browserConsoleLogOptions: {
			level: "error"
		},

		customLaunchers: {
			CustomChrome: {
				base: "Chrome",
				flags: chromeFlags
			},
			CustomChromeHeadless: {
				base: "ChromeHeadless",
				flags: chromeFlags
			}
		},

	});
};

####karma-ci.conf.js
karma-ci.conf.jsはCI環境使うためのKarmaの設定ファイルです。karma.conf.jsの設定とマージして使われます。

karma-ci.conf.js
module.exports = function(config) {
	"use strict";

	require("./karma.conf")(config);
	config.set({

		preprocessors: {
			"{webapp,webapp/!(test)}/*.js": ["coverage"]
		},

		coverageReporter: {
			includeAllSources: true,
			reporters: [
				{
					type: "html",
					dir: "coverage"
				},
				{
					type: "text"
				}
			],
			check: {
				each: {
					statements: 100,
					branches: 100,
					functions: 100,
					lines: 100
				}
			}
		},

		reporters: ["progress", "coverage"],

		browsers: ["CustomChromeHeadless"],

		singleRun: true

	});
};

##2. Jenkinsfileを追加
まずは、以下のようなJenkinsfileを作成しました。実行環境としてnode:14-alpineというDockerイメージを使うことにしました（nodeが使えて新しめという理由で選択）。この状態でプロジェクトをリモートリポジトリにpushします。
image.png

##3. Jenkinsのパイプラインを作成
Blue Oceanのメニューからパイプラインを作成します。Blue Oceanのメニューからだとウィザードに従っていくだけで簡単にパイプラインが作れます。
image.png
以下の動画で詳しいステップが説明されています。初回はGitアカウントのアクセストークンの設定が必要になります。
Jenkins Minute - Creating Your First Pipeline in Blue Ocean
ここで作成されたパイプラインはMultibranch Pipelineになります。すなわち、複数のブランチがある場合に、Jenkinsfileを持つすべてのブランチに対して個別のパイプラインが作成されます。

作成したMultibranch Pipelineに対して"Scan Repository Now"を実行すると、リポジトリが検索され、Jenkinsfileを持つブランチのビルドが開始します。
image.png

##4. Testステップでのエラーつぶし
一番苦労したのはTestステップでした。Testステップは以下のスクリプトで起動し、ESLintによるコードチェックとUnitテスト、Integrationテスト(OPA5)が実行されます。

"test": "npm run lint && npm run karma-ci"

###エラー1: 環境変数CHROME_BINがない
ビルドすると、さっそく以下のようなエラーが出ました。
image.png

####対応：puppeteerを使う（ただし暫定）
puppeteerというモジュールは、環境に応じたChromeの実行ファイルをダウンロードしてくれます。以下のように設定してみました。

  • puppeteerをdevDependencyに追加
    image.png
  • karma.conf.jsの先頭でCHROME_BINの設定を追加
    image.png

この結果、CHROME_BINがないエラーは解消しました。

###エラー2: ChromeHeadlessが見つからない
次に、ChromeHeadlessが見つからないというエラーが出ました。
image.png

調べていくと、どうもDockerコンテナの中でChromeHeadlessを動かすのは一筋縄ではいかないらしいことがわかりました。

  1. also Chrome requires some system libraries and doesn’t work on default nodejs Docker image. So, I’ve found geekykaran/headless-chrome-node-docker.

https://medium.com/front-end-weekly/karma-js-headless-chrome-and-docker-35c134df28f3 より

####対応：rastasheep/alpine-node-chromiumを使う
nodeとchromeが使えるDockerイメージを探していたところ、以下を見つけました。
https://github.com/rastasheep/alpine-node-chromium/blob/master/12-alpine/Dockerfile
シンプルで、何をやっているか自分でも理解できそうだったので、これを使うことにしました。このファイルの中身をまるごとコピーして、プロジェクト直下にDockerfileとして配置しました。
image.png

ローカルのDockerfileを使うので、Jenkinsfileのagentは以下のように修正します。
image.png

この結果、ChromeHeadlessは見つかるようになり、OPA5テストが実行できるようになりました。なお、puppeteerは不要になったので、エラー1で設定した内容は元に戻しました。

###エラー3：OPA5テストが途中で失敗する
出だしのテストはうまくいくのですが、途中でエラーになってしまいます。画面のボタンを押したり、フィルタを適用したりするケースでエラーになっていました。特定の画面操作がうまくいっていないようです。
image.png

実は、ChromeHeadlessが見つからない事象について調べていた時に、--no-sandboxを付けたら解消したという情報が複数あったため、karma.conf.jsの設定を以下のようにしていました。
image.png

--no-sandboxをつけると、CI環境だけでなくローカル環境でもOPA5テストが失敗することに気づきました。--no-sandboxを外してみたところ、CI環境では権限エラーらしきものが出ました。
image.png

####背景
Dockerコンテナはrootユーザー（全権限を持ったユーザー）で実行していますが、rootユーザーだとsandboxモードがうまく動かないようです。そこで、以下の対応が必要になります。

  • rootでないユーザで実行する
  • そのユーザに適切な権限を付与する

こちらの記事で以下の対応方法が紹介されていました。（1. おすすめでない->4. おすすめ）

  1. sandboxをやめる（つまり--no-sandboxをつける。今回は使用できない）
  2. Dockerコンテナを起動するときに--privilegedをつける
  3. Dockerコンテナを起動するときに--cap-add=SYS_ADMINをつける
  4. Dockerコンテナを起動するとき--security-opt seccomp=<設定ファイル>で許可するシステムコールの種類を指定する
    セキュリティの観点から、4.が推奨されるということです。

4.で使う設定ファイルは以下からダウンロードすることができます。
https://raw.githubusercontent.com/jfrazelle/dotfiles/master/etc/docker/seccomp/chrome.json
参考：https://hub.docker.com/r/zenika/alpine-chrome

####対応
#####rootでないユーザで実行する
まずはrootでないユーザで実行する必要があるため、Dockerfileに以下のコードを追加しました。chromiumというシステムグループ、およびシステムユーザを作成しています。
image.png
ここにもちょっとした罠があって、alpineのイメージを使用しているためgroupaddやuseraddコマンドは使えず、addgroup、adduserなら使えるということでした。
https://stackoverflow.com/questions/49955097/how-do-i-add-a-user-when-im-using-alpine-as-a-base-image

この設定をしたうえで、Dockerfileのagentの指定を以下のように書き換えたところ、とりあえずテストはうまくいくようになりました。
image.png

#####Dockerコンテナを起動するときにシステムコールの種類を指定する
やはり推奨されている設定で実行したいと思い、この方法にトライしてみました。ただ、設定ファイルをどこに置けばいいのかがまずわかりませんでした。

試行錯誤しているうちに、jenkins_home_volumeというボリュームの存在に気づきました（Cx Serverを使っているとボリュームのマウントも自動的にやってくれる）。
image.png

このボリュームの中に設定ファイルを入れればJenkinsからアクセスできそうだったので、以下のようにしました。

#一時的なコンテナを作成してjenkins_home_volumeをマウント
sudo docker run --rm -it -v jenkins_home_volume:/tmp/jenkins_home_volume busybox
cd /tmp/jenkins_home_volume

#設定ファイル格納用のディレクトリを作成
mkdir myseccomp
cd myseccomp

#設定ファイルをインストール
wget https://raw.githubusercontent.com/jfrazelle/dotfiles/master/etc/docker/seccomp/chrome.json

Jenkinsfileで、Dockerコンテナを起動するときのオプションを以下のように設定
image.png

結果、すべてのテストが成功しました。
image.png

Buildも問題なく終了しました。
image.png

##5. Deploy
Project Piperでは、デプロイはABAPサーバのRFCまたはODataサービスを使用して行いますが、今回はより簡単に、nwabap-ui5uploaderというモジュールを使用してデプロイします。詳しいことはわからないのですが、このモジュールはWebIDEからABAPサーバへデプロイするのと同じ仕組みを使っているそうです。

まずは、これをdevDependencyに追加します。

npm install nwabap-ui5uploader --save-dev

package.jsonにデプロイ用のスクリプトを追加します。

package.json
	"scripts": {
		...
		"upload": "npx nwabap upload",
		...
	}

.nwabaprcというファイルをプロジェクト直下に作成し、デプロイに必要な設定を入れます。

{
    "base": "./dist", 
    "conn_server": "http://<host>:<port>", 
    "conn_user": "<user>",                 
    "conn_password": "<password>",             
    "abap_package": "<package>",                
    "abap_bsp": "<BSPアプリのID>",            
    "abap_bsp_text": "<BSPアプリのテキスト>",
    "abap_transport": "<移送依頼>"
}

JenkinsfileにDeployステップを追加します。
image.png

####デプロイが終わらない！
まずはローカルでデプロイしてみたところ、デプロイ対象のファイルが5000を超える事態になってしまいました。（以下は通常の場合の画面。40件が対象になっている）
image.png

実は、今回使用したプロジェクトがスタンドアロンで実行することを想定した作りになっており、ビルドしたときにUI5のライブラリをすべてdist/resourcesフォルダにインストールする動きになっていました。ABAPサーバにデプロイする場合には必要ないため、以下の修正を加えました。

#####sap-ui-core.jsをCDNから取得するように変更
index.htmlのbootstrapを変更します。
before
image.png

after
image.png

#####ui5.yamlファイルを変更
before
image.png
after
image.png

#####karma.conf.jsファイルを変更
configにui5のダウンロード元URLを指定します。

karma.conf.js
	config.set({

		frameworks: ["ui5"],

		ui5: {
			url: "https://openui5.hana.ondemand.com"
		},

以上の設定で、resourcesフォルダにUI5ライブラリがインストールされることはなくなり、デプロイ対象の数を抑えることができました。パイプラインのステップも全て正常終了しました。

image.png

##最終的な状態
パイプラインに関連するファイルは最終的に以下のようになりました。

package.json
{
	"name": "openui5-sample-app",
	"version": "0.2.0",
	"description": "Sample of an OpenUI5 app",
	"private": true,
	"scripts": {
		"start": "ui5 serve",
		"lint": "eslint webapp",
		"karma": "karma start",
		"karma-ci": "rimraf coverage && karma start karma-ci.conf.js",
		"watch": "npm run karma",
		"test": "npm run lint && npm run karma-ci",
		"build": "ui5 build -a --clean-dest",
		"upload": "npx nwabap upload",
		"build-self-contained": "ui5 build self-contained -a --clean-dest",
		"serve-dist": "ws --compress -d dist"
	},
	"dependencies": {},
	"devDependencies": {
		"@sap/grunt-sapui5-bestpractice-build": "^1.4.2",
		"@ui5/cli": "^2.2.4",
		"eslint": "^6.8.0",
		"grunt": "^1.1.0",
		"karma": "^4.4.1",
		"karma-chrome-launcher": "^3.1.0",
		"karma-coverage": "^2.0.2",
		"karma-qunit": "^4.1.1",
		"karma-ui5": "^2.1.0",
		"local-web-server": "^3.0.7",
		"nwabap-ui5uploader": "^0.3.4",
		"rimraf": "^3.0.2"
	}
}
Dockerfile
FROM node:12-alpine

MAINTAINER Aleksandar Diklic "https://github.com/rastasheep"

RUN \
  echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories \
  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" >> /etc/apk/repositories \
  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories \
  && apk --no-cache  update \
  && apk --no-cache  upgrade \
  && apk add --no-cache --virtual .build-deps \
    gifsicle pngquant optipng libjpeg-turbo-utils \
    udev ttf-opensans chromium \
  && rm -rf /var/cache/apk/* /tmp/*

ENV CHROME_BIN /usr/bin/chromium-browser
ENV LIGHTHOUSE_CHROMIUM_PATH /usr/bin/chromium-browser

# Add a chrome user
RUN addgroup -S chromium &&\
    adduser -S -g chromium chromium

USER chrome
jenkinsfile
pipeline {
    agent { 
        dockerfile {
            args '--security-opt seccomp=/var/jenkins_home/myseccomp/chrome.json'
        }    
    }
    stages {
        stage('prepare') {
            steps {
                sh 'npm config set @sap:registry https://npm.sap.com'
                sh 'npm install'
            }
        }
        stage('test') {
            steps {
                sh 'npm run-script test'
            }
        }        
        stage('build') {
            steps {

                sh 'npm run-script build'
            }
        }
        stage('deploy') {
            steps {

                sh 'npm run-script upload'
            }
        }        
    }
}

##改善したいところ
とりあえず最後までいけたものの、まだ粗削りなところもあります。例えば、

  1. テストの後にビルドしているが、本来はビルドした結果を使ってテストすべきでは
  2. デプロイステップで使う設定をプロジェクトの中に置いているが、認証情報も書いているのは良くない
  3. デプロイ先のアドレスをホスト名にしたところDockerコンテナの中で名前解決できなかったため、IPアドレス指定にした。本来どうすべきか

##参考

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?