UIコンポーネントのデモページを作成しました

Engineering

CloudWatch Logs Insightsでログを抽出・分析する

fincode開発チームです！ 今回は、fincodeでも利用しているAmazon Web Services（AWS）のCloudWatch Logs Insightsを使用して、アプリケーションのログを簡単に抽出し、分析する方法を紹介したいと思います。 はじめに アプリケーションの運用や開発において、ログデータは貴重な情報源です。エラーや警告、トランザクションの記録など、アプリケーションの挙動や状態を理解するために不可欠な要素です。 しかし、アプリケーションが成長し、複雑化するにつれて、ログデータの量も増加し、その分析はますます困難になっています。 ここで登場するのが、Amazon Web Services（AWS）の提供するCloudWatch Logs Insightsです。このサービスは、ログデータを簡単に抽出し、リアルタイムで効果的に分析するための強力なツールです。 ログデータから価値ある情報を引き出し、アプリケーションのパフォーマンスを向上させる手助けをしてくれます。 CloudWatch Logs Insightsとは CloudWatch Logs Insightsは、AWSのモニタリングおよび管理サービスであるCloudWatchの一部として提供されています。このサービスを使用することで、アプリケーションのログデータをリアルタイムで簡単にクエリし、分析することができます。 従来のログの探索や分析では手間がかかっていた作業が、CloudWatch Logs Insightsを使用することで迅速かつ効率的に行えるようになります。 ログの重要性 ログデータは、アプリケーションがどのように動作しているか、ユーザーやシステムとのインタラクションがどのように進行しているかを記録する貴重な情報源です。特に、以下のような状況でログの分析が重要となります。 エラーのトラブルシューティング: エラーメッセージやスタックトレースを分析することで、アプリケーションの不具合を特定し、修正する手助けをします。 パフォーマンスの最適化: レスポンスタイムやリソース使用量などの情報を分析することで、アプリケーションのボトルネックを特定し、パフォーマンスを向上させる施策を打つことができます。 セキュリティ監視: 不正アクセスや異常なアクティビティを検知するために、アクセスログや認証イベントを監視することが重要です。 CloudWatch Logs Insightsは、これらの課題に取り組むためのツールとして優れた機能を提供しており、ログの分析作業を効率化し、アプリケーションの品質向上に寄与します。 次に、CloudWatch Logs Insightsの基本的な概念や操作方法について探求していきましょう。 実際に使ってみる １．Logs Insights（ログのインサイト）を開く AWSコンソールからCloudWatchを開きログ＞ログのインサイトを選択。 ２．ロググループを選ぶ 抽出したいログが出力されてるロググループを選ぶ。(複数選択できる) ３．ログを抽出するクエリを書いて実行する クエリを書くことでログの表示ができる。（SQLみたいな感じ） @messageに1レコードのログが入っている。 そこからfilterを使って不要なログのレコードは取り除いたり、PARSEを使って欲しい情報のみを抽出してフィルタリング（filter）に使ったり並び替え（sort）に使ったりできる。 今回はAPI Gatewayのログを見てみることにします。 参考 CloudWatch Logs Insights のクエリ構文 - Amazon CloudWatch Logs API Gateway での CloudWatch による REST API のログの設定 CloudWatch Logs Insights は、さまざまなタイプのログをサポートします。Amazon CloudWatch Logs に送信されるすべてのログについて、CloudWatch Logs Insights は 5 つのシステムフィールドを自動的に生成しています。 フィールド名 備考 @message 生の未解析のログイベント。要はアプリで出力したログの中身 @timestamp ログイベントの timestamp フィールドに含まれるイベントタイムスタンプ。 @ingestionTime CloudWatch Logs によって受信された時間。 @logStream ログイベントの追加先のログストリームの名前を示します。ログストリームは、生成時と同じプロセスでログをグループ化します。 @log ロググループ識別子。 API Gatewayのログを見てみましょう。 下記のようなクエリを書いて実行することで、集計したデータを取得することができます。 fields@message # 単純に表示するとき | display@timestamp,path,httpMethod,status,authorizererror,dataProcessed,integrationErrorMessage,integrationLatency,sourceip # path毎に集計 | stats avg(integrationLatency) as avg_integrationLatency , sum(integrationLatency) as sum_integrationLatency , count(*) as count_path by path as path | sort count_path desc すると下記のように結果を出力できます。処理時間によってソート出来ていて、かつ各情報を簡潔に確認できますね。 @単純に表示するとき @path毎に集計 count(*) as path by pathのように記述することで、エンドポイント単位で集計することもできます。 ４．使用したクエリを保存して他の人にも使ってもらう。 作ったクエリはAWSに保存できます。汎用性のあるものはできたら保存しておけば同一環境の他の人たちも気軽に使えて便利です。 まとめ この記事では、AWSのCloudWatch Logs Insightsを使ってアプリケーションのログをスマートに抽出し、リアルタイムで分析する方法をご紹介しました。 ログデータの探索や分析が面倒だった過去とは違い、CloudWatch Logs Insightsはその手間を劇的に削減してくれる頼もしいツールです。 fincodeではこのようなサービスを活用しながら継続的なサービスの改善に取り組んでいます！ ご意見・ご要望もお待ちしております！  

• AWS

2023.09.20開発チーム

Engineering

fincodeの構築方法~UIコンポーネント編~

fincode開発チームです！ fincodeを使ってみた 第四弾・UIコンポーネント編をご紹介します！ 今回は、UIコンポーネントを使って決済画面を構築してみました。 htmlにformを埋め込み、fincodeJSを使ったコードを書くだけで簡単にカード入力フォームを配置することができたので、ぜひ使ってみてください！ UIコンポーネントを使った決済フローは以下になります。 まず、[UI初期化]・[入力フォーム作成]・[UIマウント]を行うことで決済画面にカード入力フォームを配置します。 その後ユーザーが入力したカード情報を[入力フォーム情報取得]で取得します。 取得したカード情報と決済実行APIのレスポンスをもとに、[決済実行JS]を呼び出し決済を実行します。 以下で画面にカード入力フォームを埋め込んだコードを掲載します。フロントはVue.jsで実装しました。 実装メモ： ・htmlにformを挿入 ・fincodeJSの[UI初期化]・[入力フォーム作成]・[UIマウント]を実行 htmlタグ <form id="fincode-form"> <div id="fincode"> </div> <button v-on:click="payment" class="fincode-button"> <span>お支払い</span> </button> </form> JS <script src="https://js.test.fincode.jp/v1/fincode.js"></script> <script> const app = new Vue({ el: '#app', mounted() { setUiComponent() { const fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const appearance = { layout: "vertical", hideLabel: false, hideHolderName: false, hidePayTimes: true, labelCardNo: "カード番号", labelExpire: "有効期限", labelCvc: "セキュリティコード", labelHolderName: "カード名義人", cardNo: "1234 5678 9012 3456", expireMonth: "01", expireYear: "25", cvc: "001", holderName: "TARO YAMADA", colorBackground: "f7f6e7", colorBackgroundInput: "ecebd9", colorText: "333", colorPlaceHolder: "9a9a9a", colorLabelText: "314e52", colorBorder: "314e52", colorError: "990c02", colorCheck: "000054", } const ui = fincode.ui(appearance) ui.create("payments", appearance) ui.mount("fincode", "400") }, }, }); </script> 上記実装で構築した決済画面はこちらです↓ フォームのデザインを考える際にはDocsの[コーディングを始める]ページを使うのがおすすめです！ UIコンポーネントのDocs 好きなカラーやレイアウトを選ぶだけで簡単にコードが生成できるようになっています。 皆さんも是非試してみてください！

• Javascript
• 構築Tips

2022.12.13開発チーム