OutSystems の Forge にある Elastic 連携モジュールのご紹介

##はじめに

皆様、こんにちは！ Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリストの鈴木章太郎です。本稿は、 [OutSystems Advent Calendar 2021](https://qiita.com/advent-calendar/2021/outsystems)の17日目です。
##Forge って何？
まずここから始めていきましょう。と言っても僕も OutSystems 触り始めたばかりであまり詳しくはないですw
**OutSystems Forge は、再利用可能なオープンコードのモジュール、コネクタ、UI コンポーネント、ビジネスソリューションのリポジトリで、アプリの納期を短縮するのに役立つものです。詳しくは、FAQをご覧ください。必要なアセットが見つかりませんか？アイデアを投稿してください。**と[定義](https://www.outsystems.com/forge/)されています。すなわち、これを使って、他のシステム、クラウドプラットフォーム、SaaS、API、その他を拡張機能として呼び出せる、ということですよね？ OutSystems 自体便利な上に、これが使えるのは超便利です。
## Elastic との連携モジュールについて
実は先日、8日に、[Elastic Meetup](https://www.meetup.com/ja-JP/Tokyo-Elastic-Fantastics/events/281836255/)が開催され、LT 大会だったのですが、僕はその中で１枚、これについて紹介したのが[この資料](https://www.slideshare.net/shosuz/introduction-to-extensions-and-other-useful-features-for-developing-apps-using-elastic-ui-cloud-integration-lowcode-tool-integration)です。その１枚がこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/d4cd5e5c-2dc0-5520-9804-bcf3dd134bec.png)
いくつかあげられていますが、新し目のものでは、**Elastic RUM**や **Elastic APM for Server** が便利かもしれないと思います。**APM = Application Performance Monitoring** で、みなさんご存知ですよね？ Elastic では、ログ、メトリクス、そして　APM を**監視の三大要素**と呼んでいます。この3つで、システムやアプリの状況を立体的に把握し、すぐに問題を解決し、通常通りのパフォーマンスを出せるようにする、あるいはマーケティングや営業に資するデータを獲得できるようにする、という意味で、**Observability = 可観測性**は、マイクロサービス化されたクラウドネイティブなアプリになればなるほど、より重要なモノになりつつあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/1460c539-a5f9-6288-134c-c77f1077f5e1.png)
 Elastic はこの APM も各種言語、各種クライアントテクノロジーに対応したエージェントを準備しています。非常に豊富ですので、皆さん、ぜひ試してみてください。
ここで RUM と言っているのは、Real User Monitoring という意味で、具体的には、JavaScript の SPA である Angular、React/React Native/Vue.js の3つのプラットフォームにも対応していますよ、という意味と考えて戴いて OK です。
##通常の場合の Elastic APM 導入手順
ここでは、React クライアントの場合の導入手順について、簡単にご紹介します。（一部古いバージョンの表記もありますがほぼ同じです）
Agent のインストールと、APM サーバー (Elastic Cloud) 側の設定だけご紹介しています。
まずは RUM エージェントをインストールし、構成します。
サーバーサイドアプリケーションの場合、RUM エージェントを依存関係としてインストールし、初期化します。

```
npm install @elastic/apm-rum --save
``` 

ここでは、フロントエンドが React アプリケーションであるため、index.js と同じディレクトリの下に、次のコードを含めまた rum.js という名前のファイルを作ります。

```JavaScript
import { init as initApm } from '@elastic/apm-rum'
var apm = initApm({
 // 必要なサービス名を設定します（使用可能な文字は a-z、A-Z、0-9、-、_、スペースです）
 serviceName: 'carfront',
 // APMサーバーで使用されるアプリケーションのバージョンを設定し、
 // 適切なソースマップを見つけられるようにします
 serviceVersion:'0.90',
 // カスタムのAPMサーバーURLを設定します（デフォルト：http://localhost:8200）
 // Elastic Cloud の APM エンドポイントです
 serverUrl: 'https://aba7c3d90b0b4820b05b0a9df44c096d.apm.us-central1.gcp.cloud.es.io:443',　
 // distributedTracingOrigins: ['http://localhost:8080'],
})
export default apm;
```

RUM エージェントの初期化に必要な手順はこれだけです。以下に、構成のいくつかについて簡単に説明します。

**サービス名**：サービス名を設定する必要があります。APM UI でアプリケーションを表します。意味のある名前にしましょう。
**サービスバージョン**： アプリケーションのバージョンです。このバージョン番号は、適切なソースマップを見つけるために APM サーバーでも使用されます。ソースマップの詳細についてはここでは割愛します。
**サーバー URL**： APM サーバーの URL です。APM サーバー URL は通常、公共インターネットからアクセスできることに注意してください。RUM エージェントはインターネット上のエンドユーザーのブラウザから、データを APM サーバーにレポートするからです（上記例では架空の文字列）。
※ なお、**オリジン間リクエスト(CORS)**を含めるためには、distributedTracingOrigins 構成オプションを設定する必要があります。また、バックエンドアプリケーションに CORS ポリシーを設定する必要もあります。Elastic Cloud 設定ファイルで設定可能ですが、ここでは割愛します。
このような設定を行った結果、下記のようなトランザクションフロー等が取得できることになります(Kibana はちょっと古いバージョンのものですがほぼ同じです）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/56b31103-02b0-d176-caa4-39e2abd59bd8.png)
##OutSystems の Forge にある Elastic 連携モジュールのご紹介
そこで、OutSystems の Forge にあるこの連携モジュールを、Services Studio から利用してやると、この辺りのコードを書かずに、実際に設定された上記のようなデータを Elastic および　Kibana で可視化することが可能になります。
**[Elastic RUM](https://www.outsystems.com/forge/component-overview/7341/elastic-rum)**
2019年に出ています。このコンポーネントにより、**OutSystems の Reactive Web およびモバイル・アプリケーション** を Elastic APM で監視することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/78a4eb1b-75f2-e971-dce1-ffcb25b0da11.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/0b402501-a41b-acee-7998-bb09ab9b9435.png)
以下は、説明文です。
「Elastic APM は、Elastic Stack 上に構築されたアプリケーション・パフォーマンス・モニタリング・システムです。このコンポーネントを使用すれば、RUM（Real User Monitoring） により、従来の Web アプリケーションの監視を簡単に開始することができます。
ソフトウェア・サービスやアプリケーションをリアルタイムで監視し、受信リクエストの応答時間、データベース・クエリ、キャッシュへの呼び出し、外部 HTTP リクエストなどに関する詳細なパフォーマンス情報を収集することが可能です。
・　コンポーネントの主な機能
・　簡単な操作
・　サーバーエージェント不要
**Reactive な Web アプリやモバイルアプリ**で動作します。
**Elastic の主な機能 **
・　リクエストのレスポンスタイムを確認 
・　処理されなかったエラーや例外の確認 
・　コール階層の可視化(ウォーターフォール図)
・　APM データは Elasticsearch のインデックスの一つ
・　他の Elastic Stack の機能とのミックス
・　Machine Learning やアラートとの統合を内蔵」


**[Elastic APM for Server](https://www.outsystems.com/forge/component-overview/7341/elastic-rum)**

2020年に出ています。以下は説明文です。
「サーバーサイドのパフォーマンスを監視することができる Elastic APM プラグインです。クライアント側とサーバー側の監視関連情報を収集・整理することで、OutSystems の **Reactive Web アプリケーションとモバイルアプリケーション**のトラブルシューティングとパフォーマンスの把握がより容易になります。詳しくは、[ドキュメントタブ](https://www.outsystems.com/forge/Component_Documentation.aspx?ProjectName=elastic-apm-for-server&ProjectId=9080)をご覧ください。」
このドキュメントタブのリンクを見ると、詳細な解説がされています。
**[ドキュメントタブ](https://www.outsystems.com/forge/Component_Documentation.aspx?ProjectName=elastic-apm-for-server&ProjectId=9080)の内容**
「はじめに
このコンポーネントを使用するには、まず Elastic のアカウントを作成することから始めてください。そのためには、https://www.elastic.co/ にアクセスし、新しいアカウントを作成してください。その後、画面上の指示に従って新しいデプロイメントを作成してください。最後に **Open Kibana** をクリックし、画面に表示されている認証情報を入力してください。...」
ということで、このあと、Elastic と Kibana、それに APM についての丁寧な解説が書かれています。ぜひご参照ください。
その最後に、**付加機能**とあります。
「さらに、上記のように自動的にデータを収集することに加えて、特定のリクエストをトレースすることもできます。そのために、以下のアクションが用意されています。
- **StartTransition : リクエストの追跡を開始する**
- **EndTransition : リクエストの追跡を終了する**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/733925a9-f5e1-43ec-a76a-b0d7721b5782.png)
これらのアクションを使用して収集された情報は、Kibana ダッシュボードでも見ることができ、StartTransaction アクションで渡された名前によって識別されます。以下の画像では、"testapi" という名前で動作しているのが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/7622c052-dcd9-832f-777b-41e0abdff62f.png)
」
これはなかなか便利そうですし、この図を見ると、OutSystems での開発のフローに準拠したものになっていて、極めて簡単に導入できそうで、好感が持てますよね？（あまり評価者がいないのですが...)

##実際の使い勝手について
ということで、これらを実際に自分の Elastic Cloud のインスタンス (AWS or Azure or GCP) で検証したいのですが、実は今、テクニカルな内容を検証する時間がなくて申し訳ありません。。。理由は諸々ありますが、近々必ずアップデートさせて戴く予定です。
特に、**Elastic APM for Server** の方は、評価者もいないのですが新しいので、ぜひ検証したいです。もちろん **Elastic RUM** も実際にやってみます！
ということで今回はカレンダー穴を開けないようにw、概要だけご紹介しました。
実際の使い勝手等は少々お待ちください！すぐにアップデートします。

##告知
1. 明日18日土曜日は、[.NET ラボ 12月登壇](https://dotnetlab.connpass.com/event/232383/)です。こちら是非ご参加ください！
Blazor WebAssembly と ASP.NET Web API と Entity Framework 6.0 と Azure SQL Database に Elastic APM を組み合わせたアプリをご紹介予定です。
![スクリーンショット 2021-12-14 12.15.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/d52ce233-f09d-f907-403e-26591e6e16d2.png)

2. 来週12/20（月)　開催の [VS Code Meetup #17 - 忘年会 今年も最後まで盛り上がりましょう！（懇親会開催予定](https://vscode.connpass.com/event/231495/)で、「(仮）React/Flutter/Blazor の開発・デバッグ環境を VSCode でサクッと構築する」という LT をさせて戴きます。ぜひご参加ください。LT もまだ空いてます！w
![スクリーンショット 2021-12-17 15.14.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/17a09a20-38df-9783-c6af-6e7d3866e1a3.png)　

2. 来週12/22（水）開催の[Jagu'e'r Cloud Native #3 みんなで語り合おう！クラウドネイティブLT祭り](https://jaguer-cloud-native.connpass.com/event/231835/)で、「Firebase/Firestore 拡張機能 による Elastic App Search 連携について」というタイトルで、この画期的な連携機能を、デモを交えて5分でご紹介予定です。Jagu'e'r 会員企業の方は、ぜひご登録・ご参加ください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33599/d75b1cfb-1fa9-1a73-af00-62a45fab72ca.png)

ということで、それではとりあえず一旦また！
鈴木章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト