Amplify FW で爆速フロント開発

LT資料

Transcript

1. Amplify FW で爆速フロント開発 yKicchan 1 1
2. 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"; } 2 2
3. Amplify ってなんぞ コマンド叩くだけで AWS の各種サービス作成をやってくれ る ライブラリ⼊れるだけで簡単に各種 AWS とフロントを接続 AWS あんま触れないけどフロントは分かるって⼈は使える 逆にネイティヴや Web わからんけど AWS 分かる⼈は微妙 3 3
4. Amplify でできること⼀例 Cognito を利⽤した認証システム // ← 今⽇はこれする S3 + CloudFront を利⽤した静的サイトホスティング API Gateway + Lambda で API 作成 REST, GraphQL 両対応 GitHub や CodeCommit と連携し CI/CD 4 4
5. とりあえず作ってみる 5 5
6. Required AWS Account Node.js v10.x or later npm v5.x or later git v2.14.1 or later 6 6
7. Getting started $ npm install -g @aws-amplify/cli $ amplify configure region と username 聞かれるので⼊⼒ ブラウザで IAM ユーザーの作成が求められるので作る 7 7
8. 8 8
9. アクセスキー ID とシークレットアクセスキーを CLI に⼊⼒ 機密情報なので慎重に扱おう 9 9
10. Set up fullstack project $ npx create-react-app react-amplified --typescript $ cd react-amplified 今回は React の例 TypeScript は義務(過激派) 他にも Angular や iOS など主要なものは対応されてる 10 10
11. Initialize a new backend $ amplify init 質問がいくつか出てくるので答える Enter 連打で基本 OK 11 11
12. Install Amplify libraries $ yarn add aws-amplify @aws-amplify/ui-react aws-amplify AWS との通信などが簡単にできるライブラリ @aws-amplify/ui-react ログイン画⾯などの UI 部品群 公式 には npm 使われてるけど yarn で追加してる create-react-app のデフォは yarn なので 12 12
13. Set up frontend // src/index.tsx import Amplify from "aws-amplify"; import awsExports from "./aws-exports"; Amplify.configure(awsExports); Amplify に設定を⾷わせる 実態は AWS の各種サービスの ID などの設定 13 13
14. Amplify 準備完了！ \ｲｸｿﾞｰ/ \ﾃﾞｯﾃﾞｯﾃﾞﾃﾞﾃﾞﾃﾞ/ \ｶｰﾝ/ 14 14
15. Cognito 認証してみる $ amplify add auth $ amplify push 質問出てくるので答えると Cognito のセットアップが完了す る push すると AWS に反映され Cognito が出来上がる ⼀部項⽬以外は amplify update auth で後から更新可能 15 15
16. 動かしてみる サンプルコード $ yarn start 16 16
17. 認証画⾯が出たら成功 17 17
18. ⼀瞬でできた！ サインアップ・サインイン・サインアウト パスワードリセット MFA 他にもカスタム認証だったり、 認証ログ取ったりといろいろできるゾ 18 18
19. 実は... 発表資料作成 約 2h サンプル作成 約 10min 19 19
20. 20 20
21. 卍 Amplify is 爆速. 卍 21 21