Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法

Amplifyで Webアプリケーションの  堅固な土台をサクッと構築する方法  2022/07/29  アノテーション株式会社  AWSオペレーションゾーン  川崎照夫 

2  自己紹介  川崎照夫  アノテーション株式会社  AWSオペレーションゾーン  テクニカルサポート Miscチーム所属  サポートエンジニア  AWSテクニカルサポート対応 
社内育成施策を担当     

3  アジェンダ  • Amplify 概要  • Amplify の魅力  • 本セッションの位置付け 
• 堅固な土台の作り方 (3点セット)  • React の OSS をホスティングしてみた 

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/  

5  ※弊社社内向けハンズオンリスト  ※番号はスプレッドシード上の番号です

6  Amplify 概要 

7  Amplify 概要  「拡張可能なフルスタックウェブおよびモバイルアプリケーションをより高速に構築します。開始も簡単、スケールも簡単。」  • フルスタック Webアプリ  • フルスタック
モバイルアプリ  • 拡張可能  • 高速構築  • 簡単に開始  • 簡単にスケール 

8  Amplify の魅力 

9  • Amplify の魅力  • Amplify が提供する価値  って何でしょう？    Amplify学習リソース集
のリンクをひたすらたどり  筆者なりに出した結論： 

10  Amplify学習リソース集  Amplify Meetup #01 わたしが AWS Amplify を使い続ける理由。 

11  Amplify Meetup #01 わたしが AWS Amplify を使い続ける理由。 

12  Amplify の魅力  Amplify が提供する価値    • どのアプリでも疎かにできない機能がサクッと追加できる    このセッションでは「サクッと追加する方法」をまとめてみます 

13  • amplify add auth  → ログイン  • amplify add
hosting  → ホスティング  • amplify env add  → マルチ環境 

14  本セッションの位置付け 

15  本セッションの位置付け  ステップ1 初心者向けハンズオン  ステップ2 ←イマココ  ステップ3 AMPLIFY SNS WORKSHOP 

16  堅固な土台の作り方 

17  初心者向けハンズオンの構成  • 環境構築 Cloud9編  • 環境構築 CLI編  • FE/API/DB編 
• Auth編  • Hosting編 

18  初心者向けハンズオンの構成  環境構築 Cloud9編  • Cloud9 インスタンスの作成  • Cloud9 の環境設定 
◦ クレデンシャルの設定  ◦ EBS ボリュームの容量を拡張   

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 

20  初心者向けハンズオンの構成  FE/API/DB編手順  • Amplify CLI で API の追加 
◦ $ amplify add api  • AWS への反映  ◦ $ amplify status  ◦ $ amplify push  • Amplify Docs 内にあるサンプルコードを追加  ◦ リンク  • 動作確認  ◦ $ npm start 

21  初心者向けハンズオンの構成  Auth編手順  • Amplify CLI で Auth の追加 
◦ $ amplify add auth  • AWS へ反映  ◦ $ amplify status  ◦ $ amplify push  • Amplify Docs 内の記載内容の通りにコードを修正  ◦ リンク  • 動作確認  ◦ $ npm start 

22  初心者向けハンズオンの構成  Hosting編手順  • アプリケーションのホスティング  ◦ $ amplify add
hosting  • クラウドリソースの変更とホスティングするアプリのビルド、デプロイ  ◦ $ amplify publish  • 動作確認 

23  本セッションの手順 

24  「堅固な土台の作り方」の手順  • 環境構築 Cloud9編  • 環境構築 CLI編  • FE/API/DB編 
• Hosting編  ◦ Auth編と順序を入れ替え  ◦ 手動デプロイ → 継続的デプロイ  • Auth編  ◦ デフォルト設定 → デフォルト設定＋ソーシャルサインイン  • Env編（追加）  概要欄からブログをご確認ください 

25  Cloud9 のセットアップ 

26  • Cloud9 インスタンスの作成  ◦ t3.small を選択  ◦ 他はデフォルトのまま 

27  Cloud9 のセットアップ  • Cloud9 インスタンスの作成  • Cloud9 の環境設定  ◦
クレデンシャルの設定  • 「AWS Managed temporary credentials」をオフに  ◦ EBS ボリュームの容量を拡張  • ボリュームのサイズ 10GB → 32GB  • Cloud9 のプレビューURL確認  Amplify ハンズオンを実行するための Cloud9 の設定変更について 

28  Amplify CLI 環境構築 

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  概要欄からブログをご確認ください 

30  ホスティング  amplify add hosting 

31  「堅固な土台の作り方」の手順  ホスティング  • GitHub新規リポジトリ作成  ◦ $ git init  ◦
$ git push -u origin main  • amplify add hosting コマンド実行  ◦ 継続的デプロイ設定開始  • Amplify コンソールからデプロイ設定  ◦ GitHubリポジトリを指定  ◦ ビルド設定  • 動作確認  概要欄からブログをご確認ください 

32  ホスティング  GitHub新規リポジトリ作成 

33  ホスティング  git init を行い GitHub に push 

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  ホスティング 

35  ホスティング  Gitリポジトリの種類を選択  今回は GitHub を選択 

36  ホスティング  リポジトリとブランチを選択 

37  ホスティング  ブランチとバックエンド環境をひも付け 

38  ホスティング  ビルド設定 

39  ホスティング  設定内容を確認 

40  ホスティング  デプロイ開始 

41  ホスティング  デプロイ完了 

42  ホスティング  動作確認 

43  「堅固な土台の作り方」の手順  ホスティング  • GitHub新規リポジトリ作成  ◦ $ git init  ◦
$ git push -u origin main  • amplify add hosting コマンド実行  ◦ 継続的デプロイ設定開始  • Amplify コンソールからデプロイ設定  ◦ GitHubリポジトリを指定  ◦ ビルド設定  • 動作確認 

44  ログイン  amplify add auth 

45  「堅固な土台の作り方」の手順  ログイン  • ソーシャルサインイン設定確認  ◦ Google Oauth の「クライアント
ID」「クライアントシークレット」を確認  • ログイン設定追加  ◦ $ amplify add auth  ◦ Google Oauth 側にも反映  • フロントエンドにログインを確認できるコード追加  ◦ src/App.js を修正  ◦ $ git push  • 動作確認  ◦ $ npm start  概要欄からブログをご確認ください 

46  ログイン  • ソーシャルサインイン設定確認  ◦ 事前に GCP のサイトで Google Oauth
を登録  ◦ クライアント ID ／クライアントシークレットをメモ  • リダイレクトURLをメモ  ◦ Cloud9 環境のプレビュー URL  ◦ デプロイ先のホスティング URL 

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) デフォルト値を利用次のスライドに続きます 

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 を選択次のスライドに続きます  

amplify add auth を実行（3/3）  49  ログイン  • デプロイ先へ反映  ◦ $
amplify push -y  • Google Oauth 側にも設定内容を反映します  Select the social providers you want to configure for your user pool: (Press <space> to select, <a> to toggle all, <i> 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: クライアントシークレットを入力

50  ログイン  src/App.js を編集 

51  ログイン  動作確認 

52  「堅固な土台の作り方」の手順  ログイン  • ソーシャルサインイン設定確認  ◦ Google Oauth の「クライアント
ID」「クライアントシークレット」を確認  • ログイン設定追加  ◦ $ amplify add auth  ◦ Google Oauth 側にも反映  • フロントエンドにログインを確認できるコード追加  ◦ src/App.js を修正  ◦ $ git push  • 動作確認  ◦ $ npm start  概要欄からブログをご確認ください 

53  マルチ環境  amplify env add 

54  「堅固な土台の作り方」の手順  マルチ環境  • 新規環境として production を追加   ◦ $
amplify env add  • develop ブランチ追加  ◦ $ git checkout -b develop  • ブランチと環境の紐付けを修正  ◦ main ブランチ → production 環境  ◦ develop ブランチ → dev 環境  • dev環境のログイン設定変更  ◦ $ amplify update auth    概要欄からブログをご確認ください 

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 

56  マルチ環境  • develop ブランチ追加  ◦ $ git checkout -b
develop  ◦ $ git push -u origin develop 

57  マルチ環境  ブランチと環境の紐付けを修正 

58  マルチ環境 

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 を選択次のスライドに続きます  

dev環境のログイン設定変更  $ amplify update auth（2/3）  60  マルチ環境  Which redirect signin
URIs do you want to edit? (Press <space> to select, <a> to toggle all, <i> 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 を入力次のスライドに続きます  

dev環境のログイン設定変更  $ amplify update auth（3/3）  61  マルチ環境  • デプロイ先へ反映  ◦
$ amplify push -y  Which redirect signout URIs do you want to edit? (Press <space> to select, <a> to toggle all, <i> 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 を入力

62  「堅固な土台の作り方」の手順  マルチ環境  • 新規環境として production を追加   ◦ $
amplify env add  • develop ブランチ追加  ◦ $ git checkout -b develop  • ブランチと環境の紐付けを修正  ◦ main ブランチ → production 環境  ◦ develop ブランチ → dev 環境  • dev環境のログイン設定変更  ◦ $ amplify update auth    概要欄からブログをご確認ください 

63  突然ですが、 

64  突然ですが、  Clone-Wars ってご存知ですか？ 

65  突然ですが、  Clone-Wars ってご存知ですか？  https://github.com/GorvGoyl/clone-wars  

66  Clone-Wars  https://github.com/GorvGoyl/clone-wars  

Clone-Wars  67  https://github.com/GorvGoyl/clone-wars  

68  フロントエンド界隈は、アプリについてのアイデアの宝庫だなー    2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita    トップデベロッパーになるために作成したいアプリ8選 - Qiita 
  今日からコーディング開始できるアプリのアイディア7選 - Qiita     

69  フロントエンド業界の動向を把握しておいた方が良さそう  • モダンなJavaScript  • Node.js  • React 

70  React の OSS は Amplify でホスティング可能のはず 

71  ReactのOSSをホスティングしてみた 

72  ReactのOSSを Amplify でホスティングしてみる    対象とするOSS  • Calculator  • React
Todo App  • BMI Calculator 

73  参考にしたのは  こんなブログ記事  https://dev.to/syakirurahman/21-react-example-projects-to-learn-from-open-source-beginner-intermediate-level-2e6o 

74  Amplify OSS ホスティングチャレンジ 

75  Calculator 

76  Calculator  https://reactjs.org/community/examples.html  

77  Calculator  https://github.com/ahfarmer/calculator

78  Calculator 

79  Calculator 

80  React Todo App 

81  React Todo App  https://github.com/kabirbaidhya/react-todo-app

84  BMI Calculator 

85  BMI Calculator  https://github.com/GermaVinsmoke/bmi-calculator

86  BMI Calculator 

87  BMI Calculator  概要欄からブログをご確認ください 

88  ReactのOSSを Amplify でホスティングしてみる    対象とするOSS  • Calculator  • React
Todo App  • BMI Calculator 

89  まとめ 

90  アジェンダ（再掲）  • Amplify 概要  • Amplify の魅力  • 本セッションの位置付け 
• 堅固な土台の作り方 (3点セット)  • React の OSS をホスティングしてみた 

91  まとめ  • Amplify はどのアプリでも疎かにできない機能  （＝堅固な土台）がサクッと追加できる  • 堅固な土台の作り方の手順をまとめた 
• 初心者向けハンズオンからの NextStep  • Amplify OSS ホスティングチャレンジ  • Amplify コミュニティで情報共有していきましょう 

Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法

Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法

More Decks by kawasaki-teruo

Other Decks in Technology

Featured

Transcript

Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法

Amplifyで Webアプリケーションの堅固な土台をサクッと構築する方法