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

AWS AmplifyではじめるDevOps

AWS AmplifyではじめるDevOps

2024/03/06にとことんDevOps勉強会で投影したスライドです

Ishimoto Tatsuya

March 06, 2024
Tweet

More Decks by Ishimoto Tatsuya

Other Decks in Technology

Transcript

  1. AWS Amplify https://aws.amazon.com/jp/amplify/ • フルスタックのウェブアプリケーションとモバイルアプリケーションを数時間で構築 ◦ フロントエンドの構築とホスティング ◦ 認証やストレージなどの機能の追加 ◦

    リアルタイムのデータソースへの接続 ◦ マネージドCI/CD • 0 ドルから始められ、使用料金は従量課金制 ◦ プロトタイプを用いてアイデアをブラッシュアップしたい時 ◦ インスタントに作ってすぐに提供したい時 ◦ アクセスが特定の時間帯や曜日に偏っているプロダクト • カスタマイズ機能(CDKやCloudFormation)を駆使してより多くのAWSサービスへアクセス • SSR(サーバーサイドレンダリング)が2023年11月頃にサポートされた 6
  2. • 認証(Amazon Cognito) ◦ メールアドレス、電話番号、ユーザーIDのいずれかを選択可能 ◦ GoogleやFacebookなどのSNS認証にも対応 • API ◦

    GraphQLかRESTで選択可能 ◦ Amazon DynamoDB(NoSQLデータベース)が標準、MySQLやPostgreSQLにも接続可能 ◦ CRUDな関数が標準で提供 • ストレージ(S3) ◦ アクセスレベルの制御も可能 • 機能(Lambda) ◦ APIに組み込むことでエンドポイントをまとめることも可能 • カスタマイズ ◦ CDKやCloudFormationを使っでサポートされていないAWSサービスへのアクセスも可能 Amplifyの主な機能 8
  3. 9

  4. • エディタ ◦ Visual Studio Code(VS Code) • 実行環境 ◦

    Docker/Dev Containers(VS Codeの機能) ◦ 社内のVM環境上に構築 • プログラミング言語 ◦ TypeScript • ツールやライブラリなど ◦ AWS CLI ◦ Amplify CLI ◦ Next.js(React) ◦ MUI 開発環境の準備 12
  5. Amplifyの環境準備 • Dev Containersの設定ファイル上でAWS CLIとAmplify CLIのインストールは済んでいる • xdg-utilsが必要と言われた場合 ◦ sudo

    apt-get update -y && sudo apt-get install -y xdg-utils ◦ 環境起動時に毎回実行するのは手間なのでDockerfileなどに定義しておくと良い • amplify configure ◦ アクセスキーなどの接続情報を紐付ける ▪ 接続したいAWSコンソールへのログインやIAMユーザを作成する 17
  6. Amplifyで使用するIAMユーザー作成 • 連続で外部アクセスのダイアログが表示 • 1つ目 ◦ IAMユーザー作成画面 • 2つ目 ◦

    Amplifyで使用するIAMユーザー作成のドキュメント • ユーザー作成ができたらアクセスキーの発行まで済ませる 20
  7. Enter a name for the project • AWSコンソール上のプロジェクト名になるので区別しやすい名前をつける • 条件

    ◦ 3~20文字 ◦ アルファベットと数字のみ Initialize the project with the above configuration? • 直前に出力された内容で問題ないかの確認 • 設定が誤っていたとしても後で修正できるため進む Select the authentication method you want to use: • 「AWS profile」を選択 質問の解答例 24
  8. 質問の解答例 Please choose the profile you want to use: •

    「default」を選択 Help improve Amplify CLI by sharing non-sensitive project configurations on failures • 障害レポートを送信するか 25
  9. Do you want to use the default authentication and security

    configuration? • 認証方法を選択します • 「Default configuration」を選択 How do you want users to be able to sign in? • ログイン方法の選択 • 「Email」を選択 Do you want to configure advanced settings? • 「No, I am done.」を選択 質問への回答例 28
  10. 認証機能の実装 import '@aws-amplify/ui-react/styles.css'; • 標準のスタイルを適用 Amplify.configure(awsExports); • APIキーなどの各種情報を読み込み • Amplify

    CLIコマンドで自動作成 <Authenticator>...</Authenticator> • コンポーネントで囲むだけ(他の実装方法あり) 33
  11. 質問の回答例 Select from one of the below mentioned services •

    GraphQLかRESTが選択可能。GraphQLを選択 Here is the GraphQL API that we will create.Select a setting to edit or continue • 「Continue」を選択 Choose a schema template • 「Single object with fields」を選択 Do you want to edit the schema now? • Yesを選択 42
  12. スカラー型 • ID、String、Int、Float、Booleanのいずれかから選択 「!」 • 必須項目の意味 @model • DynamoDBにテーブルの作成対象を定義するアノテーション @hasOne、@HasMany、@belongsTo、@manyToMany

    • テーブル間の1:1〜N:Nを定義するアノテーション @auth • 細かいアクセスルールを定義するアノテーション スキーマの作成 44
  13. 62

  14. 69

  15. 74

  16. 77

  17. • 認証機能とAPI機能の作成と実装例 ◦ API機能ではCRUD関数が自動生成 • CI/CD機能の有効化 • PRごとに専用の環境を構築できるプレビュー機能 勤怠システムを作ってみての感想 •

    フロントエンドの実装に集中できるので1人でもサクサク作れる • メール送信やバックアップなど実運用を考えるとカスタマイズ機能の活用は避けられな • メンバーごとのアクセスコントロールは難しい? ◦ うっかり本番環境を触ってしまうリスクはある • 使用量に応じた従量課金のため、開発フェーズでもコスト面では非常にリーズナブル ◦ 新しいアイデアを検証するハードルはかなり下がる まとめ 79
  18. AWSサービスの基本知識 • 知識は意外と必要 AWS Amplifyの公式ドキュメント • https://docs.amplify.aws/react/build-a-backend/ ◦ v5とv6の転換期。v6で破壊的な変更が加わっており、ブログ記事などの情報はやや少なめ Next.js/React

    • https://ja.react.dev/ • https://nextjs.org/ ◦ ドキュメント読んだり、ブログやYoutube、有料のオンライン動画など情報量は多め GraphQL • https://graphql.org/ ◦ GraphQLは初めてだったので、学習にやや苦戦 ◦ 「初めてのGraphQL」のオライリー本も読んだ これから学習したい人向けに 83