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

Slide 1

Slide 1 text

吉川翔悟 2022/12/15 サーバレスでブログサイト開設〜Amplify Studio〜

Slide 2

Slide 2 text

アジェンダ 2 1.ブログサービスの全体像 2.AWSサービスの概要説明 3.Amplify Studioでの構築⼿順 4. まとめ

Slide 3

Slide 3 text

⾃⼰紹介 3 ・所属：クラウドインテグレーション事業部・⼊社：2020年4⽉新卒⼊社吉川翔悟 / Yoshikawa Shogo ・業務内容：AWS設計構築運⽤・職種：インフラエンジニア・趣味：サッカー観戦、ゲーム

Slide 4

Slide 4 text

4 1.ブログサービスの全体像

Slide 5

Slide 5 text

1.ブログサービスの全体像 5 ・ホスティング：S3 CloudFront ・API：App Sync サービスの全体像・データストア：DynamoDB ・認証：Cognito

Slide 6

Slide 6 text

1.ブログサービスの全体像 6 ・ホスティング：S3 CloudFront ・API：App Sync Amplify Studioで作成します・データストア：DynamoDB ※過去の雲勉（講師は別の⽅）でAmplifyで作成するサーバレスアプリの解説動画雲勉@オンライン【勉強会】AWS Amplifyで始めるアプリ開発【初⼼者向け】：https://www.youtube.com/watch?v=xGqQNnQQ1W0 ・認証：Cognito

Slide 7

Slide 7 text

7 2. AWSサービスの説明

Slide 8

Slide 8 text

2. AWSサービスの説明 8 ・AWS でフルスタックアプリケーションを迅速かつ簡単に構築できるようにする専⽤のツールと機能のセット Amplify とは ? ・アプリケーションに必要なバックエンドの構築をするためのCLIやライブラリなどがある Webサイトをホスティングする機能もある

Slide 9

Slide 9 text

2. AWSサービスの説明 9 ・ Amplify CLI：アプリ⽤の AWS クラウドサービスを作成、統合、および管理するための統合ツール Amplify とは ? 主に４つのツールとサービス・ Amplify Libraries：オープンソースクライアントライブラリを使⽤しバックエンドと簡単にやり取りすることができる・ Amplify Hosting：フルスタックのサーバーレス Web アプリをホストするための git ベースのワークフローを提供・ Amplify Studio：フルスタックのウェブおよびモバイルアプリを構築するためのビジュアル開発環境です。上記AWS Amplifyで利⽤できる機能をGUIとして提供

Slide 10

Slide 10 text

2. AWSサービスの説明 10 ・DynamoDB、AppSync、Cognito、S3が構築可能 Amplify Studio の主な機能バックエンドをUIベースで構築

Slide 11

Slide 11 text

2. AWSサービスの説明 11 ・デザインツールであるFigmaとの連携でコンポーネントコードを⾃動で出⼒することが可能 Amplify Studio の主な機能 FigmaでUI開発

Slide 12

Slide 12 text

2. AWSサービスの説明 12 ・コンポーネントエディターを使⽤して、 UI コンポーネントの要素をバックエンドデータに接続させることが簡単にできる。 Amplify Studio の主な機能簡単にUIをデータにマッピングさせることが可能スクショ

Slide 13

Slide 13 text

2. AWSサービスの説明 13 ・DynamoDB、S3、ユーザなどのデータをUIで操作可能 Amplify Studio の主な機能バックエンドのデータ管理スクショ

Slide 14

Slide 14 text

2. AWSサービスの説明 14 ・Amplify Studioのアクセス権はメールアドレスで他チームメイトにすばやく付与することができる。 Amplify Studio の主な機能アカウントは不要

Slide 15

Slide 15 text

2. AWSサービスの説明 15 ・Lambda関数の作成・GraphQL APIの作成・REST APIの作成・Analytics(Kinesisなど) Amplify Studio ではできない事 Amplify Studioだけでは構築できないもの・Predictions（Translateなど）・Interactions（チャットボット）・Notifications Amplify CLIでの対応となる

Slide 16

Slide 16 text

2. AWSサービスの説明 16 ・ユースケースベースで開発できる「カテゴリ」と呼ばれる機能単位でアプリケーションに機能を追加することができます。・AWSに詳しくない⽅、最速で開発に取り掛かりたい⽅・不要な労⼒をかけたくない⽅ etc... Amplify ユースケース

Slide 17

Slide 17 text

17 3.Amplify Studioでの構築⼿順

Slide 18

Slide 18 text

3.Amplify Studioでの構築⼿順 18 1 Amplify CLIのインストール $ sudo npm install -g @aws-amplify/cli 事前準備 Amplify CLIのインストールおよび設定スクショ

Slide 19

Slide 19 text

3.Amplify Studioでの構築⼿順 19 2 Amplify CLIの設定 $ amplify configure 2の上記コマンドでリージョン、IAM User、アクセスキーなどを設定する。 IAM Userを作成するときにデフォルトでアタッチされるポリシーは AdministratorAccess-Amplify 事前準備 Amplify CLIの設定スクショ

Slide 20

Slide 20 text

3.Amplify Studioでの構築⼿順 20 1 reactプロジェクトを作成 $ npx create-react-app ${プロジェクト名} $ cd ${プロジェクト名} 2 Amplify プロジェクトの初期化および作成、ライブラリのインストール $ amplify init $ npm install aws-amplify @aws-amplify/ui-react 事前準備 Amplifyのプロジェクトを作成

Slide 21

Slide 21 text

3.Amplify Studioでの構築⼿順 21 Amplify Studioを起動

Slide 22

Slide 22 text

3.Amplify Studioでの構築⼿順 22 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し

Slide 23

Slide 23 text

3.Amplify Studioでの構築⼿順 23 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し

Slide 24

Slide 24 text

3.Amplify Studioでの構築⼿順 24 作成するデータモデル Blog フィールドタイプ Id : ID! title : String! content : String! contentcover : String データモデルを作成まずブログに必要なデータモデルを作成していきます。 GraphQLの型指定スカラー型が指定できるタイプ ID String Int Float Boolean 他AWSの情報（EmailやAWSタイムスタンプなど）

Slide 25

Slide 25 text

3.Amplify Studioでの構築⼿順 25 AWSのコンソールで説明

Slide 26

Slide 26 text

3.Amplify Studioでの構築⼿順 26 ・Amplify Studioで作成したデータモデルをもとにGraphQLのスキーマが⾃動で⽣成される・⾃動でAppSyncやDynamoDBが裏で作成され、GraphQLのAPIも⾃動で設定される。 Amplifyでのデータモデルを作成データモデルの作成のみで⽣成されるリソース

Slide 27

Slide 27 text

3.Amplify Studioでの構築⼿順 27 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し

Slide 28

Slide 28 text

3.Amplify Studioでの構築⼿順 28 ・ブラウザ上でデザインを作成できるプラットフォーム・直感的に操作が可能でノーコードで作成ができる。 Figmaの設定とコンポーネントの同期 Figmaとは同期の仕⽅・⽤意したFigmaのURLをUI Libralyから読み込む

Slide 29

Slide 29 text

3.Amplify Studioでの構築⼿順 29 AWSのコンソールで説明

Slide 30

Slide 30 text

3.Amplify Studioでの構築⼿順 30 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し

Slide 31

Slide 31 text

3.Amplify Studioでの構築⼿順 31 ・コンポーネント内の要素にデータのマッピングが可能。コンポーネントの編集コンポーネントの編集がGUIで可能・イベントハンドラが設定可能イベントとしては URLに移動やページの更新、データレコードの作成更新削除が可能・コレクションの設定リストとグリッド、⽅向、順序などの変更が可能検索やページの設定も簡単に構築できる

Slide 32

Slide 32 text

3.Amplify Studioでの構築⼿順 32 ・データのマッピング（ブログコンテンツの表⽰） AWSのコンソールで説明ブログで必要な要素を作成する。・データのコレクション（ブログ⼀覧の表⽰）・データの作成、削除、更新（ブログコンテンツの作成、更新、削除）

Slide 33

Slide 33 text

3.Amplify Studioでの構築⼿順 33 構築の流れ 1. データモデルの作成 2. Figmaからコンポーネントの読み込み 3. 読み込んだコンポーネントの編集 4. 編集したコンポーネントをローカルにpullしapp.jsの編集 5. 3と4の繰り返し

Slide 34

Slide 34 text

3.Amplify Studioでの構築⼿順 34 AWSのコンソールで説明

Slide 35

Slide 35 text

3.Amplify Studioでの構築⼿順 35 ・Amplify Studioではマークダウンでの⼊⼒や表⽰のマッピングができないマークダウンでのデータマッピングブログで必要なマークダウンの⼊⼒と表⽰。・formのsrc/ui-componennts/コンポーネントファイルを直接修正・ src/ui-componennts配下の修正はpullした際に書き換わるので、別フォルダに移動させる

Slide 36

Slide 36 text

3.Amplify Studioでの構築⼿順 36 マークダウンでのデータマッピングマークダウンでの⼊⼒。マークダウンでの表⽰。よくわからなかった。合っているかわからない

Slide 37

Slide 37 text

3.Amplify Studioでの構築⼿順 37 ・ログイン⽅法の選択が可能 UserName、電話番号、Facebookなどが選択できる認証 Cognitoの設定をする。・サインアップにはパスワードポリシーやメールアドレスの確認⽅法が簡単に実装できる

Slide 38

Slide 38 text

3.Amplify Studioでの構築⼿順 38 AWSのコンソールで説明

Slide 39

Slide 39 text

3.Amplify Studioでの構築⼿順 39 ・サインインしたユーザと全てのユーザの権限をUI上で設定できるデータソースへの権限 DynamoDBやS3への権限管理が簡単に設定できる。

Slide 40

Slide 40 text

3.Amplify Studioでの構築⼿順 40 ・各Gitリポジトリなどでデプロイ可能 Amplify Hostingでアプリをホスト Amplifyのコンソール画⾯に戻りホストする。

Slide 41

Slide 41 text

41 4. まとめ

Slide 42

Slide 42 text

4. まとめ 42 ・インフラエンジニアでもAmplify StudioとFigmaを使⽤しノーコード、ローコードで機能を簡単に作成できた。しかもGUIベースで 4. まとめ（感想）・Amplify Studioのアップデートに期待・Amplify、React、Figmaなど全て初挑戦だったので苦労したがコードを読みながら勉強することができた。