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