React + Amplifyでアプリ開発

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
React + AWS Amplifyで
アプリ開発
虎の穴ラボ株式会社　西志村友基
1

自己紹介
西志村　友基
● 所属：虎の穴ラボ株式会社
● 担当：Fantiaなど
● 入社理由：
○ BtoCサービスに関わりたい
○ 一生に一度はオタク業界に関わりたい
● 趣味：アニメ鑑賞、ゲーム
　　　　　競馬 ← New
2

話すこと
1. 開発の課題とAWS Amplifyの魅力
2. React + Amplifyでアプリ開発の流れ
3. Amplify Admin UI によるアプリケーションの管理
4. まとめ
3

話すこと
4. まとめ
4

開発の課題
● 本当はアプリケーションの本質的な開発だけに集中したいけど...
○ ユーザー認証
○ データ登録
○ セキュリティ
→ 結局バックエンドも書かないといけない
→ 覚えることいっぱいで辛い
5
誰かに丸投げしたい

それ、AWS Amplifyならできます
6

AWS Amplifyの魅力
1. 数分でバックエンドを構成
2. AWSのベストプラクティスに沿ったサーバーレスアプリケーションが構築可
能
3. 対話形式で各種設定を行うことができる
4. 数クリックでアプリを公開できる
5. Amplify Admin UIによる容易なコンテンツ管理
7

話すこと
4. まとめ
8

今回開発したアプリ
9
【仕様】
● 画面から
○ 名前
○ スキル
○ 説明
という値を受け取る
● DBに保存して表示
● 管理画面も作る

Node.jsのインストール
Amplifyのインストール
Reactアプリの作成
Amplifyの初期設定を実施
フロー
10
React用のライブラリをインストール
APIの作成
Amplifyでデプロイ
ホスティング設定
アプリ公開！！！

Node.jsのインストール・・・コマンド打つだけ
Amplifyのインストール・・・コマンド打つだけ
Reactアプリの作成・・・コマンド打つだけ
Amplifyの初期設定を実施・・・コマンド＋対話形式
フロー
11

React用のライブラリをインストール・・・コマンド＋tsxの修正
APIの作成・・・コマンド＋対話形式
Amplifyでデプロイ・・・コマンド＋対話形式
ホスティング設定・・・コマンド＋対話形式
アプリ公開・・・コマンド打つだけ
フロー
12

【APIの設定】
● GraphQLを使用
● スキーマテンプレートとしてToDoを使用
【デプロイの設定】
● TypeScript使用
● GraphQLのコード自動生成ON
今回作成したAPI、デプロイの設定
13

Amplifyのインストール
（Node.jsがインストールされている前提です）
amplifyの設定（以下のコマンドを実行）
# リージョンの選択、IAMの作成（アクセスキー、シークレットキーの入力）などが求められ
ます
$ npm install -g @aws-amplify/cli
$ amplify configure
14

React アプリにAmplifyを設定①
$ cd uma_note
$ amplify init
$ npx create-react-app --template typescript uma_note
15
Reactアプリケーションを新規作成
Amplifyの初期設定を実施

16

React アプリにAmplifyを設定②
17
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);
$ npm install aws-amplify @aws-amplify/ui-react
React用のライブラリをインストール
生成されたindex.tsxに以下を追記

APIの作成
$ amplify add api
18
対話形式で設定

Amplifyでデプロイ
$ amplify push
19
Graphqlのソースを自動生成してくれます

Amplify でアプリを公開
ホスティング設定
以下のコマンドでアプリが公開されます
$ amplify add hosting
$ amplify publish
20
たったこれだけ！！

スキーマを変更したい場合
type Todo @model @auth(rules: [{allow: public}]) {
id: ID!
name: String!
description: String
}
type Uma @model @auth(rules: [{allow: public}]) {
id: ID!
name: String!
skill: String
description: String
}
amplify/backend/api/umanote/
schema.graphql
を書き換える
$ amplify push
21

あとはアプリ開発に集中（TypeScript）
22
const umaData = await
API.graphql(graphqlOperation(listUmas))
await API.graphql(graphqlOperation(createUma,
{input: uma}))
リストの取得データ登録
自動生成されたものを呼
び出すだけ

話すこと
2. React + Amplifyでアプリ開発の流れ(Vueじゃないのかよ)
4. まとめ
23

Admin UIを有効にする
24

管理画面からデータ登録
25

画面に表示されています
26

ユーザー画面から入力
27

管理画面で確認します
すこしタイムラグあります
28

話すこと
4. まとめ
29

まとめ
● APIが自動生成できたり管理画面の実装の手間を省ける
→フロントのロジックの開発に集中できる！
● AWSのサービスに馴染みがある人は特におすすめ
● GraphQLを使った気になれた
● 自分のトレーニングを記録して振り返れるアプリにしたい
30

React + Amplifyでアプリ開発

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à React + Amplifyでアプリ開発

Similaire à React + Amplifyでアプリ開発 (20)

Plus de 虎の穴開発室

Plus de 虎の穴開発室 (20)