Slide 1
Slide 1 text
Amplifyで Webアプリケーションの
堅固な土台をサクッと構築する方法
2022/07/29
アノテーション株式会社
AWSオペレーションゾーン
川崎照夫
Slide 2
Slide 2 text
2
自己紹介
川崎 照夫
アノテーション株式会社
AWSオペレーションゾーン
テクニカルサポート Miscチーム所属
サポートエンジニア
AWSテクニカルサポート対応
社内育成施策を担当
Slide 3
Slide 3 text
3
アジェンダ
● Amplify 概要
● Amplify の魅力
● 本セッションの位置付け
● 堅固な土台の作り方 (3点セット)
● React の OSS をホスティングしてみた
Slide 4
Slide 4 text
4
AWS Hands-on for Beginners（初心者向けハンズオン）
AWS Amplify を用いた Web サイトの構築方法を学ぼう
https://pages.awscloud.com/JAPAN-event-OE-Hands-on-for-Beginners-amplify-2022-reg-event.html
https://aws.amazon.com/jp/blogs/news/aws-hands-on-for-beginners-19/
Slide 5
Slide 5 text
5
※弊社 社内向け ハンズオンリスト
※番号はスプレッドシード上の番号です
Slide 6
Slide 6 text
6
Amplify 概要
Slide 7
Slide 7 text
7
Amplify 概要
「拡張可能なフルスタックウェブおよびモバイルアプリケーションをより高速に
構築します。開始も簡単、スケールも簡単。」
● フルスタック Webアプリ
● フルスタック モバイルアプリ
● 拡張可能
● 高速構築
● 簡単に開始
● 簡単にスケール
Slide 8
Slide 8 text
8
Amplify の魅力
Slide 9
Slide 9 text
9
● Amplify の魅力
● Amplify が提供する価値
って何でしょう？
Amplify学習リソース集 のリンクをひたすらたどり
筆者なりに出した結論：
Slide 10
Slide 10 text
10
Amplify学習リソース集
Amplify Meetup #01 わたしが AWS Amplify を使い続ける理由。
Slide 11
Slide 11 text
11
Amplify Meetup #01 わたしが AWS Amplify を使い続ける理由。
Slide 12
Slide 12 text
12
Amplify の魅力
Amplify が提供する価値
● どのアプリでも疎かにできない機能がサクッと追加できる
このセッションでは「サクッと追加する方法」をまとめてみます
Slide 13
Slide 13 text
13
● amplify add auth
→ ログイン
● amplify add hosting
→ ホスティング
● amplify env add
→ マルチ環境
Slide 14
Slide 14 text
14
本セッションの位置付け
Slide 15
Slide 15 text
15
本セッションの位置付け
ステップ1 初心者向けハンズオン
ステップ2 ←イマココ
ステップ3 AMPLIFY SNS WORKSHOP
Slide 16
Slide 16 text
16
堅固な土台の作り方
Slide 17
Slide 17 text
17
初心者向けハンズオンの構成
● 環境構築 Cloud9編
● 環境構築 CLI編
● FE/API/DB編
● Auth編
● Hosting編
Slide 18
Slide 18 text
18
初心者向けハンズオンの構成
環境構築 Cloud9編
● Cloud9 インスタンスの作成
● Cloud9 の環境設定
○ クレデンシャルの設定
○ EBS ボリュームの容量を拡張
Slide 19
Slide 19 text
19
初心者向けハンズオンの構成
環境構築 CLI編 手順
● Node.js 環境のセットアップ（Cloud9 ではインストール済み）
○ $ node –v
● Amplify CLI のインストールとセットアップ
○ $ npm install -g @aws-amplify/cli
○ $ amplify configure
● Reactアプリの作成
○ $ npx create-react-app hands-on-todo
● Amplify Project の初期化コマンド
○ $ amplify init
● Amplify Framework のインストール
○ $ npm install aws-amplify @aws-amplify/ui-react
Slide 20
Slide 20 text
20
初心者向けハンズオンの構成
FE/API/DB編 手順
● Amplify CLI で API の追加
○ $ amplify add api
● AWS への反映
○ $ amplify status
○ $ amplify push
● Amplify Docs 内にあるサンプルコードを追加
○ リンク
● 動作確認
○ $ npm start
Slide 21
Slide 21 text
21
初心者向けハンズオンの構成
Auth編 手順
● Amplify CLI で Auth の追加
○ $ amplify add auth
● AWS へ反映
○ $ amplify status
○ $ amplify push
● Amplify Docs 内の記載内容の通りにコードを修正
○ リンク
● 動作確認
○ $ npm start
Slide 22
Slide 22 text
22
初心者向けハンズオンの構成
Hosting編 手順
● アプリケーションのホスティング
○ $ amplify add hosting
● クラウドリソースの変更とホスティングするアプリのビルド、デプロイ
○ $ amplify publish
● 動作確認
Slide 23
Slide 23 text
23
本セッションの手順
Slide 24
Slide 24 text
24
「堅固な土台の作り方」の手順
● 環境構築 Cloud9編
● 環境構築 CLI編
● FE/API/DB編
● Hosting編
○ Auth編と順序を入れ替え
○ 手動デプロイ → 継続的デプロイ
● Auth編
○ デフォルト設定 → デフォルト設定＋ソーシャルサインイン
● Env編（追加）
概要欄からブログをご確認ください
Slide 25
Slide 25 text
25
Cloud9 のセットアップ
Slide 26
Slide 26 text
26
● Cloud9 インスタンスの作成
○ t3.small を選択
○ 他は デフォルトのまま
Slide 27
Slide 27 text
27
Cloud9 のセットアップ
● Cloud9 インスタンスの作成
● Cloud9 の環境設定
○ クレデンシャルの設定
● 「AWS Managed temporary credentials」をオフに
○ EBS ボリュームの容量を拡張
● ボリュームのサイズ 10GB → 32GB
● Cloud9 のプレビューURL確認
Amplify ハンズオンを実行するための Cloud9 の設定変更について
Slide 28
Slide 28 text
28
Amplify CLI 環境構築
Slide 29
Slide 29 text
29
「堅固な土台の作り方」の手順
Amplify CLI 環境構築
● 作成済みの IAM ユーザの認証情報を設定
○ $ aws configure
● Amplify CLI のインストール
○ $ npm install -g @aws-amplify/cli
● Reactアプリの作成
○ $ npx -y create-react-app app-base
● Amplify Project の初期化コマンド
○ $ amplify init -y
● Amplify Framework のインストール
○ $ npm install aws-amplify @aws-amplify/ui-react
概要欄からブログをご確認ください
Slide 30
Slide 30 text
30
ホスティング
amplify add hosting
Slide 31
Slide 31 text
31
「堅固な土台の作り方」の手順
ホスティング
● GitHub新規リポジトリ作成
○ $ git init
○ $ git push -u origin main
● amplify add hosting コマンド実行
○ 継続的デプロイ設定開始
● Amplify コンソール からデプロイ設定
○ GitHubリポジトリを指定
○ ビルド設定
● 動作確認
概要欄からブログをご確認ください
Slide 32
Slide 32 text
32
ホスティング
GitHub新規リポジトリ作成
Slide 33
Slide 33 text
33
ホスティング
git init を行い GitHub に push
Slide 34
Slide 34 text
amplify add hosting 実行
? Select the plugin module to execute … (Use arrow keys or type to filter)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous
deployment)
Amazon CloudFront and S3
Hosting with Amplify Console
を選択
? Choose a type (Use arrow keys)
Continuous deployment (Git-based deployments)
❯ Manual deployment
Learn more
Continuous deployment
を選択
? Continuous deployment is configured in the Amplify Console. Please hit enter once you
connect your repository
左記のメッセージが表示されたら
ブラウザでAWSマネジメントコンソールを表示
し、Amplify の画面を開きます
34
ホスティング
Slide 35
Slide 35 text
35
ホスティング
Gitリポジトリの種類を選択
今回は GitHub を選択
Slide 36
Slide 36 text
36
ホスティング
リポジトリ と ブランチ を選択
Slide 37
Slide 37 text
37
ホスティング
ブランチ と バックエンド環境をひも付け
Slide 38
Slide 38 text
38
ホスティング
ビルド設定
Slide 39
Slide 39 text
39
ホスティング
設定内容を確認
Slide 40
Slide 40 text
40
ホスティング
デプロイ開始
Slide 41
Slide 41 text
41
ホスティング
デプロイ完了
Slide 42
Slide 42 text
42
ホスティング
動作確認
Slide 43
Slide 43 text
43
「堅固な土台の作り方」の手順
ホスティング
● GitHub新規リポジトリ作成
○ $ git init
○ $ git push -u origin main
● amplify add hosting コマンド実行
○ 継続的デプロイ設定開始
● Amplify コンソール からデプロイ設定
○ GitHubリポジトリを指定
○ ビルド設定
● 動作確認
Slide 44
Slide 44 text
44
ログイン
amplify add auth
Slide 45
Slide 45 text
45
「堅固な土台の作り方」の手順
ログイン
● ソーシャルサインイン設定確認
○ Google Oauth の 「クライアント ID」「クライアント シークレット」を確認
● ログイン設定追加
○ $ amplify add auth
○ Google Oauth 側にも反映
● フロントエンドにログインを確認できるコード追加
○ src/App.js を修正
○ $ git push
● 動作確認
○ $ npm start
概要欄からブログをご確認ください
Slide 46
Slide 46 text
46
ログイン
● ソーシャルサインイン設定確認
○ 事前に GCP のサイトで Google Oauth を登録
○ クライアント ID ／ クライアント シークレット をメモ
● リダイレクトURLをメモ
○ Cloud9 環境のプレビュー URL
○ デプロイ先のホスティング URL
Slide 47
Slide 47 text
47
ログイン
amplify add auth を実行（1/3）
Do you want to use the default authentication and security configuration? (Use arrow keys)
❯ Default configuration
Default configuration with Social Provider (Federation)
Manual configuration
I want to learn more.
Default configuration with
Social Provider
を選択
How do you want users to be able to sign in?
❯ Username
Email
Phone Number
Email or Phone Number
I want to learn more.
Username を選択
Do you want to configure advanced settings?
No, I am done.
Yes, I want to make some additional changes.
No を選択
What domain name prefix do you want to use? (appnamexxxxxxxx-xxxxxxxx) デフォルト値を利用
次のスライドに続きます
Slide 48
Slide 48 text
48
ログイン
amplify add auth を実行（2/3）
Enter your redirect signin URI: プレビューURL を入力
Do you want to add another redirect signin URI (y/N) → Yes Y を選択
Enter your redirect signin URI: ホスティングURL を入力
Do you want to add another redirect signin URI (y/N) → No N を選択
Enter your redirect signout URI: プレビューURL を入力
Do you want to add another redirect signout URI (y/N)→ Yes Y を選択
Enter your redirect signout URI: ホスティングURL を入力
Do you want to add another redirect signout URI (y/N)→ No N を選択
次のスライドに続きます
Slide 49
Slide 49 text
amplify add auth を実行（3/3）
49
ログイン
● デプロイ先へ反映
○ $ amplify push -y
● Google Oauth 側にも設定内容を反映します
Select the social providers you want to configure for your user pool: (Press
to select, to toggle all, to invert selection)
◯ Facebook
◉ Google
◯ Login With Amazon
◯ Sign in with Apple
カーソルキーで上下に移動
スペースキーを押して選択
enterキーを押して次へ
You've opted to allow users to authenticate via Google. If you haven't already,
you'll need to go to https://developers.google.com/identity and create an App ID.
Enter your Google Web Client ID for your OAuth flow: クライアント ID を入力
Enter your Google Web Client Secret for your OAuth flow: クライアント シークレット を入力
Slide 50
Slide 50 text
50
ログイン
src/App.js を編集
Slide 51
Slide 51 text
51
ログイン
動作確認
Slide 52
Slide 52 text
52
「堅固な土台の作り方」の手順
ログイン
● ソーシャルサインイン設定確認
○ Google Oauth の 「クライアント ID」「クライアント シークレット」を確認
● ログイン設定追加
○ $ amplify add auth
○ Google Oauth 側にも反映
● フロントエンドにログインを確認できるコード追加
○ src/App.js を修正
○ $ git push
● 動作確認
○ $ npm start
概要欄からブログをご確認ください
Slide 53
Slide 53 text
53
マルチ環境
amplify env add
Slide 54
Slide 54 text
54
「堅固な土台の作り方」の手順
マルチ環境
● 新規環境として production を追加
○ $ amplify env add
● develop ブランチ追加
○ $ git checkout -b develop
● ブランチと環境の紐付けを修正
○ main ブランチ → production 環境
○ develop ブランチ → dev 環境
● dev環境のログイン設定変更
○ $ amplify update auth
概要欄からブログをご確認ください
Slide 55
Slide 55 text
55
マルチ環境
amplify env add を実行
? Enter a name for the environment 「production」と入力
Using default provider awscloudformation
? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
AWS access keys
? Please choose the profile you want to use (Use arrow keys)
❯ default
Enter your Google Web Client ID for your OAuth flow: クライアント ID を入力
Enter your Google Web Client Secret for your OAuth flow: クライアント シークレット を入力
● デプロイ先へ反映
○ $ amplify push -y
Slide 56
Slide 56 text
56
マルチ環境
● develop ブランチ追加
○ $ git checkout -b develop
○ $ git push -u origin develop
Slide 57
Slide 57 text
57
マルチ環境
ブランチと環境の紐付けを修正
Slide 58
Slide 58 text
58
マルチ環境
Slide 59
Slide 59 text
59
マルチ環境
dev環境のログイン設定変更
$ amplify update auth（1/3）
Please note that certain attributes may not be overwritten if you choose to use defaults
settings.
Using service: Cognito, provided by: awscloudformation
What do you want to do? (Use arrow keys)
❯ Apply default configuration without Social Provider (Federation)
Walkthrough all the auth configurations
Add/Edit signin and signout redirect URIs
Update OAuth social providers
Create or update Cognito user pool groups
Create or update Admin queries API
Add/Edit signin and signout
redirect URIs
を選択
次のスライドに続きます
Slide 60
Slide 60 text
dev環境のログイン設定変更
$ amplify update auth（2/3）
60
マルチ環境
Which redirect signin URIs do you want to edit? (Press to select, to toggle
all, to invert selection)
❯◯ https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.ap-northeast-1.amazonaws.com/
◯ https://main.xxxxxxxxxxxxxx.amplifyapp.com/
enterキーを押して次へ
Do you want to add redirect signin URIs? (Y/n) Y を入力
Enter your new redirect signin URI: dev環境のホスティングURL を入力
? Do you want to add another redirect signin URI (y/N) N を入力
次のスライドに続きます
Slide 61
Slide 61 text
dev環境のログイン設定変更
$ amplify update auth（3/3）
61
マルチ環境
● デプロイ先へ反映
○ $ amplify push -y
Which redirect signout URIs do you want to edit? (Press to select, to toggle
all, to invert selection)
❯◯ https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.vfs.cloud9.ap-northeast-1.amazonaws.com/
◯ https://main.xxxxxxxxxxxxxx.amplifyapp.com/
enterキーを押して次へ
Do you want to add redirect signout URIs? (Y/n) Y を入力
Enter your new redirect signout URI: dev環境のホスティングURL を入力
? Do you want to add another redirect signout URI (y/N) N を入力
Slide 62
Slide 62 text
62
「堅固な土台の作り方」の手順
マルチ環境
● 新規環境として production を追加
○ $ amplify env add
● develop ブランチ追加
○ $ git checkout -b develop
● ブランチと環境の紐付けを修正
○ main ブランチ → production 環境
○ develop ブランチ → dev 環境
● dev環境のログイン設定変更
○ $ amplify update auth
概要欄からブログをご確認ください
Slide 63
Slide 63 text
63
突然ですが、
Slide 64
Slide 64 text
64
突然ですが、
Clone-Wars ってご存知ですか？
Slide 65
Slide 65 text
65
突然ですが、
Clone-Wars ってご存知ですか？
https://github.com/GorvGoyl/clone-wars
Slide 66
Slide 66 text
66
Clone-Wars
https://github.com/GorvGoyl/clone-wars
Slide 67
Slide 67 text
Clone-Wars
67
https://github.com/GorvGoyl/clone-wars
Slide 68
Slide 68 text
68
フロントエンド界隈は、アプリについてのアイデアの宝庫だなー
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
トップデベロッパーになるために作成したいアプリ8選 - Qiita
今日からコーディング開始できるアプリのアイディア7選 - Qiita
Slide 69
Slide 69 text
69
フロントエンド業界の動向を把握しておいた方が良さそう
● モダンなJavaScript
● Node.js
● React
Slide 70
Slide 70 text
70
React の OSS は Amplify でホスティング可能のはず
Slide 71
Slide 71 text
71
ReactのOSSをホスティングしてみた
Slide 72
Slide 72 text
72
ReactのOSSを Amplify でホスティングしてみる
対象とするOSS
● Calculator
● React Todo App
● BMI Calculator
Slide 73
Slide 73 text
73
参考にしたのは
こんなブログ記事
https://dev.to/syakirurahman/21-react-example-projects-to-learn-from-open-source-beginner-intermediate-level-2e6o
Slide 74
Slide 74 text
74
Amplify OSS ホスティング チャレンジ
Slide 75
Slide 75 text
75
Calculator
Slide 76
Slide 76 text
76
Calculator
https://reactjs.org/community/examples.html
Slide 77
Slide 77 text
77
Calculator
https://github.com/ahfarmer/calculator
Slide 78
Slide 78 text
78
Calculator
Slide 79
Slide 79 text
79
Calculator
Slide 80
Slide 80 text
80
React Todo App
Slide 81
Slide 81 text
81
React Todo App
https://github.com/kabirbaidhya/react-todo-app
Slide 82
Slide 82 text
82
React Todo App
Slide 83
Slide 83 text
83
React Todo App
Slide 84
Slide 84 text
84
BMI Calculator
Slide 85
Slide 85 text
85
BMI Calculator
https://github.com/GermaVinsmoke/bmi-calculator
Slide 86
Slide 86 text
86
BMI Calculator
Slide 87
Slide 87 text
87
BMI Calculator
概要欄からブログをご確認ください
Slide 88
Slide 88 text
88
ReactのOSSを Amplify でホスティングしてみる
対象とするOSS
● Calculator
● React Todo App
● BMI Calculator
Slide 89
Slide 89 text
89
まとめ
Slide 90
Slide 90 text
90
アジェンダ（再掲）
● Amplify 概要
● Amplify の魅力
● 本セッションの位置付け
● 堅固な土台の作り方 (3点セット)
● React の OSS をホスティングしてみた
Slide 91
Slide 91 text
91
まとめ
● Amplify は どのアプリでも疎かにできない機能
（＝堅固な土台）がサクッと追加できる
● 堅固な土台の作り方 の手順をまとめた
● 初心者向けハンズオンからの NextStep
● Amplify OSS ホスティング チャレンジ
● Amplify コミュニティで情報共有していきましょう
Slide 92
Slide 92 text
No content