【SAP BTP】デプロイ後のCAP Service SDK for Javaのapp（UI側）の接続時に「Whitelabel Error Page」が発生する件

# はじめに
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側）を作ってみる](https://qiita.com/30_fujiwara/items/8a3dfde05e9b66d47715)
　（注意）CAP Service SDK for Node.jsではありません。

# 修正前の動作確認
## ローカル環境
下記のコマンドを実行後、「 localhost:8080/画面ID/webapp/index.html 」に接続し、
実行された内容を確認します。
```
$ mvn spring-boot:run
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/e093d6ce-d1fb-a33e-757f-5bfdceffcf91.png)

→appが機能していることが確認できます。

## デプロイ後
「 Application Routesに記載されたURL + 画面ID/index.html 」に接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/1ab8b25a-f605-6635-a051-a01d9e599e54.png)

→「Whitelabel Error Page」が表示されてしまいます。

# 原因と対処法
## 原因① mta.yamlを手動で作成したこと
CAP Service SDK for Javaにappを追加する際に、手動で作成していたことにより漏れが発生しました。

### 対処法
Template Wizardに沿ってappを作成する際に、
「Project Attributes」の「Add deployment configuration to MTA project」にてYesにチェックを入れる。
![image (87).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/7dae7bfb-8034-5671-1c32-2bfd5b129e95.png)

この際に、

:::note alert
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のフォルダを作成していること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/356c87df-46da-b242-0f1e-3857bfb487ce.png)

下記の内容を設定していました。
```ruby:xs-app.json
{
    "authenticationMethod": "none",
    "routes": [
        {
            "source": "^/(.*)",
            "destination": "srv-api"
        }
    ]
}
```
→html5-apps-repo-rtをバインドできない状態となっています。

### 対処法
下記の内容に変更し、html5-apps-repo-rtをバインドします。
```ruby: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」に関する記載がないため、
デプロイ中に下記のエラーが発生しました。

:::note alert
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に`下記を追加`以降の箇所を追加します。
```ruby: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を作成していること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/2e2589f9-8b68-f2f7-8b2e-ce920eca503b.png)

mta.yamlに「xs-security」に関する記載がないため、
デプロイ中に下記のエラーが発生しました。

:::note alert
Error: No UAA service found
:::

※xs-security.jsonを作成していることが前提です。

#### 対処法
modulesのrequiresとresourcesに`下記を追加`以降の箇所を追加します。

```ruby: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自動生成時に追加されていた](http://qiita.com)ため、デプロイ中にエラーは発生しませんが、
approuterをバインドしていなかったことにより、
デプロイ後のアプリケーションの画面を確認した際に下記のエラーが表示されました。

:::note alert
Internal Server Error
:::

下記が自動生成された「sample-destination-service」の内容です。
```ruby: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をバインドします。

```ruby: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
```


# 上記対応後の動作確認
上記の原因①②③の対処法を行った後、再度デプロイ後のアプリケーションにアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/48ccdcc9-b436-7371-0100-7a14cee77c3c.png)


→デプロイ後のアプリケーションも、UI側にアクセスできていることが確認できました。

# おわりに
appに関する情報がデプロイできていないため、今回のような「Whitelabel Error Page」が発生しましたが、
上記の対応を行うことでappがデプロイ対象となり、アクセスすることができました。
もし同じエラーで躓いている方がいれば参考にしていただけると幸いです。