[レポート] AWSで作るWebフロント&クロスプラットフォームモバイル開発 #MOB307 #reinvent

2019.12.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

本記事では、セッション「MOB307 Frontend web and cross-platform mobile development on AWS」をレポートします。

Speaker

  • Naber Dabit AWS Senior Developer Advocate (@dabit3)

AWS Amplify Overview & state of union

  • Amplify Frameworkは15の機能
  • Amplify Consoleは16の機能
  • Community Siteもオープン
  • Overview
    • CLI Toolchain
    • Client libraries (iOS / Android / JavaScript)
    • Olatform-specific components
    • Hosting + CI/CD platform
  • Workflow
    • CLIからサービスを作成
    • クライアントライブラリを使って接続
    • アップデート
  • Amplify CLI
    • Creating services
    • Updating and configuration existing services
    • Local mocking & testing
    • Creating & manage environments
    • GraphQL & Lambda
    • Removing
  • Usage
    • amplify init ~ amplify push までシンプルなコマンドで構築可能

Amplifu Client

  • 様々なPlatformで利用可能
  • Native iOS, Androidをサポート (New) 来週リリース予定

OAuth Support

  • Sign In with Appleをサポート (NEW)
  • Facebook / Google / Amazon / OIDC

AWS Amplify New Feasture Overview

  • 2019には11の機能アップデート
    • Lambda Triggers
    • Local mocking & testing
    • Multiple authorization types for AppSync
    • Custom AppSync resolvers
    • AppSync Lambda resolvers
    • Custom DynamoDB indexed
    • Predictions - Machine learning & AI
    • Multiple environments
    • Inport Aurora Serverless data source for AppSync
    • Full
    • OAuth
  • this week
    • JS library goodness to iOS/Android development

New featureの概要とBestPractice

  • AWS AppSync Multi Authorization Access
    • AppSyncで複数の認証が設定可能
    • rule ディレクティブで認証先を変更可能
    • Clientで指定可能
  • Lambda resolvers
    • GraphQLのResolverとしてLambdaを設定可能

Tips and Best Practice

  • 保護すべきモデルには @auth で認証を有効に
  • Local Mochking & Testingで
  • フィールドレベルのAuthorizationを利用
  • 複数環境を使ってプロダクションテストを行う
  • BranchのプレビューをAmplify Consoleで作成する
  • @key でAdditionalなデータアクセスパターンを作る

Amplify Console

  • Git based hosting
  • Deploys to globally available CDN
  • Deploy both front and bacn ends
  • CI/CD

New Feature

  • 2019に13の機能をアップデート
    • Fullstack backend visibility
    • PR previews
    • CFn Support
    • Incoming webhooks
    • Instant cache invalidation
    • Custom HTTP headers
    • Deploy via S3, Dropbox, or your desktop

Demo

Music Festival APIのDemoです。

  • Cognitoでログイン
  • AppSyncでAPIアクセス
  • DynamoDB Resolverでデータを格納
  • Fine-grained Access Control

CLIから作る際に、APIをRESTにするかGraphQLにするかを選べます。

ベースの認証方式も選べます。Cognito User Poolsを選んだ場合はリソースも作成します。

GraphQLを選ぶ際は、スキーマを作りつつモデルも作成できます。

@model を作ると、DynamoDBの作成などをよしなにやってくれます。@connection を使うと他のモデルを参照可能。@auth でモデルへのアクセスを制限します。operations を指定すると例えば読み取りのみなどのような設定が可能です。

Schemaの作成が終わったらCLIに戻り、プロジェクト作成が完了。

ローカルでビルド。GraphiQLも使えます。サンプルのQueryの作成もボタンぽちぽちで可能。ここも簡単になっています。

認証も試すことができます。

まとめ

Amplify、正直最近追えていませんでしたが2019年も数多くのアップデート、しかも開発におけるかゆいところに手が届く系のアップデートが非常に多いです。実際に試しながらキャッチアップできればと思います。