Amplify FW で
爆速フロント開発

Who am I

interface Me extends Person {
  name: "Yukiya Murata";
  twitter: "@yKicchan";
  company: "Fenrir Inc.";
  job: "Web engineer";
  favorite: "花澤香菜" | "P5R" | "ピカチュウ";
  skills: "React" | "Vue.js" | "Angular" | "PHP" | "Go";
}

Amplify ってなんぞ

Amplify でできること一例

Required

• AWS Account
• Node.js v10.x or later
• npm v5.x or later
• git v2.14.1 or later

Getting starated

$ npm install -g @aws-amplify/cli
$ amplify confidure

• region と username 聞かれるので入力
• ブラウザで IAM ユーザーの作成が求められるので作る

Set up fullstack project

$ npx create-react-app react-amplified --typescript
$ cd react-amplified

• 今回は React の例
  • TypeScript は義務(過激派)
• 他にも Angular や iOS など主要なものは対応されてる

Initialize a new backend

$ amplify init

• 質問がいくつか出てくるので答える
• Enter 連打で基本OK

Install Amplify libraries

$ yarn add aws-amplify @aws-amplify/ui-react

Set up frontend

// src/index.tsx
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";

Amplify.configure(awsExports);

• Amplify に設定を食わせる
• 実態は AWS の各種サービスの ID などの設定

Cognito 認証してみる

$ amplify add auth
$ amplify push

動かしてみる

サンプルコード

$ yarn start

認証画面が出たら成功

一瞬でできた！

• サインアップ・サインイン・サインアウト
• パスワードリセット
• MFA

他にもカスタム認証だったり、
認証ログ取ったりといろいろできるゾ

実は...

• 発表資料作成 約2h
• サンプル作成 約10min

卍 Amplify is 爆速 卍