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

雲勉@オンライン【勉強会】AWS Amplifyで始めるアプリ開発【初心者向け】

雲勉@オンライン【勉強会】AWS Amplifyで始めるアプリ開発【初心者向け】

FUJIMA, Yurika

July 22, 2022
Tweet

More Decks by FUJIMA, Yurika

Other Decks in Technology

Transcript

  1. 雲勉@オンライン【勉強会】 AWS Amplifyで始めるアプリ開発 〜初⼼者向け〜 2022/07/21

  2. 0.講師⾃⼰紹介 2 n 松永 真季 • 所属︓クラウドインテグレーション事業部 MSP開発セクション • 経歴︓医療関係のデスクトップアプリ開発

    → Webアプリ開発(AWS使⽤歴 2年半) • ⼊社︓2020年1⽉ • ⼀⾔︓よろしくお願いします
  3. アジェンダ 3 0. ⾃⼰紹介 1.AWS Amplifyとは(19:05~19:20) 2.AWS Amplifyでサーバーレスアプリケーションを開発してみよう (19:20~19:35) 3.開発Tips

    (19:35~19:40) 4.質疑応答(19:40~19:50)
  4. 1. AWS Amplifyとは 4

  5. 1. AWS Amplifyとは 5 1. 触ったことがない 2. 少し触ったことがある 3. 仕事でたくさん使っている

    本⽇の勉強会は…
  6. 1. AWS Amplifyとは 6 1. 触ったことがない 2. 少し触ったことがある 3. 仕事でたくさん使っている

    本⽇の勉強会は… → 主に1の⽅に向けてお話しします
  7. 1. AWS Amplifyとは 7 n サーバーレスアプリケーションの • フロントエンド(Webアプリ/モバイルアプリ) • バックエンド(AWSサービス

    DynamoDB、Lambda、Cognito …) を統合的に開発、構築することができる n Webアプリ、Mobileアプリの開発を加速させるためのプラットフォーム
  8. 1. AWS Amplifyとは n なぜAmplifyなのか • バックエンドで必要なAWSリソースを1から⾃分で構築するのは⼤変 • バックエンド構築をAmplifyに任せることができるためアプリケーションの実装に集中できる 認証機能

    データストア API ストレージ ホスティング コンピューティング バックエンド etc…
  9. 1. AWS Amplifyとは 9 1. Amplify Library 2. Amplify CLI

    3. Amplify Hosting 4. Amplify Studio Amplify構成要素
  10. 1. AWS Amplifyとは 10 1. Amplify Library Amplify構成要素 • Amplifyで構築したAWSバックエンドにアクセスするためのフロントエンド向けのライブラリ

    • ユースケース別にライブラリが⽤意されている • ReactなどのJavaScriptフレームワークやFlutterなどのモバイル向けフレームワークに対応
  11. 1. AWS Amplifyとは 11 n GraphQL実装例 import { API }

    from 'aws-amplifyʼ; import { listTodo } from ʻ./graphql/mutationsʼ; await API.graphql(graphqlOperation(listTodo)); https://aws.amazon.com/jp/builders-flash/202203/amplify-studio-flash-development/?awsf.filter-name=*all
  12. 1. AWS Amplifyとは 12 2. Amplify CLI Amplify構成要素 • アプリケーションのバックエンドを作成、管理するコマンドラインツール

    • コマンドを実⾏して質問に答えていくと、バックエンドの設定ファイルやソースコードの テンプレートが⽣成される • AWSのサービスに詳しくなくてもユースケースごとに⽤意されたコマンドを使⽤して 各種サービスの構築ができる
  13. 1. AWS Amplifyとは 13 n Amplify CLI 実⾏例 $ amplify

    init # プロジェクトの新規作成 ? Enter a name for the project kumoben ? Initialize the project with the above configuration? Yes ? Select the authentication method you want to use: AWS profile ? Please choose the profile you want to use default ⠧ Initializing project in the cloud... …
  14. 1. AWS Amplifyとは 14 n 主なAmplify CLI コマンド例 $ amplify

    configure # Amplifyの設定 使⽤するAWSプロファイルなど $ amplify add api # APIサービス(ApiGateway、AppSync)の機能追加 $ amplify add function # Functionサービス(Lambda)の機能追加 $ amplify add storage # ストレージサービス(S3、NoSQL)の機能追加 $ amplify add geo # マップサービス(Location Service)の機能追加 $ amplify add auth # 認証サービス(Cognito)の機能追加 $ amplify push # バックエンドリソースをAWSクラウドへ反映
  15. 1. AWS Amplifyとは 15 3. Amplify Hosting Amplify構成要素 • GitHubやCodeCommitと連携するフルマネージドなCI/CDおよびホスティングサービス

    • GithubやCodeCommitにコードをPushするたびに静的Webサイトをデプロイできる • カスタムドメインも設定可能 (Amazon Route 53、Google ドメインなど)
  16. 1. AWS Amplifyとは 16 n Amplify Hosting 利⽤⽅法 • コンソール画⾯で接続先を選択

    • 連携後、接続ブランチを選択 → pushするたびビルド&ホストされる
  17. 1. AWS Amplifyとは 17 4. Amplify Studio Amplify構成要素 • バックエンドとの統合・管理機能を持ち、最⼩限のコーディングで

    UI 開発を⽀援する GUI 開発環境 • Figma(ブラウザ上で使⽤できるデザインツール)で作成した デザインファイルをインポートして UI構築ができる
  18. 1. AWS Amplifyとは 18 Figmaからデザイン取り込み Figmaで作ったUIコンポーネント

  19. 1. AWS Amplifyとは 19 バックエンドのデプロイができる

  20. 1. AWS Amplifyとは 20 UIとバックエンドのデータの 紐付けができる 選択

  21. 1. AWS Amplifyとは 21 1. Amplify Library 2. Amplify CLI

    3. Amplify Hosting 4. Amplify Studio Amplify構成要素
  22. 2. AWS Amplifyで サーバーレスアプリケーションを開発してみよう 22

  23. 23 n TODOリストを管理するアプリ # 要件 • ログイン認証 • TODOの登録、更新、削除 •

    毎⽇のバッチ処理として1ヶ⽉以上経ったTODOを削除 • 静的Webサイトとして公開 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  24. 24 n TODOリストを管理するアプリ # 要件 • ログイン認証 → Amplify CLIでAuth機能(Cognito)を追加

    → Amplify Libraryを使⽤してCognito部分のFrontendを実装 • TODOの登録、更新、削除 → Amplify CLIでAPI機能(AppSync + DynamoDB)を追加 → Amplify Libraryを使⽤してAPI部分のFrontendを実装 • 毎⽇のバッチ処理として1ヶ⽉以上経ったTODOを削除 → Amplify CLIでFunction機能(Lambda)を追加 • 静的Webサイトとして公開 → Amplify Hostingで公開 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  25. 25 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう AWS Cognito AWS Lambda AWS AppSync

    AWS DynamoDB Webアプリに認証・認可機能を提供するマネージドサービス 利⽤するユーザーが⾃分でIDの登録が可能であるほか、FacebookやGoogle、Appleなどのアカウントと連携できる AWSクラウド上にプログラムを定義しておき、インターネットを通じてサーバーレスでプログラムを実⾏できる コンピューティングサービス。処理能⼒の拡張は⾃動的に⾏われるため、スケーラビリティが⾼く運⽤管理が簡単 GraphQL API の開発を容易にするマネージドサービス GraphQLはフロントエンド側からデータのレスポンス形式を指定できるAPI クエリ⾔語とランタイムのこと(割愛) フルマネージドなNoSQL データベースサービス 1桁ミリ秒単位のレイテンシーを要求するアプリケーションにも対応可能
  26. 26 n 構成図 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  27. 27 n 構成図 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  28. 28 n TODOリストを管理するアプリ # 要件 • ログイン認証 → Amplify CLIでAuth機能(Cognito)を追加

    → Amplify Libraryを使⽤してCognito部分のFrontendを実装 • TODOの登録、更新、削除 → Amplify CLIでAPI機能(AppSync + DynamoDB)を追加 → Amplify Libraryを使⽤してAPI部分のFrontendを実装 • 毎⽇のバッチ処理として1ヶ⽉以上経ったTODOを削除 → Amplify CLIでFunction機能(Lambda)を追加 • 静的Webサイトとして公開 → Amplify Hostingで公開 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  29. 29 n バックエンド初期設定(CLIインストール、アプリ初期化) $ npm install –g @aws-amplify/cli $ amplify

    init # プロジェクト新規作成 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう $ npx create-react-app kumoben # 今回はフロントエンドはReactを使⽤ $ npm install aws-amplify # ライブラリ インストール $ npm install @aws-amplify/ui-react # React⽤ライブラリ インストール MJ n フロントエンド初期設定(Reactアプリ作成)
  30. 30 # 要件 • ログイン認証 → Amplify CLIでAuth機能を追加 $ amplify

    add auth # 認証機能(Cognito)の追加 ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done. 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  31. 31 n ローカルにCognitoのリソース定義ファイルが作成される ./amplify/backend/auth/kumobenxxxxxxx/cli-inputs.json 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  32. 32 n フロントエンド Auth実装例(React.js) import { withAuthenticator, AmplifySignOut } from

    '@aws-amplify/ui-reactʼ; function App() { return ( <> <header>We nou have auth!</header> <AmplifySignOut /> </> ); } export default withAuthenticator(App); 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう # 要件 • ログイン認証 → Amplify Libraryを使⽤してCognito部分のFrontendを実装
  33. 33 n TODOリストを管理するアプリ # 要件 • ログイン認証 → Amplify CLIでAuth機能(Cognito)を追加

    → Amplify Libraryを使⽤してCognito部分のFrontendを実装 • TODOの登録、更新、削除 → Amplify CLIでAPI機能(AppSync + DynamoDB)を追加 → Amplify Libraryを使⽤してAPI部分のFrontendを実装 • 毎⽇のバッチ処理として1ヶ⽉以上経ったTODOを削除 → Amplify CLIでFunction機能(Lambda)を追加 • 静的Webサイトとして公開 → Amplify Hostingで公開 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  34. 34 $ amplify add api # API(GraphQL or ApiGateway)の追加 ?

    Select from one of the below mentioned services: GraphQL ? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue ? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description) # 要件 • TODOの登録、更新、削除 → Amplify CLIでAPI機能を追加 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  35. 35 n ローカルにAppSyncとDynamoDBのリソース定義ファイルが作成される BNQMJGZCBDLFOEBQJLVNPCFOTDIFNBHSBQIRM 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  36. 36 n フロントエンド GraphQL API実装例(React.js) import { API, graphqlOperation }

    from 'aws-amplifyʼ; import { listTodo, updateTodo, deleteTodo} from ʻ./graphql/queries'; import { createTodo, updateTodo, deleteTodo} from ʻ./graphql/mutationsʼ; const apiData = API.graphql({ query: listNotes }) await API.graphql(graphqlOperation(createTodo, {input: kumoben})); await API.graphql(graphqlOperation(updateTodo, {input: { id: todoId, name: “update”}})); await API.graphql(graphqlOperation(updateTodo, {input: { id: todoId, name: “update”}})); 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう # 要件 • TODOの登録、更新、削除 → Amplify Libraryを使⽤してAPI部分のFrontendを実装
  37. 37 n TODOリストを管理するアプリ # 要件 • ログイン認証 → Amplify CLIでAuth機能(Cognito)を追加

    → Amplify Libraryを使⽤してCognito部分のFrontendを実装 • TODOの登録、更新、削除 → Amplify CLIでAPI機能(AppSync + DynamoDB)を追加 → Amplify Libraryを使⽤してAPI部分のFrontendを実装 • 毎⽇のバッチ処理で1ヶ⽉以上経ったTODOを削除 → Amplify CLIでFunction機能(Lambda)を追加 • 静的Webサイトとして公開 → Amplify Hostingで公開 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  38. 38 $ amplify add function # Lambda関数の追加 ? Select which

    capability you want to add: Lambda function (serverless function) ? Provide an AWS Lambda function name: kumobenLambda ? Choose the runtime that you want to use: Python ? Do you want to configure advanced settings? Yes ? Do you want to invoke this function on a recurring schedule? Yes ? At which interval should the function be invoked: Daily ? Select the start time in UTC (use arrow keys): 12:00 AM ? Do you want to edit the local lambda function now? No # 要件 • 毎⽇のバッチ処理で1ヶ⽉以上経ったTODOを削除 → Amplify CLIでFunction機能を追加 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  39. 39 n ローカルにLambdaのリソース定義ファイルが作成される BNQMJGZCBDLFOEGVODUJPOLVNPCFO-BNCEBLVNPCFO-BNCEBDMPVEGPSNBUJPOUFNQMBUFKTPO 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  40. 40 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう ここまで作成したコードをGitHubに上げます

  41. 41 n TODOリストを管理するアプリ # 要件 • ログイン認証 → Amplify CLIでAuth機能(Cognito)を追加

    → Amplify Libraryを使⽤してCognito部分のFrontendを実装 • TODOの登録、更新、削除 → Amplify CLIでAPI機能(AppSync + DynamoDB)を追加 → Amplify Libraryを使⽤してAPI部分のFrontendを実装 • 毎⽇のバッチ処理として1ヶ⽉以上経ったTODOを削除 → Amplify CLIでFunction機能(Lambda)を追加 • 静的Webサイトとして公開 → Amplify Hostingで公開 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう
  42. 42 # 要件 • 静的Webサイトとして公開 → Amplify Hostingで公開 2. AWS

    Amplifyでサーバーレスアプリケーションを開発してみよう $ amplify add hosting ? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains , Continuous deployment) ? Choose a type ❯ Continuous deployment (Git-based deployments) Manual deployment Learn more
  43. 43 • コマンドラインから「Continuous deployment (Git-based deployments)」を選択したタイミングで、 ソースリポジトリを選択する画⾯が⾃動で開く 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  44. 44 • GitHub連携しブランチを選択 • コードをコミットするたびにバックエンドとフロントエンド両⽅に更新を継続的にデプロイ 静的WebサイトのURL発⾏ 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  45. 45 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう 完成物まとめ

  46. 46 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう フォルダ構成 . ├─ amplify │ ├─

    backend │ ├── api フォルダ │ ├── auth フォルダ │ ├── function フォルダ │ ├── awscloudformation │ └── etc …(Amplifyの設定ファイルなど) ├─ public フォルダ ├─ src フォルダ └─ package.json
  47. 47 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう n バックエンド Cognito

  48. 48 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう n バックエンド API (AppSync、DynamoDB)

  49. 49 n バックエンド Lambda 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  50. 50 2. AWS Amplifyでサーバーレスアプリケーションを開発してみよう

  51. 3.開発Tips 51

  52. 3.開発Tips 52 n フロントエンドアプリの環境変数の読み込み⽅法

  53. 3.開発Tips 53 n フロントエンドアプリの環境変数の読み込み⽅法 ビルドの設定 → amplify.ymlに追記

  54. 3.開発Tips 54 n LambdaでPythonを選択した場合にビルドエラー • AmplifyのCI/CDで使⽤するPythonは3.7のため、バージョンの不⼀致でエラーになることがある

  55. 55 本⽇のまとめ1 まとめ n AWS Amplifyは • Amplify CLI や

    library で簡単にWebアプリに機能を追加することができる • Amplify Hostingで Git ベースで静的WebサイトのCI/CDができる → インフラ構築の時間を短縮しアプリケーションの開発スピードをあげることができる
  56. 56 本⽇のまとめ2 まとめ n AWS Amplifyが向いているケース • AppSyncやDynamoDBを使⽤したシンプルなアプリ(リアルタイム更新が必要な場合など) • Cognito認証を使⽤するアプリ

    n AWS Amplifyが向いていないケース • Amplify CLIが対応していないリソースを使⽤するアプリ(EC2やRDSなど) • Cognito以外の認証機能を使⽤するアプリ
  57. ありがとうございました 57