4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AWS Amplify基本編

Last updated at Posted at 2022-05-04

aws-amplify.png

AWS Amplifyを触ってみたのでその備忘録して記事にまとめました。本編ではあくまで基本と公式のチュートリアルを触ったインプレッションです。

今一度AWSとは

Amazonにより提供されているクラウドコンピューティングサービス(元々は社内用に使っていたのを外部にサービス提供始めた)AWS、Microsoft Azure, Google GCPが3大インフラサービス。
ウェブサービスと称しているが、ウェブサービスに限らない多種多様なインフラサービスを提供している。これを使えばなんでもできるので、全容を把握するのは厳しいし、公認資格も何個もある代物。

では本題のAmplifyとは

AWSが提供するサービスの1つ。
ウェブ/モバイルのフロントエンドエンジニアがAWSでフルスタックアプリケーションをすばやく簡単に構築できるようにする専用のツールと一連の機能を揃えたプラットフォーム。Amplify を使用すると、ウェブ/モバイルアプリケーションのバックエンドを設定し、数分の内にアプリを接続して、ウェブフロントエンドUIを視覚的に構築できます。クラウドの専門知識がなくても、より速く、簡単に拡張できます。
(FireBaseが類似サービス)

Amplifyでアプリケーションを構築すると、
・静的ホスティング(Amplify Console, S3)
・認証(Cognito)
・データAPI(AppSync + DynamoDB)
がすべて数コマンドで作成でき、これらのリソースをAmplify上で統合的に管理ができます。
これによりバックエンド開発に習熟していないフロントエンドエンジニアでも難なくフルスタックアプリケーションが構築可能となります。
175個もあるAWSサービスから上記サービスを個別に選定、設定、アーキテクトし同等な環境を構築できますが、かなり時間がかかります。
そのコストをAmplifyが解決してくれる。

チュートリアルが充実してる

AWS Amplify を通して Amazon DynamoDB や AWS AppSync 、Amazon Cognito などを利用した、ログイン機能付き ToDoアプリを構築するチュートリアルが公式に用意されている。

React, Vue, JS, iOS, Android, Flutterと至れり尽くせりです。
スクリーンショット 2022-05-03 15.27.36.png

チュートリアル通りに進めて詰まる事はないと思うので詳細は割愛しますが、Amplify CLIを入れてターミナルからAmplifyで機能の追加、拡張、デプロイができて、コードもちょろっと書くだけで認証付きのToDoアプリができてしまった。(所要時間30分程)

schema.graphqlを作り、amplify pushコマンド実行すると、それを起点に、AWS上にAPIがデプロイ、アップデートされて、コード側にmutation、queryファイルも自動で生成、更新される。

そして、認証も数回のコマンドで作れ、こんな認証画面のUIもライブラリで用意されている。
スクリーンショット 2022-05-04 0.18.28.png

そしてデプロイまで一瞬。。

こんな設計のアプリを構築するのにAWSのこれらのサービスを一つ一つセットアップして連携させて、デプロイするとなると結構大変なのがAmplifyだと30分程なのですごいですね。
Amplify.png

AppSyncとは

AppSyncは、GraphQL APIの開発を容易にする、AWSの完全マネージド型サービス。
平たくいうと、サーバーレスなGraphQLサービス。
このサービスは、DynamoDB などのデータソースとの接続に必要な、面倒な作業を自動的に処理してくれます。
(同じくAPIを作成できるAPI GatewayはREST API形式)

BFF開発でGraphQLを採用する場合にこのAppSyncを使い、サーバーレスで開発するのが主流になりつつある。

GraphQL APIとREST APIの違い

通常のREST APIでは複数のURLからロードが必要ですが、GraphQLのAPIは1回のリクエストで多くのソースにアクセス可能であることから、アクセスに関わるネットワークやサーバーの負荷軽減、パフォーマンスの向上、データ管理の簡素化を行います。

REST APIだと必要なリソースを得るために複数のエンドポイントが必要
GraphQLでは単一のエンドポイントへの1回のリクエストで必要なリソースを取得

つまり、GraphQLではフロントから欲しいデータを指定できて効率がいい。

GraphQLのオペレーションには
・データを取得する Query
・データを書き換える Mutation
・リアルタイムに通知のやり取りができる仕様 Subscription
がある。

まとめ

チュートリアルだけなら本当に簡単にできてしまいました。
次はAppSync(スキーマとかリゾルバーとか)をもっと深堀してみようと思います。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?