【SAPUI5】WebIDEでデプロイできないとき、ローカルからABAPサーバにデプロイする方法

##はじめに
この記事は [chillSAP 夏の自由研究2020](https://note.com/chillsap/n/n66e12ef65d11/) の記事として執筆しています。

WebIDEで開発していると、クラウドプラットフォームの障害などでたまにABAPサーバにデプロイできなくなることがあります。すぐに復旧すればよいですが、1日くらいかかることもあります。スケジュールの都合で待っていられない！となったときに、ローカルからデプロイする方法をご紹介します。
[UI5 Tooling](https://sap.github.io/ui5-tooling/)を使えば完全にローカルで開発することも可能ですが、今回はそういったことは置いておいて「デプロイだけできるようにする」ことを目的とします。

##前提

- [VS Code](https://code.visualstudio.com/)、[Node.js](https://nodejs.org/ja/download/)、[Git](https://gitforwindows.org/)がインストール済
- VS Codeがインストールされた端末からABAPサーバにアクセスが可能であること
- WebIDEでアプリの動作を確認済で、「あとはデプロイするだけ」の状態になっていること
- ABAPサーバで移送依頼を登録済であること

##実行環境

- @ui5/cli: 1.13.0
- nwabap-ui5uploader: 0.3.4
- バックエンド：S/4HANA 1909(FPS01) On-premise 

##ステップ
1. ソースコードをGitからクローン
2. デプロイ用の設定を追加
3. デプロイ

###1. ソースコードをGitからクローン

```
git clone <リポジトリURL>
```

クローンしたら、`npm install`を実行してモジュールをローカルにインストールします。


###2. デプロイ用の設定を追加
[nwabap-ui5uploader](https://www.npmjs.com/package/nwabap-ui5uploader)をインストールします。

```
npm install nwabap-ui5uploader --save-dev
```

.nwabaprcというファイルを作成して、プロジェクト直下に置きます。ここでサーバーやログイン情報などを設定します。（コメントは削除してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9b91b44b-8604-af41-dd81-7bec2e21c959.png)


```:.nwabaprc
{
    "base": "./dist", //ABAPサーバーに持っていくフォルダを指定
    "conn_server": "http://myserver:8000", //サーバ
    "conn_user": "upload",                 //ログインユーザ
    "conn_password": "upl04d",             //パスワード
    "abap_package": "$TMP",                //パッケージ
    "abap_bsp": "ZMOB81TEST",            //BSPアプリのID
    "abap_bsp_text": "UI5 upload local objects", //BSPアプリのテキスト
    "abap_transport": "S4DK901491"         //移送依頼
}
```

###3. デプロイ
①ビルド、②デプロイというステップで行います。
以下のコマンドでビルドします。

```
npm run build
```
このコマンドはpackage.jsonにある以下のスクリプトを実行します。WebIDEでビルドするのと同じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5e5d6bcf-95da-bfeb-2fac-bef6f2439013.png)

続いてデプロイです。

```
npx nwabap upload
```

すべてOKで終了すれば完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c45d4fbf-738c-31ad-f00c-2021c54a9031.png)

##動作確認
以下の観点で動作確認します。
①ローカルからデプロイしたアプリが動くか
②さらにWebIDEからのデプロイをしてもちゃんと動くか

###①ローカルからデプロイしたアプリが動くか
カタログ、タイルの設定をしてラウンチパッドで開いてみます。
カタログの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c38b34ae-18e5-49d7-86a0-ae9dde0ea210.png)
タイルの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d57c3917-cc47-217e-9040-79859c8f83a8.png)
初回にタイルを開いたとき、Component.jsが見つからないというエラーになりました。
プログラム `/UI5/APP_INDEX_CALCULATE`を実行したところ、開けるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ac641279-fbeb-7ec3-08ab-74aceb4a1b07.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5d101f8a-f509-4e5c-3f65-6a91c9315260.png)
中身のないアプリですが、この状態で正常に開けています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/aa5c0d5d-f068-925f-2582-5dc236a121d8.png)

###②さらにWebIDEからのデプロイをしてもちゃんと動くか
WebIDEからのデプロイができるようになったときに、デプロイ後のアプリがちゃんと動くか確認します。
"Update an existing application"を選択します。以降はウィザードに従ってデプロイするだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e895a9f3-88ac-bd7e-e842-da96dd499378.png)
WebIDEでの更新分が反映され、正常に動きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/87b94bee-faec-f75e-96f4-a161fd9aeec6.png)

##まとめ
WebIDEからデプロイできなくなっても、ローカルでデプロイできます。VS Codeなどの環境さえ整っていれば簡単なステップでデプロイが可能です。いざというときの保険に、ローカル環境は持っておきたいですね。

##関連記事
[【SAPUI5】UI5 Tooling：ABAPサーバへデプロイ](https://qiita.com/tami/items/82973dc5ad54008ebec3#2-ui5-nwabap-deployer%E3%82%92%E4%BD%BF%E3%81%86)