新しくなったSAP CloudPlatform Trial環境にSAPUI5アプリをデプロイしてみた

#はじめに
この記事は SAP Advent Calendar 2019 の12月12日(木)分の記事として執筆しています

株式会社KYOSOでSAP Cloud PlatformやS/4 HANA上でのFioriアプリ開発をしています。

今年の秋ごろにSAP Cloud Platform Trialの環境ががリニューアルして、
Cloud Foundry環境がメインになりました。

これまでTrialのNeo環境を利用してSAPUI5アプリケーションを作ってみたりしていたのですが、
あらためてCF環境でSAPUI5アプリ開発を試してみました。

これからSAP Cloud Platform TrialでSAPUI5を触ってみる！という方にむけて
・SAPUI5でFiori画面を作る
・CF環境にデプロイする
といったところの参考になればと思います。

手順等は以下のチュートリアルを参考にしています。
・Develop Your First SAPUI5 Web App with SAP Web IDE
　内容：SAPUI5アプリの作成～デプロイ・デバッグ

#SAP CloudPlatform Trialでデプロイ準備をする

SAP CloudPlatform Trialにアクセスしてみます。
初めてアクセスするときはIDがないと思うので、アカウントを作成する必要があります。（無償）

ログインするとNeo/CFの選択がなくなり、
CF環境にのみアクセスできるようになっています。
※はじめての場合はtrialアカウントを作成するリージョンを選べます。お好きなほうをえらびましょう
　
「Enter Your Trial Account」を押下してCF環境のコクピット（管理画面）にアクセスできます。

リージョンを選択してtrial環境を作成した時点で、
GrobalAccountとSubAccountが作成されていると思います。

アカウントについてはこちらを参照ください。

CF環境の利用は期限付き（30日間）ですが、期限後が過ぎても利用期間を延長することが可能です。
（右上に期間が表示されてます。）

trialと書かれているサブアカウントを押下して、Speceを作成します。
CF環境でサービスやアプリケーションを利用するときはSpeceという単位に割り当てます。
今回はSAPUI5アプリのデプロイ先となるSpeceを作成します。

OverViewページからメニューのSpacesを押下し、
「create Space」を押下します。

Space Name
demo ※任意

SAPUI5アプリケーションをデプロイするためのSpaceが作成できました。

##WebIDEでSAPUI5アプリケーションを作る

SAP Cloud Platform TrialのトップページからWebIDE Fullstackサービスにアクセスします。

###CF環境設定
WebIDEでプロジェクトを作成する前に、
先ほど作成したTrial環境のSpeceを設定します。

WebIDEの設定画面からCloudFoundryの設定を変更します。
APIエンドポイントとデプロイ先となるSpaceを選択します。
APIエンドポイントを変更した際にログインを求められたときはCloudPlatformのログイン情報を入力してください。

※APIエンドポイントはサブアカウントのOverViewに表示されています

わすれずに「Save」を押下します。

###MTAプロジェクトの作成

ホーム画面でNew Project from Templateを選び、
デプロイお試し用に中身のないSAPUI5アプリケーションを以下の手順で作成してみます。

Neo環境へのデプロイであればSAPUI5のプロジェクトを作るところからですが、
CF環境にデプロイするためにまずMTA（Multi Target Application）を作成します。

EnvironmentでCloudFoundryを選択し、Multi-Target Applicationを選択

任意のプロジェクト名を設定してFinishを押下します。
WebIDEのWorkSpaceにMTAのprojectが作成されました。

作成されたプロジェクトを右クリック→New→HTML5 Moduleを選択すると、
再びテンプレートの選択画面が表示されるので、SAPUI5 Applicationを選択します。

SAPUI5 Applicationを選択して必要項目を任意に設定し、Finishを押下
MTAの配下にSAPUI5のプロジェクトが作成されています。

とりあえずアプリを動かしてみようということで無邪気にRunを押下してみます。
rootにするファイルの選択画面が表示されるので、index.htmlを選択します。

エラーで怒られて実行できなかったので、表示された設定画面でCloudFoundryの設定を参照するようにラジオボタンを変更し、CF環境の設定値を入力します。

少し待ちます（右下で実行中マークが動きます。）
処理が終わるとログイン画面が表示されるのでCloud Platformのログイン情報を入力します。

無事画面が表示されました。

###プロジェクトのBuild
作成したMTAをBuildしてデプロイするパッケージを作成します。
MTAプロジェクトを選択して右クリック→Build→Build with Cloud MTA Build Toolを選択

完了するとコンソールにメッセージが表示され、
.mtarファイルが作成されることが確認できます。

作成された.mtarファイルを選択して右クリック→Deploy→Deploy to SAP Cloud Platformを選択
デプロイ先の選択ダイアログが表示されるのでCF環境の設定を入力します

Deployを押下すると処理が実施されます。
コンソールにデプロイ成功のメッセージが出力されたら終了です。

###CF環境上のアプリを確認

デプロイに成功したらSAP Cloud Platform Trialからtrialサブアカウント→Spaceに移動します。
Speceを見るとApplicationに3つ増えていました。

とりあえず一番上のappRouterの詳細を見てみると、
SAPUI5アプリのURLが表示されています。

純粋にこのURLをクリックしても「Not Found」と書かれているだけで悲しくなってしまいましたが、
WebIDEからRunした際のパス（例：/demodeployApp-1.0.0/index.html）をつけてあげると無事に動いてることが確認できました。

WebIDEで実行した場合

appRouterのURLにパスを追加した

デプロイ後に確認した際、Applicationに増えていたもう一つのRouterはWebIDEから実行されているURLみたいです。

##さいごに
上記の内容でSAP Cloud Platform Trial環境でSAPUI5アプリを作成→デプロイまでを行うことができました。

今回はここまでの記事になりましたが、
Portal機能を使ってFiori LaunchPadから作成したアプリを動作できるようにしたり、
HANA DBからOData経由でCRUDをできるようにしていけるようにしていく内容も投稿したいと思います。

これからSAP Cloud PlatformやSAPUI5アプリ開発をしていくにあたって参考になればと思います。

わたしとしてもCloud Foundryをいままで使ったことがほとんどなかったのですが、
Cloud Foundry環境はSAP Cloud Platformのメインになっていくと思うので
今のうちに習得していきたいとおもいます。