More than 1 year has passed since last update.

VS Codeで作ったCAPとFioriをMTAでBTPへデプロイ

Posted at 2023-01-23

ローカルPCで作ったCAPとFioriをBTPにデプロイしました。できるだけ簡素にしています。
下記で実行した内容の後継です(私の都合でアプリ名は、そのときから変えています)。

以下のチュートリアルグループを参考にしました。

こんなアーキテクチャで作ります。

前提

記事「ローカルPCでのCAPとFiori elementsでの画面モックアップ作成」で書いた内容
BTP Subaccountやorganization, space 作成済
HANA Cloud インスタンス生成済
ローカルPCに以下をインストール済

npm install --global mbt
cf install-plugin multiapps
npm install --global @sap/ux-ui5-tooling
npm install --global @sap/generator-fiori
npm install --global mta

手順

1. プロジェクトに設定追加

1.1. HANA設定をプロジェクトに追加

cds add hana --for productionコマンドを実行。

From Project root directory

% cds add hana --for production

Adding feature(s) to project in current folder

Adding feature 'hana'... 
Done adding features

プロジェクトルートディレクトリのpackage.jsonが更新されます。
これによりローカルPCでテスト時にはsqlite, BTPではHANA Cloudで実行されます。

./package.json変更点(diffコマンド実行結果)

@@ -7,7 +7,8 @@
   "private": true,
   "dependencies": {
     "@sap/cds": "^6",
-    "express": "^4"
+    "express": "^4",
+    "hdb": "^0.19.0"
   },
   "devDependencies": {
     "@sap/ux-specification": "^1.102.14",
@@ -19,5 +20,17 @@
   },
   "sapux": [
     "app/i348221"
-  ]
-}
+  ],
+  "cds": {
+    "requires": {
+      "[production]": {
+        "db": {
+          "kind": "hana-cloud"
+        }
+      },
+      "db": {
+        "kind": "sql"
+      }
+    }
+  }
+}

実行内容は以下のTutorialを参考しています。
Add SAP HANA Support to Your Project - Step1: Add SAP HANA client and configuration to your project

1.2. XSUAA設定をプロジェクトに追加

以下のコマンドを実行して、XSUAA設定をプロジェクトに追加。
デモ目的としては複雑になるので、なんとかXSUAAなしでできないか模索しましたが、短時間で調べきれないと諦めました。XSUAAなしでOData作るところまでは簡単ですが、Fioriのデプロイがよくわからなかったです。

From Project root directory

cds add xsuaa --for production

プロジェクトルートディクトリの./package.jsonが更新されます。

./package.json変更点(diffコマンド実行結果)

@@ -8,12 +8,17 @@
   "dependencies": {
     "@sap/cds": "^6",
     "express": "^4",
-    "hdb": "^0.19.0"
+    "hdb": "^0.19.0",
+    "@sap/xssec": "^3",
+    "passport": "^0"
   },
   "devDependencies": {
     "@sap/ux-specification": "^1.102.14",
@@ -26,6 +31,9 @@
       "[production]": {
         "db": {
           "kind": "hana-cloud"
+        },
+        "auth": {
+          "kind": "xsuaa"
         }

そして、プロジェクトルートディレクトリにxs-security.jsonが新規作成されます。

xs-security.json

{
  "scopes": [],
  "attributes": [],
  "role-templates": []
}

チュートリアル「Prepare User Authentication and Authorization (XSUAA) Setup - Step2: Roles and scopes」に記載しているロールとScopeの設定はスキップしています。今回のデモ目的と鑑みて、できるだけシンプルに実装したかったためです。本稼働に向けて作るのであればロールとScopeは必要です。

実行内容は以下のTutorialを参考しています。
Prepare User Authentication and Authorization (XSUAA) Setup - Step1: Setup XSUAA

2. Node.js version宣言

./package.jsonを手で変更。今回はNode.jsのversionを18以上にしています。チュートリアルでは16を指定していましたが、18でも軽く動かす限りでは問題なかったです。

./package.json変更点(diffコマンド実行結果)

@@ -14,6 +14,9 @@
     "@sap/ux-specification": "^1.102.14",
     "sqlite3": "^5.0.4"
   },
+  "engines": {
+    "node": "^18"
+  },
   "scripts": {
     "start": "cds run",

実行内容は以下のTutorialを参考しています。
Deploy Your Multi-Target Application (MTA) - Step4: Declare required Node.js version

3. MTA開発

3.1. mta.yaml生成

cds add mtaコマンドでmta.yamlを生成。

From Project root directory

% cds add mta
Adding feature(s) to project in current folder

Adding feature 'mta'... 
Done adding features

ルートにmta.yamlが追加されます。package.jsonの内容から生成。

./mta.yaml

_schema-version: '3.1'
ID: i348221
version: 1.0.0
description: "A simple CAP project."
parameters:
  enable-parallel-deployments: true
build-parameters:
  before-all:
    - builder: custom
      commands:
        - npx -p @sap/cds-dk cds build --production
modules:
  - name: i348221-srv
    type: nodejs
    path: gen/srv
    parameters:
      buildpack: nodejs_buildpack
    build-parameters:
      builder: npm-ci
    provides:
      - name: srv-api # required by consumers of CAP services (e.g. approuter)
        properties:
          srv-url: ${default-url}
    requires:
      - name: i348221-db
      - name: i348221-auth

  - name: i348221-db-deployer
    type: hdb
    path: gen/db
    parameters:
      buildpack: nodejs_buildpack
    requires:
      - name: i348221-db

resources:
  - name: i348221-db
    type: com.sap.xs.hdi-container
    parameters:
      service: hana
      service-plan: hdi-shared
  - name: i348221-auth
    type: org.cloudfoundry.managed-service
    parameters:
      service: xsuaa
      service-plan: application
      path: ./xs-security.json
      config:
        xsappname: i348221-${org}-${space}
        tenant-mode: dedicated

実行内容は以下のTutorialを参考しています。
Deploy Your Multi-Target Application (MTA) - Step5: Generate MTA deployment descriptor (mta.yaml)

3.2. mta.yaml修正

以下の内容をマニュアル修正。

build-parameters->before-all->commandsを更新。csvファイルを除外(hana-cloudのデータを見るため)。
resources->name(i348221-db)->parametersにconfig->database_idを手で生成後に追加。追加するidはhana-cloudのインスタンスID。複数のhana-cloudがあったので、ここで指定します。
resources->name(i348221-auth)->parameters->config->xsappname を変更。orgの変数を除去(org名にスペースを含んでいたため)。

./mta.yaml変更点(diffコマンド実行結果)

@ -8,7 +8,9 @@
   before-all:
     - builder: custom
       commands:
+        - npm install --production
         - npx -p @sap/cds-dk cds build --production
+        - npx rimraf gen/db/src/gen/data
 modules:
   - name: i348221-srv
     type: nodejs
@@ -39,6 +41,9 @@
     parameters:
       service: hana
       service-plan: hdi-shared
+      config:
+        database_id : d338ddfd-3b14-430d-92be-2d2a691a9afa
+
   - name: i348221-auth
     type: org.cloudfoundry.managed-service
     parameters:
@@ -46,5 +51,5 @@
       service-plan: application
       path: ./xs-security.json
       config:
-        xsappname: i348221-${org}-${space}
+        xsappname: i348221-${space}
         tenant-mode: dedicated

実行内容は以下のTutorialを参考しています。
Deploy Your Multi-Target Application (MTA) - Step6: Exclude CSV files from deployment

3.3. MTAモジュールビルド

MTAモジュールをビルドします。

From Project root directory

mbt build -t ./

Terminal実行結果

[2023-01-18 14:33:06]  INFO Cloud MTA Build Tool version 1.2.21
[2023-01-18 14:33:06]  INFO generating the "Makefile_20230118143306.mta" file...
[2023-01-18 14:33:06]  INFO done
[2023-01-18 14:33:06]  INFO executing the "make -f Makefile_20230118143306.mta p=cf mtar= strict=true mode= t=\"./\"" command...
[2023-01-18 14:33:06]  INFO validating the MTA project
[2023-01-18 14:33:06]  INFO running the "before-all" build...
[2023-01-18 14:33:06]  INFO executing the "npm install --production" command...
..npm WARN config production Use `--omit=dev` instead.
...
added 21 packages, and audited 89 packages in 3s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[2023-01-18 14:33:11]  INFO executing the "npx -p @sap/cds-dk cds build --production" command...
.[cds] - determining build tasks for project [/Users/i348221/Documents/repositories/i348221].
[cds] - the following build tasks will be executed
[cds] -    {
     "build": {
       "target": "gen",
       "tasks": [
         {"for":"hana", "src":"db", "options":{"model":["db","srv","app"]}},
         {"for":"nodejs", "src":"srv", "options":{"model":["db","srv","app"]}}
       ]
     }
   }

[cds] - building project [/Users/i348221/Documents/repositories/i348221], clean [true]
[cds] - cds [6.4.1], compiler [3.5.4], home [/Users/i348221/Documents/repositories/i348221/node_modules/@sap/cds]

..[cds] - done > wrote output to:
   gen/db/package.json
   gen/db/src/.hdiconfig
   gen/db/src/gen/.hdiconfig
   gen/db/src/gen/.hdinamespace
   gen/db/src/gen/CatalogService.Books.hdbview
   gen/db/src/gen/data/my.bookshop-Books.csv
   gen/db/src/gen/data/my.bookshop-Books.hdbtabledata
   gen/db/src/gen/my.bookshop.Books.hdbtable
   gen/db/undeploy.json
   gen/srv/.cdsrc.json
   gen/srv/package-lock.json
   gen/srv/package.json
   gen/srv/srv/csn.json

[cds] - build completed in 1216 ms

[2023-01-18 14:33:15]  INFO executing the "npx rimraf gen/db/src/gen/data" command...
..[2023-01-18 14:33:17]  INFO validating the MTA project
[2023-01-18 14:33:17]  INFO building the "i348221-srv" module...
[2023-01-18 14:33:17]  INFO executing the "npm clean-install --production" command...
npm WARN config production Use `--omit=dev` instead.
.
added 88 packages, and audited 89 packages in 963ms

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[2023-01-18 14:33:18]  INFO the build results of the "i348221-srv" module will be packaged and saved in the ".i348221_mta_build_tmp/i348221-srv" folder
[2023-01-18 14:33:20]  INFO finished building the "i348221-srv" module
[2023-01-18 14:33:20]  INFO building the "i348221-db-deployer" module...
[2023-01-18 14:33:20]  INFO executing the "npm install --production" command...
npm WARN config production Use `--omit=dev` instead.
....
added 31 packages, and audited 32 packages in 4s

found 0 vulnerabilities
[2023-01-18 14:33:25]  INFO the build results of the "i348221-db-deployer" module will be packaged and saved in the ".i348221_mta_build_tmp/i348221-db-deployer" folder
[2023-01-18 14:33:28]  INFO finished building the "i348221-db-deployer" module
[2023-01-18 14:33:28]  INFO running the "after-all" build...
[2023-01-18 14:33:28]  INFO generating the metadata...
[2023-01-18 14:33:28]  INFO generating the "/Users/i348221/Documents/repositories/i348221/.i348221_mta_build_tmp/META-INF/mtad.yaml" file...
[2023-01-18 14:33:28]  INFO generating the MTA archive...
[2023-01-18 14:33:30]  INFO the MTA archive generated at: i348221_1.0.0.mtar
[2023-01-18 14:33:30]  INFO cleaning temporary files...

実行内容は以下のTutorialを参考しています。
Deploy Your Multi-Target Application (MTA) - Step8: Build, deploy, and test mtar file

3.4. MTAデプロイ

以下のコマンドでデプロイ。

From Project root directory

cf deploy i348221_1.0.0.mtar

Terminal 実行結果

Uploading 1 files...
  /Users/i348221/Documents/repositories/i348221/i348221_1.0.0.mtar
OK
Operation ID: 3f89f06c-96f2-11ed-acb0-eeee0a9edd60
Deploying in org "DBS Japan Shared_eu10" and space "demo-eu10"
Detected MTA schema version: "3"
Detected deployed MTA with ID "i348221" and version "1.0.0"
Detected new MTA version: "1.0.0"
Deployed MTA version: "1.0.0"
Processing service "i348221-auth"...
Setting service "i348221-auth" parameters from "xs-security.json"
Processing service "i348221-db"...
Creating service "i348221-auth" from MTA resource "i348221-auth"...
1 of 1 done
Updating application "i348221-db-deployer"...
Updating application "i348221-srv"...
Binding service instance "i348221-auth" to application "i348221-srv"...
Unbinding service instance "i348221-db" from application "i348221-db-deployer"...
Binding service instance "i348221-db" to application "i348221-db-deployer"...
Unbinding service instance "i348221-db" from application "i348221-srv"...
Uploading application "i348221-db-deployer"...
Binding service instance "i348221-db" to application "i348221-srv"...
Started async upload of application "i348221-db-deployer"
Uploading application "i348221-srv"...
Started async upload of application "i348221-srv"
Scaling application "i348221-db-deployer" to "1" instances... 
Staging application "i348221-db-deployer"...
Stopping application "i348221-srv"...
Staging application "i348221-srv"...
Application "i348221-db-deployer" staged
Application "i348221-srv" staged
Executing task "deploy" on application "i348221-db-deployer"...
Starting application "i348221-srv"...
Application "i348221-srv" started and available at "<host>.cfapps.eu10.hana.ondemand.com"
Skipping deletion of services, because the command line option "--delete-services" is not specified.
Process finished.
Use "cf dmol -i 3f89f06c-96f2-11ed-acb0-eeee0a9edd60" to download the logs of the process.

エラーが起きたときには--delete-servicesを加えた以下のコマンドで何度もやり直しましょう。

From Project root directory

cf deploy i348221-ui_1.0.0.mtar --delete-services

実行内容は以下のTutorialを参考しています。
Deploy Your Multi-Target Application (MTA) - Step8: Build, deploy, and test mtar file

3.5. MTAデプロイ結果確認

MTAのデプロイ結果を確認します。
i348221-db-deployerはステータスがSTOPPEDですが、hdiのサービス作るときに動いて停止するので問題ありません。

% cf mta i348221
Version: 1.0.0
Namespace: 

Apps:
name                  requested state   instances   memory   disk     urls
i348221-srv           STARTED           1/1         99M      178.5M   <host>.cfapps.eu10.hana.ondemand.com
i348221-db-deployer   STOPPED           0/1         0        0

Services:
name           service   plan          bound apps                         last operation
i348221-db     hana      hdi-shared    i348221-db-deployer, i348221-srv   create succeeded
i348221-auth   xsuaa     application   i348221-srv                        create succeeded

i348221-srvのURLをコピペしてブラウザで開きます。この時点ではWeb Applicationsはありません。

Booksのリンクを開いても認証していないので見られません。仮に認証してもデータを入れていないので中身がありません。

Books

{"statusCode":401,"code":"401","message":"Unauthorized"}

実行内容は以下のTutorialを参考しています。
Deploy Your Multi-Target Application (MTA) - Step8: Build, deploy, and test mtar file

4. HANA Cloud データ登録

4.1. DB Explorerにhdi追加

DB Explorerを開きます

hdiを追加。

4.2. データインポート

Tablesを選択し、"MY_BOOKSHOP_BOOKS"を右クリックして「Import Data」をクリック。

cds add sampleコマンドで追加されたcsvファイルを選択して以下の設定でimport。

5. Fiori系設定追加

5.1. SAP Cloud service 追加

app/i348221/webapp/manifest.jsonを手で修正します。ここのsap.cloud->serviceで指定しているi348221はBTP Regionでユニークでないといけないらしい。SAP Launchpad serviceから識別するIDで、後のmta.yaml修正時にこのIDを使います。

app/i348221/webapp/manifest.json変更点(diffコマンド実行結果)

@@ -139,6 +139,10 @@
       }
     }
   },
+  "sap.cloud": {
+    "public": true,
+    "service": "i348221.service"
+  },
   "sap.fiori": {
     "registrationIds": [],

実行内容は以下のTutorialを参考しています。
Prepare SAP Launchpad Service Setup - Step4: Add SAP Cloud service

5.2. mta.yamlに画面系設定追加

mta.yamlに画面系設定を手で追加。yamlファイルのインデントが正しくないと次ステップでエラーになるので要確認。

modulesにdestinations追加
1. i348221-app-srv
2. i348221-html5-repo-host
3. i348221-auth
resourcesにDestination Serviceとして"i348221-destination"追加
resourcesにHTML5 Application Repository Serviceとして"i348221-html5-repo-host"を追加

少し複雑になってきたので、アーキテクチャの図にアプリ名、サービス名をかっこ()付きで追加。そして、Destination名はオレンジ文字で追加しました。

./mta_yaml変更点(diffコマンド実行結果)

@@ -35,6 +35,44 @@
     requires:
       - name: i348221-db
 
+  - name: i348221-destinations
+    type: com.sap.application.content
+    requires:
+      - name: i348221-auth
+        parameters:
+          service-key:
+            name: i348221-auth-key
+      - name: i348221-html5-repo-host
+        parameters:
+          service-key:
+            name: i348221-html5-repo-host-key
+      - name: srv-api
+      - name: i348221-destination
+        parameters:
+          content-target: true
+    parameters:
+      content:
+        instance:
+          destinations:
+            - Authentication: OAuth2UserTokenExchange
+              Name: i348221-app-srv
+              TokenServiceInstanceName: i348221-auth
+              TokenServiceKeyName: i348221-auth-key
+              URL: '~{srv-api/srv-url}'
+              sap.cloud.service: i348221.service
+            - Name: i348221-html5-repo-host
+              ServiceInstanceName: i348221-html5-repo-host
+              ServiceKeyName: i348221-html5-repo-host-key
+              sap.cloud.service: i348221.service
+            - Authentication: OAuth2UserTokenExchange
+              Name: i348221-auth
+              ServiceInstanceName: i348221-auth
+              ServiceKeyName: i348221-auth-key
+              sap.cloud.service: i348221.service
+          existing_destinations_policy: update
+    build-parameters:
+      no-source: true
+
 resources:
   - name: i348221-db
     type: com.sap.xs.hdi-container
@@ -52,4 +90,18 @@
       path: ./xs-security.json
       config:
         xsappname: i348221-${space}
+
+  - name: i348221-destination
+    type: org.cloudfoundry.managed-service
+    parameters:
+      service: destination
+      service-plan: lite
+      config:
+        HTML5Runtime_enabled: true
+
+  - name: i348221-html5-repo-host
+    type: org.cloudfoundry.managed-service
+    parameters:
+      service: html5-apps-repo
+      service-plan: app-host

実行内容は以下のTutorialを参考しています。

Prepare SAP Launchpad Service Setup

5.3. Fioriデプロイ設定の生成・更新

Fioriデプロイ設定を生成・更新をします。カレントディレクトリを./app/<アプリ名>に移動いて以下のコマンド実行します。
destination名を聞かれるので、CAPの"i348221-app-srv"を指定します。

From ./app/i348221 directory

% fiori add deploy-config cf

Adding deploy-config to the project.
info Add:Deploy-config Using: @sap/fiori:deploy-config
? Destination name i348221-app-srv
Adding app to mta config: nsi348221
Updating mta.yaml with module information
   create xs-app.json
   create ui5-deploy.yaml

No change to package.json was detected. No package manager install will be executed.
npm WARN config cache-min This option has been deprecated in favor of `--prefer-offline`.
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs

added 185 packages, and audited 274 packages in 2s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

git diff --statで差分を見ると以下のファイルが変わった模様。同じ内容だけどインデントや行の順番も変えたりしているらしいので、実質はこんなに変わっていないです。

 app/i348221/package-lock.json    | 7087 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 app/i348221/package.json         |   19 +-
 app/i348221/ui5-deploy.yaml      |   25 +
 app/i348221/webapp/manifest.json |  276 ++++-----
 app/i348221/xs-app.json          |   31 +
 mta.yaml                         |  224 ++++----
 package.json                     |   84 +--

大事な点を見ていきます。
/app/i348221/xs-app.json は、ルートや認証についての内容があります。

/app/i348221/xs-app.json

{
  "welcomeFile": "/index.html",
  "authenticationMethod": "route",
  "routes": [
    {
      "source": "^/catalog/(.*)$",
      "target": "/catalog/$1",
      "destination": "i348221-app-srv",
      "authenticationType": "xsuaa",
      "csrfProtection": false
    },
    {
      "source": "^/resources/(.*)$",
      "target": "/resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^/test-resources/(.*)$",
      "target": "/test-resources/$1",
      "authenticationType": "none",
      "destination": "ui5"
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

以下が./mta.yamlの変更点概要。

modulesに"i348221-app-content"と"nsi348221"が追加
servicesのdestinationにui5が追加。おそらくjsなどを取得するためのdestinationではないかと推測

./mta.yaml変更点(多いので折りたたみ)

インデント変更等、実質的な意味を持たない変更を含めてたくさんあり。

./mta.yaml変更点(diffコマンド実行結果)

@@ -1,40 +1,29 @@
-_schema-version: '3.1'
+_schema-version: "3.1"
 ID: i348221
+description: A simple CAP project.
 version: 1.0.0
-description: "A simple CAP project."
-parameters:
-  enable-parallel-deployments: true
-build-parameters:
-  before-all:
-    - builder: custom
-      commands:
-        - npm install --production
-        - npx -p @sap/cds-dk cds build --production
-        - npx rimraf gen/db/src/gen/data
 modules:
 - name: i348221-srv
   type: nodejs
   path: gen/srv
+  requires:
+  - name: i348221-db
+  - name: i348221-auth
+  provides:
+  - name: srv-api
+    properties:
+      srv-url: ${default-url}
   parameters:
     buildpack: nodejs_buildpack
   build-parameters:
     builder: npm-ci
-    provides:
-      - name: srv-api # required by consumers of CAP services (e.g. approuter)
-        properties:
-          srv-url: ${default-url}
-    requires:
-      - name: i348221-db
-      - name: i348221-auth
-
 - name: i348221-db-deployer
   type: hdb
   path: gen/db
-    parameters:
-      buildpack: nodejs_buildpack
   requires:
   - name: i348221-db
-
+  parameters:
+    buildpack: nodejs_buildpack
 - name: i348221-destinations
   type: com.sap.application.content
   requires:
@@ -58,7 +47,7 @@ modules:
           Name: i348221-app-srv
           TokenServiceInstanceName: i348221-auth
           TokenServiceKeyName: i348221-auth-key
-              URL: '~{srv-api/srv-url}'
+          URL: ~{srv-api/srv-url}
           sap.cloud.service: i348221.service
         - Name: i348221-html5-repo-host
           ServiceInstanceName: i348221-html5-repo-host
@@ -72,36 +61,75 @@ modules:
         existing_destinations_policy: update
   build-parameters:
     no-source: true
-
+- name: i348221-app-content
+  type: com.sap.application.content
+  path: .
+  requires:
+  - name: i348221-html5-repo-host
+    parameters:
+      content-target: true
+  build-parameters:
+    build-result: resources
+    requires:
+    - artifacts:
+      - nsi348221.zip
+      name: nsi348221
+      target-path: resources/
+- name: nsi348221
+  type: html5
+  path: app/i348221
+  build-parameters:
+    build-result: dist
+    builder: custom
+    commands:
+    - npm install
+    - npm run build:cf
+    supported-platforms: []
 resources:
 - name: i348221-db
   type: com.sap.xs.hdi-container
   parameters:
-      service: hana
-      service-plan: hdi-shared
     config:
       database_id: d338ddfd-3b14-430d-92be-2d2a691a9afa
-
+    service: hana
+    service-plan: hdi-shared
 - name: i348221-auth
   type: org.cloudfoundry.managed-service
   parameters:
-      service: xsuaa
-      service-plan: application
-      path: ./xs-security.json
     config:
-        xsappname: i348221-${space}
       tenant-mode: dedicated
-
+      xsappname: i348221-${space}
+    path: ./xs-security.json
+    service: xsuaa
+    service-plan: application
 - name: i348221-destination
   type: org.cloudfoundry.managed-service
   parameters:
-      service: destination
-      service-plan: lite
     config:
       HTML5Runtime_enabled: true
-
+      init_data:
+        instance:
+          destinations:
+          - Authentication: NoAuthentication
+            Name: ui5
+            ProxyType: Internet
+            Type: HTTP
+            URL: https://ui5.sap.com
+          existing_destinations_policy: update
+    service: destination
+    service-plan: lite
 - name: i348221-html5-repo-host
   type: org.cloudfoundry.managed-service
   parameters:
     service: html5-apps-repo
     service-plan: app-host
+parameters:
+  deploy_mode: html5-repo
+  enable-parallel-deployments: true
+build-parameters:
+  before-all:
+  - builder: custom
+    commands:
+    - npm install --production
+    - npx -p @sap/cds-dk cds build --production
+    - npx rimraf gen/db/src/gen/data

5.4. .gitignore追加

.gitignoreファイルに以下を追加。git管理しないなら関係ないです。

.gitignore

dist/
resources/
app/*/package-lock.json

実行内容は以下のTutorialを参考しています。
Prepare SAP Launchpad Service Setup - Step12: Add UI build files to .gitignore

5.5. 再ビルドとBTPへ再デプロイ

もう一度ビルドとデプロイをします。カレントディレクトリをプロジェクトルートにして以下コマンド実行です。

From Project root directory

mbt build -t ./
cf deploy i348221_1.0.0.mtar

実行内容は以下のTutorialを参考しています。
Prepare SAP Launchpad Service Setup - Step13: Re-build and re-deploy the .mtar file

5.6. BTP再デプロイ結果確認

5.6.1. BTP再デプロイ結果概要確認

BTP再デプロイ結果を以下のコマンドで確認します。

% cf mta i348221
Version: 1.0.0
Namespace: 

Apps:
name                  requested state   instances   memory   disk     urls
i348221-srv           STARTED           1/1         101.2M   185.3M   <host>.cfapps.eu10.hana.ondemand.com
i348221-db-deployer   STOPPED           0/1         0        0

Services:
name                      service           plan          bound apps                         last operation
i348221-db                hana              hdi-shared    i348221-srv, i348221-db-deployer   create succeeded
i348221-auth              xsuaa             application   i348221-srv                        update succeeded
i348221-html5-repo-host   html5-apps-repo   app-host                                         create succeeded
i348221-destination       destination       lite                                             create succeeded

5.6.2. Destination確認

DestinationをBTP Cockpitから見るとこんな感じ。

Destination一覧

Destination: i348221-app-srv

Destination: i348221-auth

Destination: i348221-html5-repo-host

Destination: ui5

5.6.3. HTML5 Applications

BTP Cockpitのサブアカウントページのメニュー「HTML5 Applications」からリンクをクリックしてFiori画面を開けます。

SAP Launchpad Service から開こうとするには以下の設定が必要です。今回は省略しています。

おまけ

アンデプロイ

検証などが終わり、BTPの実装を全部消したい場合は以下のコマンドで消します。

cf undeploy i348221 --delete-services --delete-service-keys

参考

以下の情報を参考にしました。

AppRouterについて良い情報

ServerlessなFiori Appという情報

あまり見ていないけどHTML5 Appについて勉強になりそう

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up