Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

プロダクション利用可能な Web アプリのホスティング環境として
Amplifyで 堅固な土台をサクッと構築する方法についてお伝えします。

5026ef3e6d525fb9164f627099d43c58?s=128

kawasaki-teruo

July 29, 2022
Tweet

More Decks by kawasaki-teruo

Other Decks in Technology

Transcript

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


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


    社内育成施策を担当
 
 

  3. 3
 アジェンダ
 • Amplify 概要
 • Amplify の魅力
 • 本セッションの位置付け


    • 堅固な土台の作り方 (3点セット)
 • React の OSS をホスティングしてみた

  4. 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. 5
 ※弊社 社内向け ハンズオンリスト
 ※番号はスプレッドシード上の番号です

  6. 6
 Amplify 概要


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

    モバイルアプリ
 • 拡張可能
 • 高速構築
 • 簡単に開始
 • 簡単にスケール

  8. 8
 Amplify の魅力


  9. 9
 • Amplify の魅力
 • Amplify が提供する価値
 って何でしょう?
 
 Amplify学習リソース集

    のリンクをひたすらたどり
 筆者なりに出した結論:

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


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


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


  13. 13
 • amplify add auth
 → ログイン
 • amplify add

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

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


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


  16. 16
 堅固な土台の作り方


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


    • Auth編
 • Hosting編

  18. 18
 初心者向けハンズオンの構成
 環境構築 Cloud9編
 • Cloud9 インスタンスの作成
 • Cloud9 の環境設定


    ◦ クレデンシャルの設定
 ◦ EBS ボリュームの容量を拡張
 

  19. 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. 20
 初心者向けハンズオンの構成
 FE/API/DB編 手順
 • Amplify CLI で API の追加


    ◦ $ amplify add api
 • AWS への反映
 ◦ $ amplify status
 ◦ $ amplify push
 • Amplify Docs 内にあるサンプルコードを追加
 ◦ リンク
 • 動作確認
 ◦ $ npm start

  21. 21
 初心者向けハンズオンの構成
 Auth編 手順
 • Amplify CLI で Auth の追加


    ◦ $ amplify add auth
 • AWS へ反映
 ◦ $ amplify status
 ◦ $ amplify push
 • Amplify Docs 内の記載内容の通りにコードを修正
 ◦ リンク
 • 動作確認
 ◦ $ npm start

  22. 22
 初心者向けハンズオンの構成
 Hosting編 手順
 • アプリケーションのホスティング
 ◦ $ amplify add

    hosting
 • クラウドリソースの変更とホスティングするアプリのビルド、デプロイ
 ◦ $ amplify publish
 • 動作確認

  23. 23
 本セッションの手順


  24. 24
 「堅固な土台の作り方」の手順
 • 環境構築 Cloud9編
 • 環境構築 CLI編
 • FE/API/DB編


    • Hosting編
 ◦ Auth編と順序を入れ替え
 ◦ 手動デプロイ → 継続的デプロイ
 • Auth編
 ◦ デフォルト設定 → デフォルト設定+ソーシャルサインイン
 • Env編(追加)
 概要欄からブログをご確認ください

  25. 25
 Cloud9 のセットアップ


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


  27. 27
 Cloud9 のセットアップ
 • Cloud9 インスタンスの作成
 • Cloud9 の環境設定
 ◦

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

  28. 28
 Amplify CLI 環境構築


  29. 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. 30
 ホスティング
 amplify add hosting


  31. 31
 「堅固な土台の作り方」の手順
 ホスティング
 • GitHub新規リポジトリ作成
 ◦ $ git init
 ◦

    $ git push -u origin main
 • amplify add hosting コマンド実行
 ◦ 継続的デプロイ設定開始
 • Amplify コンソール からデプロイ設定
 ◦ GitHubリポジトリを指定
 ◦ ビルド設定
 • 動作確認
 概要欄からブログをご確認ください

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


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


  34. 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. 35
 ホスティング
 Gitリポジトリの種類を選択
 今回は GitHub を選択


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


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


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


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


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


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


  42. 42
 ホスティング
 動作確認


  43. 43
 「堅固な土台の作り方」の手順
 ホスティング
 • GitHub新規リポジトリ作成
 ◦ $ git init
 ◦

    $ git push -u origin main
 • amplify add hosting コマンド実行
 ◦ 継続的デプロイ設定開始
 • Amplify コンソール からデプロイ設定
 ◦ GitHubリポジトリを指定
 ◦ ビルド設定
 • 動作確認

  44. 44
 ログイン
 amplify add auth


  45. 45
 「堅固な土台の作り方」の手順
 ログイン
 • ソーシャルサインイン設定確認
 ◦ Google Oauth の 「クライアント

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

  46. 46
 ログイン
 • ソーシャルサインイン設定確認
 ◦ 事前に GCP のサイトで Google Oauth

    を登録
 ◦ クライアント ID / クライアント シークレット をメモ
 • リダイレクトURLをメモ
 ◦ Cloud9 環境のプレビュー URL
 ◦ デプロイ先のホスティング URL

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

  49. 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. 50
 ログイン
 src/App.js を編集


  51. 51
 ログイン
 動作確認


  52. 52
 「堅固な土台の作り方」の手順
 ログイン
 • ソーシャルサインイン設定確認
 ◦ Google Oauth の 「クライアント

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

  53. 53
 マルチ環境
 amplify env add


  54. 54
 「堅固な土台の作り方」の手順
 マルチ環境
 • 新規環境として production を追加 
 ◦ $

    amplify env add
 • develop ブランチ追加
 ◦ $ git checkout -b develop
 • ブランチと環境の紐付けを修正
 ◦ main ブランチ → production 環境
 ◦ develop ブランチ → dev 環境
 • dev環境のログイン設定変更
 ◦ $ amplify update auth
 
 概要欄からブログをご確認ください

  55. 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. 56
 マルチ環境
 • develop ブランチ追加
 ◦ $ git checkout -b

    develop
 ◦ $ git push -u origin develop

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


  58. 58
 マルチ環境


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

  60. 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 を入力 次のスライドに続きます 

  61. 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. 62
 「堅固な土台の作り方」の手順
 マルチ環境
 • 新規環境として production を追加 
 ◦ $

    amplify env add
 • develop ブランチ追加
 ◦ $ git checkout -b develop
 • ブランチと環境の紐付けを修正
 ◦ main ブランチ → production 環境
 ◦ develop ブランチ → dev 環境
 • dev環境のログイン設定変更
 ◦ $ amplify update auth
 
 概要欄からブログをご確認ください

  63. 63
 突然ですが、


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


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


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


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


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


    
 今日からコーディング開始できるアプリのアイディア7選 - Qiita
 
 

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


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


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


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

    Todo App
 • BMI Calculator

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


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


  75. 75
 Calculator


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


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

  78. 78
 Calculator


  79. 79
 Calculator


  80. 80
 React Todo App


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

  82. 82
 React Todo App


  83. 83
 React Todo App


  84. 84
 BMI Calculator


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

  86. 86
 BMI Calculator


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


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

    Todo App
 • BMI Calculator

  89. 89
 まとめ


  90. 90
 アジェンダ(再掲)
 • Amplify 概要
 • Amplify の魅力
 • 本セッションの位置付け


    • 堅固な土台の作り方 (3点セット)
 • React の OSS をホスティングしてみた

  91. 91
 まとめ
 • Amplify は どのアプリでも疎かにできない機能
 (=堅固な土台)がサクッと追加できる
 • 堅固な土台の作り方 の手順をまとめた


    • 初心者向けハンズオンからの NextStep
 • Amplify OSS ホスティング チャレンジ
 • Amplify コミュニティで情報共有していきましょう

  92. None