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

Transcript

1. 雲勉@オンライン【勉強会】 AWS Amplifyで始めるアプリ開発 〜初⼼者向け〜 2022/07/21
2. ０．講師⾃⼰紹介 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の登録、更新、削除 • 毎⽇のバッチ処理として１ヶ⽉以上経った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を実装 • 毎⽇のバッチ処理として１ヶ⽉以上経った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を実装 • 毎⽇のバッチ処理として１ヶ⽉以上経った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を実装 • 毎⽇のバッチ処理として１ヶ⽉以上経った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を実装 • 毎⽇のバッチ処理で１ヶ⽉以上経った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 # 要件 • 毎⽇のバッチ処理で１ヶ⽉以上経った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を実装 • 毎⽇のバッチ処理として１ヶ⽉以上経った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