2023/09/23に開催されたServerlessDays Tokyo 2023で登壇した資料です
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた Amplifyを使って React + AppSync + DynamoDB でサーバレスなWebアプリを作成するチュートリアルをやってみました! 大阪オフィスのYui(@MayForBlue)です。 最近プライベートでAWS Amplify(以下Amplify)を触っていて、良さげなチュートリアルを見つけたのでやってみました。 Amplifyを使って React + AppSync + DynamoDB でWebアプリを作成するものです。 デプロイについてはチュートリアルで紹介されているS3でのホスティングではなくAmplify Consoleを使ってCI/CDできるようにするなど少し工夫してやってみました。 Amplify JavaScript
Create React App(CRA)を使ってアプリケーションを生成します。任意の作業用ディレクトリに移動後、下記のコマンドを実行します。 再現性を高めるために、パッケージのバージョンを固定してインストールしています。 npx [email protected] --template typescript react-appsync-protected-by-auth0 cd react-appsync-protected-by-auth0 React RouterとAuth0のSPA用SDKをインストールします。 yarn add [email protected] @auth0/[email protected] yarn add -D @types/[email protected] Auth0をReactで利用する為のCustom Hookを作成
こんにちは、もこ@札幌オフィスです。 6月16日より、クラスメソッドの年次技術イベント「Developers.IO 2020 CONNECT」を開催しています。期間は2020年6月16日(火)から7月7日(火)、テーマごとに7日間の日程に分けて開催、セッションはなんと合計100本以上あります。 私は、6月23日(火)のライブセッションの3本目を担当しました。登壇の内容についてはこちらをご覧ください。 登壇動画 ライブセッションだけでなく多数の技術について動画を公開しています。下記のYouTubeチャンネルの登録もお願いします。 登壇資料 Q&A Q1. Amplifyを使うことでインフラ側がブラックボックスになってしまい、セキュリティ上の不安や仕様考慮漏れによる不具合が怖いのですが、どうすればそういった不安を拭えますか? 確かに脆弱性や不具合がある可能性は無きにしも非ずですが、自前で全てを
AppSync は AWS が提供するマネージド GraphQL サービスです。Amplify と統合することにより、スキーマさえ宣言すれば GraphQL の Query, Mutation, Subscription コードを自動生成します。バックエンド GraphQL エンドポイントやデータソースを構築し、即座に動く環境が手に入ります。 こちら は過去の記事ですが、リアルタイム掲示板アプリの主要機能を 15 分で作った例を紹介しています。 PoC のように使用する分には Amplify CLI を使用してサクッと開発してしまう方法が効果的ですが、実際のプロダクト開発ではそれだけでは不十分な場合が多いでしょう。複数環境へのデプロイの戦略、テストをどうするか、マイクロサービスバックエンドと接続するにはどのようなパッケージ構成にするべきかなど、課題が山積します。 本記事では AppSync
Lambda無しでGraphQLのAPIを作ろう!!AppSyncをAWSサービスのプロキシとして利用してみる 先日のブログでAppSyncのHTTPデータソースとしてStep Functionsを利用する構成をご紹介しました。AppSyncのデータソースとしてネイティブに対応していないサービスであっても、HTTPデータソースを介してAppSyncと連携させることが可能です。 この例のようにAppSyncをAWSサービスのプロキシとして構成することで、CRUD操作のような単純なオペレーションに関してはわざわざLamdbaを使わなくてもAPIを実装することが可能です。AWSとしてもre:inventのセッション等で「LambdaはTransformのために使い、Transportに使わない」ことがベストプラクティスだと発信しており、Lambda無しで実現できることは極力Lambdaを使わない
AppSyncの仕組み AppSyncは直接DynamoDBの値を取得・更新・削除することができます 従来のAPI Gatewayだと、AWS Lambda が間に必要でしたが、 AppSyncは Lambda レス でDynamoDBへのアクセスが可能です 代わりに、AppSync内のリゾルバーという領域にロジックを記述します クエリ 実行されるGraphQlのこと スキーマ どの型の値をどこで使うかを定義する設計書 リゾルバー 関数のこと。ロジックを記述する。 リゾルバーは、リクエストマッピングテンプレート と レスポンスマッピングテンプレート で構成さる リクエストマッピングテンプレート は、「変換」と「実行」のロジックが含まれている リソース データベースのこと。AppSync では AWS DynamoDB に自動的に接続される AppSyncの料金 使用した分だけ課金されます
韓国のAWSイベントで登壇した内容を日本語で共有します。主に 分散トランザクションと AWS CDK で Step Functions と AppSync をデプロイしたコードについて話させて頂きます。 こんにちは!コンサル部のテウです。 先週末に韓国のAWSイベント AWS Community Day Online 2020 に登壇しました。 セッションの内容は、今年の3月にブログ登壇させて頂きました JAWS DAYS 2020 での以下の記事とほぼ一緒ですが、 API Gateway をメインAPIエンドポイントとして利用する既存のアーキテクチャーに変化をかけ、GraphQL ベースの AWS AppSync をメインAPIエンドポイントとして利用することにしました。なお、全ての AWS リソースを AWS CDK でデプロイすることで、サーバーレスアーキテクチャー開発時に参考になれ
はじめに こんにちは ! KDDI アジャイル開発センターの小板橋です。 この記事は、KDDI Engineer Advent Calendar 2020の15日目の記事となります。 GraphQLの記事はよく見かけますが、GraphQLにおけるSubscription処理についてはあまり目にすることがありません。そこで本記事は、Subscriptionに着目したもので、実装時の助けになれれば幸いです。 GraphQLについては、以前事細かく書いたので、そちらをご覧ください。GraphQL入門 仕組み realtime API pub/subのような仕組みのAPIをrealtime APIというらしいです。 参考: GraphQL Subscription このrealtime APIなのですが、大きく分けて3つのタイプに分類されます。 1.ポーリング クライアントは、定期的にリクエストを
はじめに GraphQLは、2015年に公開されて以降、徐々に注目が高まっている技術になります。 以下リンクによると、2019年時点で約90%の人が注目していることが分かります。 https://2019.stateofjs.com/data-layer/graphql/ しかし、実際にGraphQLを採用して開発した事例はまだ多くありません。 その結果、GraphQLのメリットが分からず、採用に二の足を踏んでいるようなプロジェクトも多いのではないかと想定しています。 我々は、新規開発のサービスにGraphQLを採用しました。 本ドキュメントは、そのときに得たGraphQLに関する知見やRESTと比較したときのメリットを構築事例としてまとめたものになります。 本ドキュメントで記述するGraphQLのメリット、マネージドサービスを用いたシステムの実装例、具体的な他サービスとのインテグレーショ
こんにちは! 最近は、AppSync/GraphQL での開発案件が非常に増えてきました。 GraphQL は、RestAPI のようなリソース志向の API設計に対し、データアクセス志向な API 設計を可能にします。つまり、フロントエンドの画面の振る舞いを起点にした API 設計/開発を行うことができます。 また、2018年にAws API GatewayがWebSocket APIに対応しました。 それまでは AppSync のメリットはサブスクリプション通信可能であることが挙げられていましたが、API Gateway が Web Socket に対応したことで、両者に明確に機能面で優位性は無いように思えます。 そうなると AppSync と API Gateway どちらを採用すれば良いのか迷いどころだと思いますが、わたしたちの AppSync 開発の知見をベースに本記事で解説しよ
Sleemo – A new way to develop serverless GraphQL backend using AWS AppSync Introduction AWS has announced Direct Lambda Resolvers for AWS AppSync in Aug 2020, and I was super excited about this new feature support. Prior to this feature release, VTL(Velocity Template Language) was a MUST to implement GraphQL resolvers using AWS AppSync, which made GraphQL backend implementation using AppSync compl
【Direct Lambda Resolvers: No VTL】 AWS AppSync GraphQL API で Velocity Template なしで Lambda Function を呼び出せるようになりました 個人的に嬉しいアップデートです。 AWS AppSync で Velocity Template なしで Lambda Function を呼び出せるようになりました! AWS AppSync releases Direct Lambda Resolvers for GraphQL APIs Introducing Direct Lambda Resolvers: AWS AppSync GraphQL APIs without VTL | AWS Mobile Blog Direct Lambda Resolvers for GraphQL APIs とは? 従来、
AWS AppSync は Serverless Framework とどのように連携するのか? Serverless Framework は、AWS AppSync の使用を簡単に開始できる AWS AppSync コンポーネント及びプラグインを提供しています。これらのモジュールは、利用可能なすべてのデータソースと認証方法をサポートすると同時に、AWS AppSync を使用する際に優れたコンポーネントを提供します。 また、AWS AppSync で管理される多くの API はデータソースとして AWS Lambda に依存しているケースが多いため、Serverless Framework の提供する各種機能(設計、デプロイ、モニタリング、デバッグ)を使用することで、Lambda 関数作成の複雑な点を省略し、実装コストを削減することができます。 AWS AppSync を使用する利点 フ
※ 本連載では、様々な AWS サービスをグラフィックレコーディングで紹介する awsgeek.com を、日本語に翻訳し、図の解説をしていきます。awsgeek.com は Amazon Web Services, Inc. プリンシパル・テクニカル・エバンジェリスト、ジェリー・ハーグローブが運営しているサイトです。 これまでのグラレコ解説はこちら » GraphQL は、サーバーからのデータに対して、クライアントによるフェッチ、変更、サブスクライブを可能にするデータ言語です。GraphQL クエリでは、サーバーから返されたデータをどのように構造化するかをクライアントが指定します。これによって、クライアントは必要なデータのみを必要なフォーマットでクエリできます。 Web API として有名な RESTful (REST) と比較した場合、主に以下の違いがあります。
Front-End Web & Mobile Introducing Direct Lambda Resolvers: AWS AppSync GraphQL APIs without VTL This article was written by Ed Lima, Sr. Product Manager, AWS September 14, 2021: Amazon Elasticsearch Service has been renamed to Amazon OpenSearch Service. See details. AWS AppSync is a managed serverless GraphQL service that simplifies application development by letting you create a flexible API to
top > 開発ブログ > AWS > AWS AppSyncのGraphQL Subscriptionsのクライアントを作って裏側の仕組みを学ぶ こんにちは、ナカエです。 マネージドなGraphQLサーバを手軽に作れるAWS AppSyncがじわじわと人気を集めてきているようですね。 AppSync APIのクライアントとしては公式のSDKたるAmplifyを利用すると楽ちんです。 が、しかし今回はAppSyncのGraphQL Subscriptions実装の仕組みを確認するため、Node.jsとWebSocketクライアントを使ってリアルタイム通信のクライアントを実装しました。 GraphQLのスキーマとAppSync API の認証モード 本記事のサンプルはトピックごとにメッセージを投稿/受信する簡易なチャットルームアプリを想定しています。 Mutationはメッセージの投稿に、S
Front-End Web & Mobile Building Scalable GraphQL APIs on AWS with CDK, TypeScript, AWS AppSync, Amazon DynamoDB, and AWS Lambda October 16, 2023: This post has been updated to include the latest CDK AppSync Constructs. September 14, 2021: Amazon Elasticsearch Service has been renamed to Amazon OpenSearch Service. See details. AWS AppSync is a managed serverless GraphQL service that simplifies appl
Front-End Web & Mobile Create real-time applications via serverless WebSockets with new AWS AppSync GraphQL subscriptions filtering capabilities With AWS AppSync you can create serverless GraphQL APIs that simplify application development by providing a single endpoint to securely query or update data from multiple data sources, and leverage GraphQL subscriptions to implement engaging real-time ap
お疲れさまです!フクロウラボ若杉です。 ほんと、時間が過ぎるのが早いですね〜。この1,2年はそうなんですが、一方で、プライベートでも様変わりしているせいか、1年前が3,4年位前のような感じもしている今日このごろです。 さて、前回は、 AWS AppSyncでGraphQL【実践編その1(Vue+Amplify+Cognito)】 ということで、Amplifyを使ってメモアプリを作成しました。 今回は、GraphQLのSubscriptionを使ってサーバープッシュなアプリを作ってみようと思います。 前回作ったメモアプリ�を改良して作ろうかと思ったのですが、そもそもメモアプリはCognitoでの認証が入って本人しか見られないコンテンツなため、今回のサンプルにはマッチしなさそうだったので、ゼロから普通の掲示板を作って、更新したタイミングで他に閲覧しているユーザーへもリアルタイムに更新をかけると
この記事は「Eureka Advent Calendar」 20 日目の記事です。 こんにちは。今年2月にeurekaにJoinしたBackend チームの金井です。入社からあっという間に時が過ぎ、あと 2 月ほどで入社から 1 年経つんだなあと思うと感慨深いです。 昨日の記事はBackendチームの山下さんによる「Goでのオススメエラーハンドリング手法」でしたが、本記事では AWS AppSync(以下 AppSync)について紹介します。自分はPairs の新しい機能実装に向けていくつか技術調査をしているのですが、最近ではAppSync 周りを調べる機会が多かったので、Advent Calendar の題材として記事を書いてみることにしました。 AWS AppSyncフルマネージド型の GraphQL サービスです。GraphQL API の開発を色々と自動化してくれます。GraphQ
「API Gateway に出来て、なんで AppSync には出来へんのや・・・」と枕を濡らした夜もあったよね。それも今日までだ。 本日のアップデートにより AWS AppSync で AWS WAF を利用できるようになりました! AWS AppSync adds support for AWS WAF AWS AppSync の AWS WAF 対応 従来、AWS AppSync のセキュリティ機能としては「APIキー認証」「IAM認証」「OpenIDConnect認証」「Cognito認証」といった 4 つの認証を提供していますが、それ以外の IP 制限といった機能はありませんでした。 今回 AWS WAF サポートによって IP 制限は勿論のこと XSS、SQL インジェクション、Rate Limit など様々な観点での Web の脅威から AppSync GraphQL API
Front-End Web & Mobile Creating a Python WebSocket client for AWS AppSync real-time subscriptions This article was written by Steve Johnson, Principal Specialist Solutions Architect, AWS AWS AppSync is a managed service that uses GraphQL to make it easy for applications to get exactly the data they need on AWS. One of the great things about writing clients for AppSync is that GraphQL queries and m
サービスID 単位でデータを取得するため、サービスID をパーティションキーにする。 書込日時でデータを並べ替えしたいが、完全な同時刻に複数のユーザが書き込みするとデータが一意にならなくなるため、書込日時に # 区切りでユーザ名を付加したものをソートキーにする。 日時データは ISO8601 フォーマットにした。JavaScript で扱いやすいため。 最低限必要なデータのみにしたため、シンプルでわかりやすいと思います。 AWS AppSync の設定 アプリからは以下 3 つのオペレーションを実行します。AWS AppSync は GraphQL という言語を使い、アプリ側では Query、Mutation、Subscription という 3 種類のクエリーが使用できます。AWS AppSync 側ではそれを受けるためのスキーマという設定が必要になります。 指定したサービスID のデー
AWS News Blog AWS AppSync GraphQL APIs Supports JavaScript Resolvers Starting today, AWS AppSync supports JavaScript resolvers and provides a resolver evaluation engine to test them before publishing them to the cloud. AWS AppSync, launched in 2017, is a service that allows you to build, manage, and host GraphQL APIs in the cloud. AWS AppSync connects your GraphQL schema to different data sources
最近React Nativeを触る機会があったので、簡易的にまとめてブログ化してみました。 ちなみに私はUnbuntu20.04を利用しているため、Androidのみでの作業となりますのでご了承ください。 構成図 Auth0経由でGoogleログインしたユーザーが、AppSync経由でDynamoDBに入っている一覧データを取得します。 事前準備 事前にReact Nativeの環境構築を行う必要があります。 公式ドキュメントを参考に済ませておいてください。 Auth0でApplicationの登録とサンプルアプリの起動 Auth0ダッシュボードの「Applications」から「CREATE APPLICATION」をクリックします。 アプリケーション名とアプリケーションタイプを選択します。 React Nativeのサンプルコードをダウンロードします。 ダウロード画面に遷移すると「Al
AppSync勉強中@大阪の岩田です。 AppSyncではDynamoDBやLambda等のAWSサービスをデータソースとして指定することが可能ですが、データソースにHTTPエンドポイントを選択してAppSyncからの呼び出し時に適切なSIGv4の署名を付与することで、実質全てのAWSサービスと連携することが可能です。 以下のAWSブログで紹介されているAppSyncからStep Functionsのステートマシンを起動する処理を試してみたので手順をご紹介します。 Invoke AWS services directly from AWS AppSync なお今回は勉強のために手作業多めでやりましたが、SAMテンプレート等含んだソースコード一式が以下のリポジトリで公開されています。 https://github.com/aws-samples/aws-appsync-long-query
こんにちは! AppSync 開発の情報は、API Gateway と比較すると少ないと思います。GraphQL がまだまだ浸透していない日本の開発市場では、経験値のない開発チームが AppSync の開発方法を整理するのには苦労しますよね。 筆者も最初の AppSync 開発案件は非常に緊張しましたが、最近ではある程度開発手法が固まり、開発に安定感がついてきました。 本記事では、AppSync での API 開発の流れをソースコード交えて解説します! 想定する読者 AppSync を導入検討しているエンジニア自己学習で AppSync 触ったけど実戦経験がなくて不安なヒトRestAPI 開発と具体的にどのような違いがあるのか把握したいヒト はじめに GraphQL の学習コストは高い? わたし達は、Amplify フレームワークの機能で GraphQL のコードを自動生成しています。 A
Step2. Secret Manager に DB 認証情報の保存 AWS AppSync は Amazon Aurora クラスターに接続する際に Secret Manager に保存されたシークレットを使用します。シークレットのタイプを「Amazon RDS データベースの認証情報」を選択肢、認証情報をデータベースを選択します。それ以外はデフォルトのまま、作成に進みます。 Step3. GraphQL API の作成 次に、GraphQL API を作成しましょう。GraphQL API データソースで「Amazon Aurora クラスターから始める - New」を選択し、次に進みます。 次に、API 名にわかり易い名前を入力します。今回はデフォルトの「My AppSync API」としました。 次にデータベースを選択します。 「データベースを選択」をクリックすると接続したい Am
Front-End Web & Mobile Introducing Lambda authorization for AWS AppSync GraphQL APIs This article was written by Brice Pellé, Principal Specialist Solutions Architect, AWS AWS AppSync is a fully managed service which allows developers to deploy and interact with serverless scalable GraphQL backends on AWS. As an application data service, AppSync makes it easy to connect applications to multiple da
Front-End Web & Mobile AppSync adds support for AWS WAF This article was written by Brice Pellé, Principal Specialist Solutions Architect, AWS AWS AppSync is a fully managed service that allows you to deploy Serverless GraphQL backends in the AWS cloud. With AppSync, you can have GraphQL backends that connect to multiple data sources, and that scale and grow with your usage. Whether you are just g
Front-End Web & Mobile Introducing Merged APIs on AWS AppSync AWS AppSync is a serverless GraphQL service that makes it easy to create, manage, monitor and secure your GraphQL APIs. Within an AppSync API, developers can access data across multiple different data sources including Amazon DynamoDB, AWS Lambda, and HTTP APIs. As the service continues to grow in adoption, our customers have faced chal
Front-End Web & Mobile Simple serverless WebSocket real-time API with AWS AppSync (little or no GraphQL experience required) June 27, 2024: This blog post covers Amplify Gen 1. For new Amplify apps, we recommend using Amplify Gen 2. You can learn more about Gen 2 in our launch blog post. AWS AppSync simplifies application development by letting applications securely access, manipulate, and receive
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? リゾルバーでAppSyncの中を開発する はじめに AmplifyでAppSyncをセットアップする際、認証タイプでCognitoを選択し、サンプルスキーマとしてFGAC(=Fine Grained Access Control = きめ細かなアクセス制御)の雛形を選択すると、Cognitoユーザー名が勝手にDynamoDBのowner列に設定されますよね。(で、認証済みユーザーでフィルタして取ってこれるようになる。) これ、不思議だったんです。 AppSyncのMutation(Create)で、引数に指定してないのにownerの他に
概要 Amplify Framework + AWS AppSync でフロントエンドの Unit テスト書く時のハウツーをご紹介します。本記事ではアプリケーションの実装に React を用いていますが、基本的な考え方は Vue などの他のフレームワークでも同じです。 想定読者 Amplify 触ったことある AppSync 触ったことある jest を使った Unit テストを書いたことがある React のソースが読める(と、尚良し) Amplify、AppSync あまり触ったことない!という方は Amplify CLI GraphQL Transform とディレクティブで AppSync+DynamoDB をいじってみよう!(@model @auth, @key)の記事を参考にいただけると良いと思います! Amplify で Unit テストを書く方法 API を Mock する
ProjenI saw projen a few months back but it wasn’t until @emeshbi’s presentation on CDK Day 2020 that I realized I needed this in my life. The AWS CDK is amazing and I’ve been using it for a little over a year now. Unfortunately there are a few things missing from a basic cdk init that projen really helps with such as cdk version management, dependencies, jsii, and the list goes on… External Proje
こんにちは! AppSync ではいくつかの認証方式がありますが、中でも Cognito ユーザープールを利用されるケースは多いかと思います。 今回はスキーマに @auth を記述することで細かいアクセス制御を実装・検証します。ぜひ最後までお読みください! 想定する読者 AppSync の認証をコントロールしたいヒトAppSync の認証方式に Cognito ユーザープールを採用しているヒトAppSync に興味があるエンジニア はじめに そもそも@authとは? @auth とは、API の認可をトップレベルで行うことができるディレクティブです。これを利用することで、細かなアクセスを実現することができます。具体的にはルールを定義することで、API のアクションに対する制限が可能になります。 今回は Amplify CLI を利用して、 Todo テンプレートを作成したものをいじりながら
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く