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

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

l_tanno
December 16, 2022

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

l_tanno

December 16, 2022
Tweet

More Decks by l_tanno

Other Decks in Technology

Transcript

  1. ⾃⼰紹介 3 ・所属:クラウドインテグレーション事業部 ・⼊社:2020年4⽉ 新卒⼊社 吉川 翔悟 / Yoshikawa Shogo

    ・業務内容:AWS設計構築運⽤ ・職種:インフラエンジニア ・趣味:サッカー観戦、ゲーム
  2. 1.ブログサービスの全体像 6 ・ホスティング:S3 CloudFront ・API:App Sync Amplify Studioで作成します ・データストア:DynamoDB ※過去の雲勉(講師は別の⽅)でAmplifyで作成するサーバレス

    アプリの解説動画 雲勉@オンライン【勉強会】AWS Amplifyで始めるアプリ開発【初⼼者向け】:https://www.youtube.com/watch?v=xGqQNnQQ1W0 ・認証:Cognito
  3. 2. AWSサービスの説明 8 ・AWS でフルスタック アプリケーションを迅速かつ 簡単に構築できるようにする専⽤のツールと機能のセット Amplify とは ?

    ・アプリケーションに必要なバックエンドの構築を するためのCLIやライブラリなどがある Webサイトをホスティングする機能もある
  4. 2. AWSサービスの説明 9 ・ Amplify CLI: アプリ⽤の AWS クラウド サービスを作成、統合、

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

    Studio ではできない事 Amplify Studioだけでは構築できないもの ・Predictions(Translateなど) ・Interactions(チャットボット) ・Notifications Amplify CLIでの対応となる
  6. 3.Amplify Studioでの構築⼿順 18 1 Amplify CLIのインストール $ sudo npm install

    -g @aws-amplify/cli 事前準備 Amplify CLIのインストールおよび設定 スクショ
  7. 3.Amplify Studioでの構築⼿順 19 2 Amplify CLIの設定 $ amplify configure 2の上記コマンドでリージョン、IAM

    User、 アクセスキーなどを設定する。 IAM Userを作成するときに デフォルトでアタッチされるポリシーは AdministratorAccess-Amplify 事前準備 Amplify CLIの設定 スクショ
  8. 3.Amplify Studioでの構築⼿順 20 1 reactプロジェクトを作成 $ npx create-react-app ${プロジェクト名} $

    cd ${プロジェクト名} 2 Amplify プロジェクトの初期化および作成、 ライブラリのインストール $ amplify init $ npm install aws-amplify @aws-amplify/ui-react 事前準備 Amplifyのプロジェクトを作成
  9. 3.Amplify Studioでの構築⼿順 24 作成するデータモデル Blog フィールド タイプ Id : ID!

    title : String! content : String! contentcover : String データモデルを作成 まずブログに必要なデータモデルを作成していきます。 GraphQLの型指定スカラー型が指定できる タイプ ID String Int Float Boolean 他AWSの情報(EmailやAWSタイムスタン プなど)
  10. 4. まとめ 42 ・インフラエンジニアでもAmplify StudioとFigmaを使⽤し ノーコード、ローコードで機能を簡単に作成できた。 しかもGUIベースで 4. まとめ(感想) ・Amplify

    Studioのアップデートに期待 ・Amplify、React、Figmaなど全て初挑戦だったので苦労した がコードを読みながら勉強することができた。