Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ

mokocm
June 24, 2020

 AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ

mokocm

June 24, 2020
Tweet

More Decks by mokocm

Other Decks in Technology

Transcript

  1. 2 ⾃⼰紹介 もこ クラスメソッド株式会社 AWS事業本部 コンサルティング部ソリューションアーキテクト 2020 APN AWS Top

    Engineers 現職: Terraform/CDKでAWS環境の構築 前職: ECサイトのSREっぽい事 得意: アプリとインフラの中間、TypeScript 好きなAWSサービス: ECS/CDK/Amplify Twitter/GitHub: mokocm
  2. 10 Amplifyで出来ること ・フロントエンドのホスティング(Amplify Console) ・CI/CD(CodeCommit/GitHubなどと連携) ・AWS X-Ray、Amazon Pinpoint、AppSyncとの連携 ・コードの⽣成、AWSリソースの作成(Amplify CLI)

    ・Amplify Library(フロントエンドのライブラリー) ・Cognitoと連携したユーザー管理、権限管理 開発者は集中してプロダクト開発が出来る Amazon Pinpoint AWS X-Ray AWS CodeCommit AWS AppSync Amazon Pinpoint AWS Amplify
  3. 11 GraphQLとは︖ REST APIの置き換えになりつつある、クエリー⾔語、ランタイム # メリット 各種APIを定義することなく、ほしいデータを直接取得出来る 1. スキーマを定義 2.

    GraphQLサーバー(Resolver)を実装 3. ほしいデータに合わせたクエリーを書いて、リクエスト 4. GraphQLサーバー(Resolver)がデータを返却
  4. 15 AWS AppSyncとは︖ “グローバルスケールで、1 つ以上のデータソースからの 適切なデータを使⽤してアプリケーションを強化” ・”マネージドGraphQL” ・ VTLでGraphQL Resolverを実装出来る(⾃動⽣成も可能)

    ・「AWSのサービスと連携したGraphQLを実⾏可能」 ・ データソースはDynamoDB, Lambda, Elasticsearch, Aurora Serverless, HTTPエンドポイントをサポート。 ・Amplifyとの連携が超オススメ。
  5. 18 実際にプロジェクトを作ってみる # React Applicationを作成 $ npx create-react-app amplify-example-typescript --typescript

    # 作成されたディレクトリに移動 $ cd amplify-example-typescript # インストール $ npm i -g @aws-amplify/cli # Amplify 初期設定 $ amplify init
  6. 30 Amplify + Cognito Cognitoを使ったユーザー登録、ログイン、画面出し分け超簡単! const Login: React.FC = ()

    => { const state = useContext(LoginContext); useEffect(() => { state.setLogin(true); }, []); return <Redirect to="/dashboard" />; }; export default withAuthenticator(Login);
  7. 35 まとめ ・導⼊⾯倒なんでしょ...? / CI/CD導⼊、めんどくさくないですか︖ めっちゃ簡単 ・バックエンドAPIの開発、連携、⼤変じゃないですか︖ AppSyncを使えばスキーマを定義するだけでSDKを叩くように データをとれる ・登録、ログイン画⾯、認証⼤変じゃないですか︖

    UIまで⽤意されているのでめっちゃ簡単 ・インフラの管理、⾯倒じゃないですか︖ IaC管理、スケーリングも特に気にしなくてOK ・でもお⾼いんでしょう…︖ 従量課⾦で⽂字通りのスモールスタートが出来る
  8. 45 使った技術、ツール Amplify / AppSync(GraphQL) / React / TypeScript データソースはDynamoDB

    Git/GitHub ソースコード管理、プロジェクト管理 Slack/Google Meet/Discord/Amazon Chime コミュニケーション ※東京4⼈、札幌1⼈
  9. 57