第91回 雲勉【オンライン：初心者向け】サーバレスでブログサイト開設〜Amplify Studio〜

Transcript

1. 吉川 翔悟 2022/12/15 サーバレスでブログサイト開設 〜Amplify Studio〜
2. アジェンダ 2 1.ブログサービスの全体像 2.AWSサービスの概要説明 3.Amplify Studioでの構築⼿順 4. まとめ
3. ⾃⼰紹介 3 ・所属：クラウドインテグレーション事業部 ・⼊社：2020年4⽉ 新卒⼊社 吉川 翔悟 / Yoshikawa Shogo ・業務内容：AWS設計構築運⽤ ・職種：インフラエンジニア ・趣味：サッカー観戦、ゲーム
4. 4 1.ブログサービスの全体像
5. 1.ブログサービスの全体像 5 ・ホスティング：S3 CloudFront ・API：App Sync サービスの全体像 ・データストア：DynamoDB ・認証：Cognito
6. 1.ブログサービスの全体像 6 ・ホスティング：S3 CloudFront ・API：App Sync Amplify Studioで作成します ・データストア：DynamoDB ※過去の雲勉（講師は別の⽅）でAmplifyで作成するサーバレス アプリの解説動画 雲勉@オンライン【勉強会】AWS Amplifyで始めるアプリ開発【初⼼者向け】：https://www.youtube.com/watch?v=xGqQNnQQ1W0 ・認証：Cognito
7. 7 2. AWSサービスの説明
8. 2. AWSサービスの説明 8 ・AWS でフルスタック アプリケーションを迅速かつ 簡単に構築できるようにする専⽤のツールと機能のセット Amplify とは ? ・アプリケーションに必要なバックエンドの構築を するためのCLIやライブラリなどがある Webサイトをホスティングする機能もある
9. 2. AWSサービスの説明 9 ・ Amplify CLI： アプリ⽤の AWS クラウド サービスを作成、統合、 および管理するための統合ツール Amplify とは ? 主に４つのツールとサービス ・ Amplify Libraries： オープンソース クライアント ライブラリを使⽤し バックエンドと簡単にやり取りすることができる ・ Amplify Hosting： フルスタックのサーバーレス Web アプリをホスト するための git ベースのワークフローを提供 ・ Amplify Studio： フルスタックのウェブおよびモバイルアプリを 構築するためのビジュアル開発環境です。 上記AWS Amplifyで利⽤できる機能をGUIとして提供
10. 2. AWSサービスの説明 10 ・DynamoDB、AppSync、Cognito、S3が構築可能 Amplify Studio の主な機能 バックエンドをUIベースで構築
11. 2. AWSサービスの説明 11 ・デザインツールであるFigmaとの連携でコンポーネントコードを ⾃動で出⼒することが可能 Amplify Studio の主な機能 FigmaでUI開発
12. 2. AWSサービスの説明 12 ・コンポーネント エディターを使⽤して、 UI コンポーネントの要素をバックエンドデータに接続させることが簡単にできる。 Amplify Studio の主な機能 簡単にUIをデータにマッピングさせることが可能 スクショ
13. 2. AWSサービスの説明 13 ・DynamoDB、S3、ユーザなどのデータをUIで操作可能 Amplify Studio の主な機能 バックエンドのデータ管理 スクショ
14. 2. AWSサービスの説明 14 ・Amplify Studioのアクセス権はメールアドレスで 他チームメイトにすばやく付与することができる。 Amplify Studio の主な機能 アカウントは不要
15. 2. AWSサービスの説明 15 ・Lambda関数の作成 ・GraphQL APIの作成 ・REST APIの作成 ・Analytics(Kinesisなど) Amplify Studio ではできない事 Amplify Studioだけでは構築できないもの ・Predictions（Translateなど） ・Interactions（チャットボット） ・Notifications Amplify CLIでの対応となる
16. 2. AWSサービスの説明 16 ・ユースケースベースで開発できる 「カテゴリ」と呼ばれる機能単位でアプリケーションに機能を追加することができます。 ・AWSに詳しくない⽅、最速で開発に取り掛かりたい⽅ ・不要な労⼒をかけたくない⽅ etc... Amplify ユースケース
17. 17 3.Amplify Studioでの構築⼿順
18. 3.Amplify Studioでの構築⼿順 18 1 Amplify CLIのインストール $ sudo npm install -g @aws-amplify/cli 事前準備 Amplify CLIのインストールおよび設定 スクショ
19. 3.Amplify Studioでの構築⼿順 19 2 Amplify CLIの設定 $ amplify configure 2の上記コマンドでリージョン、IAM User、 アクセスキーなどを設定する。 IAM Userを作成するときに デフォルトでアタッチされるポリシーは AdministratorAccess-Amplify 事前準備 Amplify CLIの設定 スクショ
20. 3.Amplify Studioでの構築⼿順 20 1 reactプロジェクトを作成 $ npx create-react-app ${プロジェクト名} $ cd ${プロジェクト名} 2 Amplify プロジェクトの初期化および作成、 ライブラリのインストール $ amplify init $ npm install aws-amplify @aws-amplify/ui-react 事前準備 Amplifyのプロジェクトを作成
21. 3.Amplify Studioでの構築⼿順 21 Amplify Studioを起動
22. 3.Amplify Studioでの構築⼿順 22 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し
23. 3.Amplify Studioでの構築⼿順 23 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し
24. 3.Amplify Studioでの構築⼿順 24 作成するデータモデル Blog フィールド タイプ Id : ID! title : String! content : String! contentcover : String データモデルを作成 まずブログに必要なデータモデルを作成していきます。 GraphQLの型指定スカラー型が指定できる タイプ ID String Int Float Boolean 他AWSの情報（EmailやAWSタイムスタン プなど）
25. 3.Amplify Studioでの構築⼿順 25 AWSのコンソールで説明
26. 3.Amplify Studioでの構築⼿順 26 ・Amplify Studioで作成したデータモ デルをもとにGraphQLのスキーマが⾃ 動で⽣成される ・⾃動でAppSyncやDynamoDBが裏で 作成され、GraphQLのAPIも⾃動で設 定される。 Amplifyでのデータモデルを作成 データモデルの作成のみで⽣成されるリソース
27. 3.Amplify Studioでの構築⼿順 27 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し
28. 3.Amplify Studioでの構築⼿順 28 ・ブラウザ上でデザインを作成できるプラットフォーム ・直感的に操作が可能でノーコードで作成ができる。 Figmaの設定とコンポーネントの同期 Figmaとは 同期の仕⽅ ・⽤意したFigmaのURLをUI Libralyから読み込む
29. 3.Amplify Studioでの構築⼿順 29 AWSのコンソールで説明
30. 3.Amplify Studioでの構築⼿順 30 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し
31. 3.Amplify Studioでの構築⼿順 31 ・コンポーネント内の要素にデータのマッピングが可能。 コンポーネントの編集 コンポーネントの編集がGUIで可能 ・イベントハンドラが設定可能 イベントとしては URLに移動やページの更新、データレコードの作成更新削除が可能 ・コレクションの設定 リストとグリッド、⽅向、順序などの変更が可能 検索やページの設定も簡単に構築できる
32. 3.Amplify Studioでの構築⼿順 32 ・データのマッピング（ブログコンテンツの表⽰） AWSのコンソールで説明 ブログで必要な要素を作成する。 ・データのコレクション（ブログ⼀覧の表⽰） ・データの作成、削除、更新（ブログコンテンツの作成、更新、削除）
33. 3.Amplify Studioでの構築⼿順 33 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し
34. 3.Amplify Studioでの構築⼿順 34 AWSのコンソールで説明
35. 3.Amplify Studioでの構築⼿順 35 ・Amplify Studioではマークダウンでの⼊⼒や表⽰のマッピングができない マークダウンでのデータマッピング ブログで必要なマークダウンの⼊⼒と表⽰。 ・formのsrc/ui-componennts/コンポーネントファイルを直接修正 ・ src/ui-componennts配下の修正はpullした際に書き換わるので、 別フォルダに移動させる
36. 3.Amplify Studioでの構築⼿順 36 マークダウンでのデータマッピング マークダウンでの⼊⼒。 マークダウンでの表⽰。 よくわからなかった。合っているかわからない
37. 3.Amplify Studioでの構築⼿順 37 ・ログイン⽅法の選択が可能 UserName、電話番号、Facebookなどが選択できる 認証 Cognitoの設定をする。 ・サインアップにはパスワードポリシーやメールアドレスの確認⽅法が 簡単に実装できる
38. 3.Amplify Studioでの構築⼿順 38 AWSのコンソールで説明
39. 3.Amplify Studioでの構築⼿順 39 ・サインインしたユーザと全てのユーザの権限をUI上で設定できる データソースへの権限 DynamoDBやS3への権限管理が簡単に設定できる。
40. 3.Amplify Studioでの構築⼿順 40 ・各Gitリポジトリなどでデプロイ可能 Amplify Hostingでアプリをホスト Amplifyのコンソール画⾯に戻りホストする。
41. 41 4. まとめ
42. 4. まとめ 42 ・インフラエンジニアでもAmplify StudioとFigmaを使⽤し ノーコード、ローコードで機能を簡単に作成できた。 しかもGUIベースで 4. まとめ（感想） ・Amplify Studioのアップデートに期待 ・Amplify、React、Figmaなど全て初挑戦だったので苦労した がコードを読みながら勉強することができた。