TrialアカウントでFiori Launchpadサービスを利用してみた


# はじめに

 [SAP CP Trial環境でMulti Target Applicationを作ってみる【Fiori LanchPadモジュールの作成】](https://qiita.com/yonekura-h/items/8d4b95f2532f4f57702a)
上記の記事を参考にTrial環境でLaunchpadを作成しようとしたところデプロイ時に以下のエラーがでてしまいました。

:::note alert
Service operation failed: Controller operation failed: 404 Updating service "portal_resources_demo" failed: Not Found: Error creating service "portal_resources_demo" from offering "portal" and plan "standard": Service plan standard not found. 
:::

調べてみるとポータルサービスがTrialから削除されたので代わりに[SAP CloudPlatformLaunchpad](https://blogs.sap.com/2020/09/08/start-your-free-trial-for-sap-cloud-platform-launchpad/)を利用して開発する必要がありそうです。
参考：https://github.com/sap-tutorials/Tutorials/issues/6138

今回はTrial環境で上記を使用して簡単なLaunchPadサイトを作ってみようと思います。


# LaunchPad Serviceを起動する

Trial環境にログインし、Service MarketplaceからLaunchpad Serviceを検索します。
![スクリーンショット 2022-05-31 17.37.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/7efc2d12-9848-b134-745d-ffe563da5d9f.png)

出てきたLaunchpad Serviceを選択し「Create」ボタンを押下、
![スクリーンショット 2022-05-31 17.37.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/7d04df5b-19da-88ac-6761-92b91f965e1b.png)

Planは「Standard」を選択してサービスを作成します。
![スクリーンショット 2022-05-31 17.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/2b9a41b3-016a-1d3c-7cca-52efbb3dc79d.png)

LaunchPad Serviceがたちあがりました！
![スクリーンショット 2022-05-31 17.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/328f12b1-f174-335b-45c3-e4181b82c7ee.png)

# ユーザにロールを割り当てる
LaunchPadが立ち上がったらUsersから任意のユーザを選択し、Assign Role Collectionボタンを押下します。
![スクリーンショット 2022-05-31 17.39.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/e22f2657-d05e-80f6-0471-b3de9d6ffd47.png)

「Launchpad_Admin」を選択しロールを割り当てます。
![スクリーンショット 2022-05-31 17.39.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/a4320fcb-4fdc-53e9-bc14-ebe71eeecab5.png)

# Launchpadサイトを作成する
次に「Instances and Subscriptions」タブからLaunchpad Serviceを開きます。（下記画像赤枠部分クリック）
![スクリーンショット 2022-05-31 17.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/5314fdf5-e0f7-a8fe-8ef6-1ef097f35126.png)

サイトディレクトリ画面が開くので新しく「サイト作成」を押下し、サイトの名称を入力しサイトを新たに追加します。
（今回は「demoFLP」としました）
![スクリーンショット 2022-05-31 17.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/cf5e0849-731f-c9e6-f220-4d0bebf7b8b7.png)

無事サイトが追加されます。（サイト名称部分も「demoFLP」になっている）
![スクリーンショット 2022-05-31 17.40.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/6e7a13b5-446a-7d23-5638-1b7cfb304bc1.png)

次はこのサイトに表示させるFioriアプリを登録していきます。

# MTAプロジェクトをデプロイする
サイトに登録するFioriアプリをTrial環境にデプロイしていきます。
サンプル用にUIモジュールを２つ追加したMTAプロジェクトを作成しました。
![スクリーンショット 2022-05-31 18.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/764104f2-e746-308d-9d6a-f22f1091934e.png)

デプロイするにあたってmta.yamlを記載します。

```mta.yaml
ID: demo
_schema-version: '2.1'
parameters:
  deploy_mode: html5-repo
version: 0.0.1
modules:
  - name: demo-destination-content
    type: com.sap.application.content
    requires:
    - name: dest_demo
      parameters:
        content-target: true
    - name: demo_html5_repo_host
      parameters:
        service-key:
          name: demo_html5_repo_host-key
    - name: uaa_demo
      parameters:
        service-key:
          name: uaa_demo-key
    parameters:
      content:
        instance:
          destinations:
          - Name: demoFLPService_demo_html5_repo_host
            ServiceInstanceName: demoFLPTest-html5-app-host-service
            ServiceKeyName: demo_html5_repo_host-key
            sap.cloud.service: demoFLPService
          - Authentication: OAuth2UserTokenExchange
            Name: demoFLPService_uaa_demo
            ServiceInstanceName: demoFLPTest-xsuaa-service
            ServiceKeyName: uaa_demo-key
            sap.cloud.service: demoFLPService
          existing_destinations_policy: ignore
    build-parameters:
      no-source: true	
  - name: demo_ui_deployer
    type: com.sap.html5.application-content
    path: demo_ui_deployer
    requires:
      - name: demo_html5_repo_host
    build-parameters:
      requires:
        - name: demoUI01
          artifacts:
            - './*'
          target-path: resources/demoUI01
        - name: demoUI02
          artifacts:
            - './*'
          target-path: resources/demoUI02
  - name: demoUI01
    type: html5
    path: demoUI01
    build-parameters:
      builder: custom
      commands:
        - npm install
        - npm run build
      supported-platforms: []
      build-result: dist
  - name: demoUI02
    type: html5
    path: demoUI02
    build-parameters:
      builder: custom
      commands:
        - npm install
        - npm run build
      supported-platforms: []
      build-result: dist
resources:
  - name: demo_html5_repo_runtime
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: demo_html5_repo_host
    parameters:
      service: html5-apps-repo
      service-name: demoFLPTest-html5-app-host-service
      service-plan: app-host
    type: org.cloudfoundry.managed-service
  - name: uaa_demo
    parameters:
      path: ./xs-security.json
      service-plan: application
      service: xsuaa
      service-name: demoFLPTest-xsuaa-service
    type: org.cloudfoundry.managed-service
  - name: dest_demo
    parameters:
      config:
        HTML5Runtime_enabled: true
        version: 1.0.0
      service: destination
      service-name: dest_demo
      service-plan: lite
    type: org.cloudfoundry.managed-service
```

以下コマンドからビルドとデプロイを行います。

```
mbt build
cf deploy mta_archives/demo_0.01.mtar
```

デプロイが完了したら次はデプロイしたUI5アプリをLaunchpadに表示していきます。

# Launchpadで設定を行う
先ほど作成したLaunchpadのサイトマネージャを開き、コンテンツエクスプローラを開きます。
テーブルに先ほどデプロイしたUI5アプリにチェックを入れて「追加」ボタンを押下します。
![スクリーンショット 2022-05-31 19.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/03afe1ae-ebae-b361-ee6f-e45baea62a05.png)

次にマイコンテンツタブに戻り、「新規」ボタンを押下して「グループ」を選択します。
![スクリーンショット 2022-05-31 19.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/bfeb39de-df1d-8101-d7db-e3610f591e8b.png)

タイトルには任意のグループタイトルを設定してください。
画面右に表示されている割当明細のサーチインプットにフォーカスを当てると下に先ほど追加したUI5アプリが表示されるので+ボタンを押下してグループに対象のアプリを登録し、「保存」ボタンを押下します。
![スクリーンショット 2022-05-31 19.24.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/16d3c5a0-2e38-dbc3-3b71-ee498e1104b1.png)

次にEveryoneロールを選択しロール情報を編集します。
![スクリーンショット 2022-05-31 19.33.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/1e0334d6-723f-1c9f-a76e-102b38b45a6b.png)

編集ボタンを押下し、先ほどと同じように割当済明細からUI5アプリを登録し、保存ボタンを押下します。
![スクリーンショット 2022-05-31 19.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/da333b77-4494-fb51-89b1-2050d443b7b4.png)

サイトディレクトリに移動し、作成したサイトに移動します。
![スクリーンショット 2022-05-31 19.37.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/58a58159-9696-8bff-6d1b-08893eedf337.png)

無事アプリが表示されました！
![スクリーンショット 2022-05-31 19.25.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411770/470591f8-b677-8d24-e78a-4b5ba973d0b7.png)

# まとめ
FLPの挙動をTrialアカウントで気軽に確認したい時便利だなと思ったので備忘録のため記事を作成しました。
Fiori画面をUI5アプリとしてデプロイするための設定をmta.yamlに適用する部分がいまだにしっかりと理解できていないのでこれからも調べていこうと思います。