AWS AmplifyではじめるDevOps

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

Transcript

1. AWS Amplifyではじめる DevOps 日本仮想化技術株式会社 VirtualTech.jp 2024/03/06 1
2. 資料は後ほど公開します 2
3. 3 自己紹介
4. 「DevOps」+「サーバーレス」 4
5. AWS Amplify 5
6. AWS Amplify https://aws.amazon.com/jp/amplify/ • フルスタックのウェブアプリケーションとモバイルアプリケーションを数時間で構築 ◦ フロントエンドの構築とホスティング ◦ 認証やストレージなどの機能の追加 ◦ リアルタイムのデータソースへの接続 ◦ マネージドCI/CD • 0 ドルから始められ、使用料金は従量課金制 ◦ プロトタイプを用いてアイデアをブラッシュアップしたい時 ◦ インスタントに作ってすぐに提供したい時 ◦ アクセスが特定の時間帯や曜日に偏っているプロダクト • カスタマイズ機能(CDKやCloudFormation)を駆使してより多くのAWSサービスへアクセス • SSR(サーバーサイドレンダリング)が2023年11月頃にサポートされた 6
7. Amplifyの主な機能 7
8. • 認証(Amazon Cognito) ◦ メールアドレス、電話番号、ユーザーIDのいずれかを選択可能 ◦ GoogleやFacebookなどのSNS認証にも対応 • API ◦ GraphQLかRESTで選択可能 ◦ Amazon DynamoDB(NoSQLデータベース)が標準、MySQLやPostgreSQLにも接続可能 ◦ CRUDな関数が標準で提供 • ストレージ(S3) ◦ アクセスレベルの制御も可能 • 機能(Lambda) ◦ APIに組み込むことでエンドポイントをまとめることも可能 • カスタマイズ ◦ CDKやCloudFormationを使っでサポートされていないAWSサービスへのアクセスも可能 Amplifyの主な機能 8
10. Amplifyで 書籍管理システムを作ってみる 10
11. 開発環境の準備 11
12. • エディタ ◦ Visual Studio Code(VS Code) • 実行環境 ◦ Docker/Dev Containers(VS Codeの機能) ◦ 社内のVM環境上に構築 • プログラミング言語 ◦ TypeScript • ツールやライブラリなど ◦ AWS CLI ◦ Amplify CLI ◦ Next.js(React) ◦ MUI 開発環境の準備 12
13. Next.jsプロジェクトの準備 13
14. Next.jsプロジェクトの準備 https://ja.react.dev/learn/start-a-new-react-project • 「npx create-next-app@latest」コマンドを実行して新規プロジェクトを作成 ◦ Next.jsやReactではCLIツールを使って作成すると楽 • package.jsonのスクリプトに主要な操作が定義されている ◦ npm xxx または npm run xxxで起動できる 14
15. npm run devで起動した時 15
16. Amplifyの環境準備 16
17. 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
18. AWSコンソールへのログイン • 外部サイトへアクセスするかどうかの確認 • AWSコンソールへのアクセスなので「開く」をクリッ • ログインが必要であれば、ログインを済ませる • VS Codeに戻りエンターキーを押す 18
19. 質問への回答例 Specify the AWS Region • リージョンを選択(ap-northeast-1：東京) 19
20. Amplifyで使用するIAMユーザー作成 • 連続で外部アクセスのダイアログが表示 • 1つ目 ◦ IAMユーザー作成画面 • 2つ目 ◦ Amplifyで使用するIAMユーザー作成のドキュメント • ユーザー作成ができたらアクセスキーの発行まで済ませる 20
21. 接続情報を入力 • プロファイル名は「default」のまま • AWSコマンドを実行して動作確認 ◦ 「aws s3 ls」など 21
22. Amplifyプロジェクトの初期化 22
23. Amplifyプロジェクトの初期化 amplify init • いくつか質問に答えて設定 23
24. 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
25. 質問の解答例 Please choose the profile you want to use: • 「default」を選択 Help improve Amplify CLI by sharing non-sensitive project configurations on failures • 障害レポートを送信するか 25
26. 認証機能の追加 26
27. 認証機能の追加 amplify add auth • Amazon Cognitoを使った認証機能を追加 • コマンド実行といくつかの質問に答えるのみ 27
28. 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
29. 設定前後の比較 追加前 29 追加後
30. 設定の反映 amplify push • AWSサービス側に設定内容を反映します • このタイミングで実際に環境構築などが行われる 30
31. 認証機能の実装 31
32. 認証機能の実装 • 必要なモジュールの追加(npm install …) ◦ @aws-amplify/ui-react ◦ aws-amplify 32
33. 認証機能の実装 import '@aws-amplify/ui-react/styles.css'; • 標準のスタイルを適用 Amplify.configure(awsExports); • APIキーなどの各種情報を読み込み • Amplify CLIコマンドで自動作成 <Authenticator>...</Authenticator> • コンポーネントで囲むだけ(他の実装方法あり) 33
34. ユーザー登録 • ログイン画面から新規登録も可能 ◦ 設定で無効化できる • 日本語化はやや煩雑 34
35. AWSコンソールからのユーザー登録 • AWSコンソールからAmplifyページにアクセス • 作成したプロジェクトを選択 35
36. ユーザー登録 • 追加したい環境の「認証」を選択 36
37. ユーザー登録 • Cognitoで表示を選択 37
38. ユーザー登録 • サフィックスで環境名が表示される 38
39. ユーザー登録 • 見慣れたCognitoの画面 39
40. API機能の追加 40
41. API機能の追加 41 amplify add api • エンドポイントの作成と合わせてDynamoDBが作成される
42. 質問の回答例 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
43. スキーマの作成 • CRUDな関数は自動生成 • 各レコードの作成日時や変更日時も標準サポート 43
44. スカラー型 • ID、String、Int、Float、Booleanのいずれかから選択 「!」 • 必須項目の意味 @model • DynamoDBにテーブルの作成対象を定義するアノテーション @hasOne、@HasMany、@belongsTo、@manyToMany • テーブル間の1:1〜N:Nを定義するアノテーション @auth • 細かいアクセスルールを定義するアノテーション スキーマの作成 44
45. amplify push 45
46. CRUDで見る実装例 46
47. CRUDで見る実装例 • CRUDな関数は一括で自動生成される ◦ createBook ◦ getBook ◦ listBooks ◦ updateBook ◦ deleteBook 47
48. • queryに実行したいアクション • variablesにデータ C：データ登録 48
49. R：データ取得 • デフォルトでは100件取得 • getBookでは1件のみ、listBooksは複数件を取得 • variablesにフィルター条件なども設定可能 49
50. U：データ更新 • 画像(上) ◦ 全て更新する場合 ◦ 渡し方はお好みで ▪ (変数でも、スプレッド構文でも) • 画像(下) ◦ 必要な項目のみ 50
51. D：データの削除 • 物理削除 • variablesにIDを渡す 51
52. 注意点 • 「amplify remove api」で削除時にはフォルダーごと削除される ◦ amplify/backend/api/[プロジェクト名]/schema.graphqlのバックアップをお忘れなく 52
53. ホスティング環境の構築 & CI/CDの有効化 53
54. developブランチの追加 • Amplify側のDev環境と合わせるため 54
55. • AWSコンソールからAmplifyページにアクセス • 対象のアプリを選択 55
56. • GitHubを選択 56
57. 接続対象のリポジトリを選択 57
58. • Dev環境と接続するのでdevelopブランチを選択 58
59. • Dev環境を選択 59
60. • サービスロールの選択 60
61. • ユースケースでAmplifyと入力 • Amplify - Backend Deploymentを選択 61
63. • 必要であればロール名を書き換える 63
64. • 作成したサービスロールを選択 • 画面下部にあるチェックボックスを有効化 ◦ CI/CDをするかどうかに関わる 64
65. 設定を確認して「保存してデプロイ」 65
66. 構築状況はステータスで表示 デプロイまで完了したら閲覧できる 66
67. CIの設定 67 • Amplifyの画面から直接編集できる • ソースコード管理する場合 ◦ プロジェクト直下にamplify.ymlファイルを作成して格納 ◦ ファイルが存在する場合はファイルの内容で上書き • 依存関係のインストールやビルド処理を記述 •
68. 細かい設定は色々と必要ですが... 68
70. プレビュー環境の有効化 70
71. プレビュー環境の有効化 • GitHub上でPRが作成されたら新しい環境を構築して、マージされたら破棄 • レビュー時の動作確認やテスト、関係部署への事前連携などに便利 71
72. • Amplifyのサイドメニューからプレビューを 選択 • 「プレビューを有効化」 72
73. • GitHub連携が必要 73
75. • チェックボックスを有効化するだけ • 環境は ◦ 専用の新環境を毎回立ち上げるか ◦ 既存環境にアタッチするか 75
76. • dev意外にプレビュー用の環境が新しく作られた 76
78. まとめ 78
79. • 認証機能とAPI機能の作成と実装例 ◦ API機能ではCRUD関数が自動生成 • CI/CD機能の有効化 • PRごとに専用の環境を構築できるプレビュー機能 勤怠システムを作ってみての感想 • フロントエンドの実装に集中できるので1人でもサクサク作れる • メール送信やバックアップなど実運用を考えるとカスタマイズ機能の活用は避けられな • メンバーごとのアクセスコントロールは難しい？ ◦ うっかり本番環境を触ってしまうリスクはある • 使用量に応じた従量課金のため、開発フェーズでもコスト面では非常にリーズナブル ◦ 新しいアイデアを検証するハードルはかなり下がる まとめ 79
80. Amplifyは面白そうだったけど ちょっとな... 80
81. そんな方には 「かんたんDevOps」 を試してみてはいかがですか？ 81
82. これから学習したい人向けに 82
83. 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
84. もう少しじっくり聞きたい方は ぜひOSCでお待ちしています 84
85. 【今週末】3/10 10:00〜 OSC Tokyo/Spring 85
86. ブースで雑談しましょう 86
87. おわり 87