はじめに
CAP Service SDK for Javaを使用してapp（UI側）を作成したアプリケーションを、
ローカル環境とデプロイ後のサーバ上で動作確認を行いました。
ローカル環境の場合は、appに接続した際にエラーは発生せず、appが機能していることを確認できました。
しかし、デプロイ後のアプリケーションの場合、appに接続した際に「White Label Error」が発生してしまいました。
その際の対処方法やデプロイ時に発生したエラーの対処について、以下に記載します。
前提
・BTP環境のサブアカウントにSpace「dev」が作成されていること前提
・CAP Service SDK for Javaを使用してappを作成していること。
CAP Service SDK for Javaを使用したappの作成方法については、以下の記事に記載しております。
【SAP BTP】CAP Service SDK for Javaを使用してapp（UI側）を作ってみる
（注意）CAP Service SDK for Node.jsではありません。
修正前の動作確認
ローカル環境
下記のコマンドを実行後、「 localhost:8080/画面ID/webapp/index.html 」に接続し、
実行された内容を確認します。
$ mvn spring-boot:run
→appが機能していることが確認できます。
デプロイ後
「 Application Routesに記載されたURL + 画面ID/index.html 」に接続します。
→「Whitelabel Error Page」が表示されてしまいます。
原因と対処法
原因① mta.yamlを手動で作成したこと
CAP Service SDK for Javaにappを追加する際に、手動で作成していたことにより漏れが発生しました。
対処法
Template Wizardに沿ってappを作成する際に、
「Project Attributes」の「Add deployment configuration to MTA project」にてYesにチェックを入れる。
この際に、
error
Cannot find the "mta" executable. Please add it to the path or use "npm i -g mta" to install it.
というエラーが発生した場合は、下記のコマンドを実行し、再度Template Wizardに沿って進めていき、
「Project Attributes」の「Add deployment configuration to MTA project」にてYesにチェックを入れると、エラーは発生しません。
npm i -g mta
これで自動でmta.yamlに必要な情報が追加されます。
原因② approuter > xs-app.jsonの設定ミス
（前提）
・下記の画像のように、プロジェクトの中にapprouterのフォルダを作成していること
下記の内容を設定していました。
{
"authenticationMethod": "none",
"routes": [
{
"source": "^/(.*)",
"destination": "srv-api"
}
]
}
→html5-apps-repo-rtをバインドできない状態となっています。
対処法
下記の内容に変更し、html5-apps-repo-rtをバインドします。
{
"authenticationMethod": "route",
"routes": [ {
"source": "^(.*)$",
"target": "$1",
"service": "html5-apps-repo-rt",
"authenticationType": "xsuaa"
}
]
}
原因③ mta.yamlの設定漏れ
原因①②の対処法を行いデプロイを実行すると、
下記のサービスインスタンスにてデプロイ中にエラーが発生します。
・インスタンス：sample_html5_repo_runtime（サービス：HTML5 Application Repository Service）
・インスタンス：xs-security（サービス：Authorization and Trust Management Service）
・インスタンス：sample-destination-service（サービス：Destination Service）
・インスタンス：sample_html5_repo_runtime
mta.yamlに「sample_html5_repo_runtime」に関する記載がないため、
デプロイ中に下記のエラーが発生しました。
VError: xs-app.json/routes/0: Format validation failed (A route requires access to html5-apps-repo-rt service but the service is not bound.)
対処法
modulesのrequiresとresourcesに下記を追加以降の箇所を追加します。
modules:
- name: sample-app-router
type: nodejs
path: approuter
requires:
- name: srv-api
# 下記を追加
- name: sample_html5_repo_runtime
##############中略#################
resources:
# 下記を追加
- name: sample_html5_repo_runtime
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-plan: app-runtime
・インスタンス：xs-security
（前提）
・下記の画像のように、プロジェクトの中にxs-security.jsonを作成していること
mta.yamlに「xs-security」に関する記載がないため、
デプロイ中に下記のエラーが発生しました。
Error: No UAA service found
※xs-security.jsonを作成していることが前提です。
対処法
modulesのrequiresとresourcesに下記を追加以降の箇所を追加します。
modules:
- name: sample-app-router
type: nodejs
path: approuter
requires:
- name: srv-api
- name: sample_html5_repo_runtime
# 下記を追加
- name: xs-security
##############中略#################
resources:
- name: sample_html5_repo_runtime
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-plan: app-runtime
# 下記を追加
- name: xs-security
type: org.cloudfoundry.managed-service
parameters:
path: ./xs-security.json
service: xsuaa
service-plan: application
・インスタンス：sample-destination-service
「sample-destination-service」はmta.yaml自動生成時に追加されていたため、デプロイ中にエラーは発生しませんが、
approuterをバインドしていなかったことにより、
デプロイ後のアプリケーションの画面を確認した際に下記のエラーが表示されました。
Internal Server Error
下記が自動生成された「sample-destination-service」の内容です。
resources:
- name: sample-destination-service
type: org.cloudfoundry.managed-service
parameters:
config:
HTML5Runtime_enabled: false
init_data:
instance:
destinations:
- Authentication: NoAuthentication
Name: ui5
ProxyType: Internet
Type: HTTP
URL: https://ui5.sap.com
existing_destinations_policy: update
version: 1.0.0
service: destination
service-name: sample-destination-service
service-plan: lite
対処法
modulesのrequiresに下記を追加以降の箇所を追加し、
sample-destination-serviceにapprouterをバインドします。
modules:
- name: sample-app-router
type: nodejs
path: approuter
requires:
- name: srv-api
- name: sample_html5_repo_runtime
- name: xs-security
# 下記を追加
- name: sample-destination-service
上記対応後の動作確認
上記の原因①②③の対処法を行った後、再度デプロイ後のアプリケーションにアクセスします。
→デプロイ後のアプリケーションも、UI側にアクセスできていることが確認できました。
おわりに
appに関する情報がデプロイできていないため、今回のような「Whitelabel Error Page」が発生しましたが、
上記の対応を行うことでappがデプロイ対象となり、アクセスすることができました。
もし同じエラーで躓いている方がいれば参考にしていただけると幸いです。