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

AWS Amplifyを始めよう / Getting Started with AWS Amplify

AWS Amplifyを始めよう / Getting Started with AWS Amplify

フロントエンドカンファレンス沖縄2023前夜祭リジェクトコン
https://front-okinawa.connpass.com/event/299741/

shiro seike

November 17, 2023
Tweet

More Decks by shiro seike

Other Decks in Programming

Transcript

  1. AWS Amplify
    2023
    2
    0
    23
    .
    11
    .
    17
    @seike
    4
    60
    1

    View full-size slide

  2. 自己
    @seike
    46
    0
    -
    - @seike
    46
    0
    - AWS Community Builder Serverless
    - Fusic
    - /

    - /
    -
    - PHP Japan
    -
    -
    -
    大 工 子工
    055538A
    -

    B
    2
    2

    View full-size slide

  3. 3 日
    15:40

    AWS Amplify

    View full-size slide

  4. Agenda
    1
    .AWS Amplify
    2
    .

    3
    .
    4

    View full-size slide

  5. 01
    AWS Amplify

    View full-size slide

  6. AWS Amplify
    AWS Amplify Amazon Web Services

     
    API (GraphQL)

     
    React Angular Vue iOS Android

     
    SPA

    6

    View full-size slide

  7. AWS Amplify
    AWS Amplify

     高

     
    AWS Amplify

     
    AWS
    7

    View full-size slide

  8. AWS
    Authentication
     
    Amazon Cognito

    API (GraphQL)
     
    AWS AppSync
    API (REST)
     
    Amazon API Gateway
    Storage
     
    Amazon S
    3
    Functions
     
    AWS Lambda
    Server-Side Rendering
     
    Amazon CloudFront

    SSR
    Utilities
     
    Amazon CloudWatch
    8

    View full-size slide

  9. React
    AWS

    URL https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/
    10

    View full-size slide


  10. 11
    GitHub Build

    API (GraphQL) Storage

    View full-size slide

  11. create-react-app
    React
    React
    AWS Amplify
    12
    $ npx create-react-app amplifyapp
    Happy hacking!
    $ cd amplifyapp
    $ npm start

    View full-size slide

  12. Git
    AWS Amplify Git
    Git
    AWS Amplify
    13

    View full-size slide

  13. AWS Amplify
    AWS Amplify
    ->
    ->
    GitHub
    GitHub
    14

    View full-size slide

  14. build
    AWS Amplify
    React
    Build
    Build
     
    15

    View full-size slide

  15. -> Get started
    18

    View full-size slide

  16. AWS Amplify
    GitHub Push
    AWS Amplify
    AWS Amplify
    Pull

    aws-exports.js

    19

    View full-size slide

  17. amplify pull

    20

    View full-size slide

  18. 21
    $ npm install aws-amplify @aws-amplify/ui-react
    npm install AWS Amplify

    View full-size slide


  19. 22
    $ npm install aws-amplify @aws-amplify/ui-react
    $ amplify add auth
    npm install AWS Amplify
    amplify add auth

    View full-size slide

  20. amplify push
    Amazon Cognito AWS Lambda aws-exports.js
    23
    $ amplify push y

    View full-size slide

  21. aws-exports.js
    24

    View full-size slide



  22. src/index.js

    aws-exports.js
    Amplify.configure

    25

    View full-size slide


  23. src/App.js


    -> withAuthenticator
    AWS Amplify

    26

    View full-size slide


  24. 面 示
    src/App.js

    27

    View full-size slide

  25. AWS Amplify
    バ プ
    30
    AWS Amplify

    - Authentication
    - API (GraphQL)
    - API (REST)
    - Storage
    - Functions

    View full-size slide

  26. DB Stripe
    31
    AWS Amplify
    Authentication API (REST)

    View full-size slide

  27. Thank You
    We are Hiring !
    https://recruit.fusic.co.jp/

    View full-size slide