AppSync Eventsで作るチャットアプリ-Amplifyを使わずに-

-- Views

July 06, 25

スライド概要

2025/7/6 「JAWSミートの翌日LT大会 豊橋スペシャル」

profile-image

Engineer / AWS Community Builder / LINE API Expert / JAWS UG名古屋 運営 GIthub: http://github.com/Miura55 Blog: http://supernove.hatenadiary.jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

AppSync Eventsで作るチャットアプリ -Amplifyを使わずにKMiura(@k_miura_io)

2.

自己紹介 • 三浦 耕生(こうき) • SaaSのバックエンドエンジニア • JAWS UG名古屋&神戸 運営 • 好きなAWSのサービス:AWS IoT, Lambda, ECS @k_miura_io koki.miura05

3.

ことの発端 去年のLambda10周年祭にて AppSync Eventsが最近リリースさ れたんですけど、サーバーレスで WebSocketが簡単に使えるように なりました! アツい!!!! サーバーレスが好き なAWSのSAさん 登壇して気持ち よくなった僕

4.

それまでのサーバーレス WebSocket • Lambda + API Gatewayで実 装する場合、以下の3つの関数を 用意する必要があった • WebSocketに接続するた めの関数 • WebSocketを切断するた めの関数 • メッセージを送受信する関数 • 接続を管理するために DynamoDBが必要 • メッセージの送信も受信も WebSocket https://docs.aws.amazon.com/ja_jp/apigateway/latest/ developerguide/websocket-api-chat-app.html

5.

AppSync Events をつかうとこうなる • API Gatewayのときに必要だっ た、接続・切断のLambda関数が 不要になる • 当然、接続管理用のDynamoDB が不要 • メッセージ送信にPOSTをつかうの が直感的!

6.

リリース当初に触ってみた 確かに便利だけど チャットアプリ用に メッセージ保存でき ないじゃん! Lambda使えばいい話 だけどもう少しシンプルな 構成に出来ないものか…

7.

データ統合がリリース https://aws.amazon.com/jp/blogs/aws/enhance-real-timeapplications-with-aws-appsync-events-data-source-integrations/

8.

データ統合とは? • AppSync EventsのAPIで Publishされたイベントに対してDB に保存したりLambdaや Bedrockなどのサービス連携を できる機能 • イベントに対するアクションを JavaScriptで書くことで定義がで きる

9.

チャットアプリの バックエンドが シンプルに構築 できる!

10.

作ってみた • ブラウザで動くシンプルなチャットアプリ • 名前を入力して入室する • UIはBedrock Engineerにデザインさせた

11.

システム構成

12.

DEMO(当日のみ有効) https://bit.ly/4khNoQR

13.

Amplify SDKを使わずにメッセージ送信 • 送信先のチャンネルを指定してメッセージ を飛ばすだけ • 認証は「x-api-key」をヘッダーに入れる

14.

Amplify SDKを使わずに メッセージを受信 • WebSocketの接続に必要な認証情報を Subprotocolに指定するためにヘッダーデータを エンコード • メッセージの受信を行うために最初に接続ID、送 信先のチャンネルを指定すると受信を開始する

15.

まとめ • AppSync Eventsを使うことでチャットアプリのバックエンドを簡単に実装できるようになっ た • Graph QLの時に必要だったスキーマ定義を用意することなくPub Subができる • 汎用のWebSocketとHTTP通信でAmplify SDKを使わなくても実装ができる • 特にWebSocketの接続方法は一癖あって初見だと詰まりがち

16.

今回の記事 https://bit.ly/40EhMOi

17.

END