Amplifyによるお手軽個人開発

Amplifyによるお手軽個人開発

Matcha
- SI系の会社でSEやってます
- 触ったことあるもの：typescript, vue, react, aws(lambda, amplifyなど)
- 好きなもの：ベース
- 平日毎朝オンラインもくもく会開催してます！興味あればお気軽にご参加ください！
https://daredemomomoku.connpass.com/
-https://twitter.com/dom12000931

Transcript

1. Amplifyによるお手軽アプリ開発
2. 自己紹介 matcha SI系の会社でSEやってます 触ったことあるもの：typescript, vue, react, aws(lambda, amplifyなど) 好きなもの：ベース 平日毎朝オンラインもくもく会開催してま す！興味あればお気軽にご参加ください！ https://daredemomomoku.connpass.com/ https://twitter.com/dom12000931
3. 個人開発するときに思うこと 速く・手軽に開発したい インフラ構築、基盤機能(データ保存、ログインなど)実装に時間をかけたくない
4. AWS Amplify サーバレスなバックエンドを簡単に構築可能なツール/ライブラリ CLIやConsoleにて必要なバックエンド機能を選択することで、AWS上に必要なリソース を構築してくれる DB/API, Storage, Auth, Hostingなど
5. 使い方イメージ Amplify CLI : 簡単なコマンドでAWS上にリソースを作成 Amplify Library : 構築したリソースはライブラリより簡単に使える
6. デモ ベーカリーのポータルサイト パン好きに向けてお店のパンを紹介できる
7. アーキテクチャ バックエンド： amplify(DB、API、ユーザ認証、ストレージ) フロントエンド： vue+typescript
8. amplifyの良いところ(CLI) CLIから簡単にAWSリソースを生成できる(CFテンプレートをローカルに生成) DB/API　 $ amplify add api 　// Appsync(GraphQL), DynamoDB にテーブル生成 Storage　 $ amplify add storage 　// S3 にバケット生成 Auth　 $ amplify add auth 　// Cognito にユーザプール生成 Hosting　 $ amplify add hosting 　// S3 にSPA をデプロイ, CloudFront 設定 開発に便利な機能も多数 Mock　 $ amplify mock 　// ローカル環境でAPI/ ストレージを使える Codegen　 $ amplify codegen 　// GraphQL スキーマからクエリを自動生成
9. amplifyの良いところ(ライブラリ) AWSリソースを簡単に操作できるライブラリが用意されている ・GraphQL(Appsync) import { API, graphqlOperation } from 'aws-amplify'; import { getBlog } from './graphql/queries'; const res = await API.graphql(graphqlOperation(getBlog, {id: "10000"})); graphqlOperation の第1引数でクエリ、第2引数でパラメタを指定 graphql/queries にAmplifyが自動生成したクエリがあるので、とりあえずクエリ実行 したいときは使える
10. ・CodeGen GraphQLスキーマからクエリを自動生成してくれる type Product @model @key(fields:["id"]) { id: ID! title: String } export const getProduct = /* GraphQL */ ` query GetProduct($id: ID!) { getProduct(id: $id) { id title } } `; export const listProducts = /* GraphQL */ ` query ListProducts( ... `;
11. ・Storage(S3) Storage.get('welcome.png', { level: 'public' }); Storage.put('test.txt', 'Protected Content', { level: 'protected', contentType: 'text/plain' }) Storage.put('test.txt', 'Private Content', { level: 'private', contentType: 'text/plain' }) アクセス権限を指定してGet／Putが可能。自分でバケットにIAMポリシーを付与する必 要がない。 Public/Protected/Privateがデフォで利用可能
12. ・Auth(cognito) Auth.federatedSignIn({provider:CognitoHostedUIIdentityProvider.Google}) Hub.listen("auth",({payload:{event}})=>{ switch(event){ case "signIn": callbackSignIn(); break; SignIn/SignOut等のAPIを用意。Google/FaceBookアカウントを使ったフェデレーショ ンSignInも可能 SignIn等のイベントはHubにてキャッチ可能
13. amplifyの良いところ(UIコンポーネント ) SignInなど便利なコンポーネントを用意 <AmplifyAuthenticator /> 1行追加するだけでSignIn画面を使える Vue, Reactをサポートしている
14. amplifyの良いところ(mock) ローカル環境でDB/API/Storageを検証できる（AWSへのデプロイ不要） $ amplify mock アクセス情報ファイル(aws-exports.js)内のURLをローカルに変更してくれる APIは検証用のGUIもあり つまり初期開発時はAWSリソース使用料を気にしなくていい(DB,API,Storage)
15. まとめ Amplify使うとフロントエンドのみで開発できる AWSへデプロイしなくともローカルで使用可能なため、開発中の費用を気にしなくて良 い OSSのため、日々新機能追加/改良されている