はじめに

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のフォルダを作成していること

下記の内容を設定していました。

xs-app.json

{
    "authenticationMethod": "none",
    "routes": [
        {
            "source": "^/(.*)",
            "destination": "srv-api"
        }
    ]
}

→html5-apps-repo-rtをバインドできない状態となっています。

対処法

下記の内容に変更し、html5-apps-repo-rtをバインドします。

xs-app.json

{
    "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に下記を追加以降の箇所を追加します。

mta.yaml

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に下記を追加以降の箇所を追加します。

mta.yaml

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」の内容です。

mta.yaml

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をバインドします。

mta.yaml

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がデプロイ対象となり、アクセスすることができました。
もし同じエラーで躓いている方がいれば参考にしていただけると幸いです。