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

はじめに

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がないと思うので、アカウントを作成する必要があります。(無償)

コメント 2019-12-09 141609.png

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

図7.png

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

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

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

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

図6.png

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

Space Name
demo ※任意
図8.png

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を選択

コメント 2019-12-10 105943.png
コメント 2019-12-10 110042.png

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

image.png

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

図12.png
図4.png
図5.png

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

図14.png

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

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

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

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

図18.png
図19.png

プロジェクトのBuild

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

図20.png

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

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

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

CF環境上のアプリを確認

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

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

図27.png

純粋にこの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のメインになっていくと思うので
今のうちに習得していきたいとおもいます。

カテゴリー:

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中