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

Amplify Admin UI超入門|ミツエーリンクスTSD

Amplify Admin UI超入門|ミツエーリンクスTSD

社内勉強会用に「Amplify Admin UI」についてまとめました。

Amplify Admin UIはre:Invent 2020でリリースされた管理画面サービスです。データモデリング、コンテンツ管理、アプリケーションのユーザー・グループ管理 など、CLIを使わなければできなかったAmplifyを使ったバックエンドリソースの作成がかんたんにできるようになりました。


ミツエーリンクスTSDのエンジニアリングについて発信しています。
エンジニア積極採用中!
TSD公式エンジニアブログ TSD CoLab

株式会社ミツエーリンクスTSD

F1bcf74c372e3d1b68834eef7163063c?s=128

ミツエーリンクスTSD

October 31, 2021
Tweet

More Decks by ミツエーリンクスTSD

Other Decks in Technology

Transcript

  1. Amplify Admin UI超入門 株式会社ミツエーリンクスTSD 株式会社ミツエーリンクスTSD

  2. Jamstackアーキテクチャでは、Webサイトの関係者それぞ れに適切なコンテンツの使い方を提供できる https://www.gatsbyjs.com/blog/2018-10-04-journey- to-the-content-mesh

  3. 管理画面を用意するのが大変 できれば自前で開発したくない...。

  4. つらい と思ったそこのあなた

  5. AWS Amplifyでは

  6. 管理画面を瞬殺で つくれます!!

  7. AWS Amplify Admim UI

  8. Amplify Admin UIとは (※以下Admin UI) re:Invent 2020でリリースされた管理画面サービス CLIを使わなければできなかったAmplifyを使ったバック エンドリソースの作成が、かんたんにできるようになっ た

  9. Admin UIの基本機能 (2021年10月時点) データモデリング コンテンツ管理 アプリケーションのユーザー・グループ管理

  10. データモデリング データモデルを視覚的に定義可能。モデル間のリレーショ ンの設定や、モデルに対して認証ルールを設定できる

  11. コンテンツ管理 データを視覚的に追加できる。入力用UIは、定義したデー タ型に適したものが提供される。テキストはMarkdownに 対応。プレビューも可能。

  12. ユーザー・グループ管理 コンテンツデータをアプリ上で操作できるユーザーやユー ザーグループを管理できる。

  13. Admin UIへのアクセス管理 AWSマネジメントコンソールの「Admin UI management」>「Access Control」からユーザーを追 加。権限はフルアクセスとデータ管理のみの2種。

  14. カスタムドメイン 管理画面のドメインをカスタムドメインに変更できる。バ ックエンド環境単位で設定が可能。

  15. オウンドメディアを作ってみる! おおまかな流れ: 1. セットアップ 2. Admin UIを有効化する 3. データモデリング 4.

    コンテンツを追加する 5. アプリケーションに組み込む
  16. 1. セットアップ 作成したアプリケーションにAmplifyを紐付け、バックエ ンド環境をインストールする。 今回はReactアプリケーションの構築を想定。 # Amplify CLIのインストール npm install

    -g @aws-amplify/cli # AWSアカウントの紐付け amplify configure # Amplifyバックエンド環境を初期化 amplify init
  17. 2. Admin UIを有効化する AWSマネジメントコンソールの「Admin UI management」>「Enable admin UI (All environments)」からAdmin

    UIを有効化
  18. 3. データモデリング Admin UIの「Data」の「Add model」を選択

  19. モデルを登録 追加したら「Save and Deploy」をクリック

  20. 4. コンテンツを追加 「Create article」からコンテンツを追加

  21. コンテンツを編集 編集が終わったら「Save Article」をクリック

  22. 5. アプリケーションに組み込む ローカル環境に、バックエンド環境の更新を同期 # Amplify Pull amplify pull --appId <app-id>

    --envName feature
  23. Amplifyの読み込み // app.tsx import Amplify from '@aws-amplify/core'; import awsConfigure from

    '../src/aws-exports'; Amplify.configure({ ...awsConfigure, });
  24. DataStoreでデータを参照 AmplifyのDataStoreでデータを参照する。 import {syncExpression, Predicates, SortDirection} from '@aws- amplify/datastore'; import

    {Article} from '../../src/models';
  25. フィルタの設定 データを読み込む前に記述する。 // 省略 DataStore.configure({ // データストアの設定。条件でフィルタをしたいときなどに便利 syncExpressions: [ syncExpression(Article,

    (post) => post?.archived('eq', false)), ] });
  26. データの取得 引数にオプションを設定することも可能。 // データ一覧の取得 const posts = await DataStore.query(Article, Predicates.ALL,

    { page: 0, limit: 5, sort: (s) => s.releaseDate(SortDirection.DESCENDING), });
  27. Admin UIのコンソールから参考コードが参照可

  28. 認証ルールの設定方法 認証ルールはAdmin UI上の「Data modeling」>Modelを 選択すると、右側に表示される

  29. 記事に誰でもアクセス する権限を設定する 「Authenticated and unauthenticated scopes」では、認 証されていないユーザーへのアクセ スを制限可能 たとえばCRUDのうちReadだけ有効 化することで、閲覧者に対して記事

    の作成や削除の権限を与えないよう なルールを設定できる
  30. ほかにも 自分の投稿に対して、他のユーザーが操作できないよう に、操作の制限をかける ユーザーグループに対して権限のルールを設定する など、アプリケーションに対して柔軟な認証ルールを Adumin UIから設定可能

  31. Admin UIを使うときの注意 「Contents」がずっとローディング状態で止まったまま になる → データベースをデプロイしなおせば治るときが ある 機能ブランチでバックエンドを共有しているときは、 「 amplify

    pull 」を忘れずに → うっかりバックエンド の設定を上書きしないように!
  32. 今後の機能追加に期待… ご清聴ありがとうございました!