AWSの基礎を学ぼう 特別編 Amplify Studio ハンズオン
目的
特別編 Amplify Studio ハンズオン - connpass に参加したので振り返りを書きます
ハンズオン資料
AWS Amplify Studio + Figmaハンズオン
作ったもの
AWS
構成図
はじめに｜AWS Amplify Studio + Figmaハンズオン の通り
詳細
- Cloud9
- Amplify
- Cloud9にAmplify CLI をインストール
- AWSコンソールからAWS Amplifyを利用 (Amplify Studioを利用)
- Amplify cliで作成したもの
- Lambda
- Cognito
- IAMユーザ
構成図にはAppSyncがあるが、GraphQLは作成しなかったので今回のハンズオンで作ったり使ったりしていない（はず）
AWS以外
Figma: the collaborative interface design tool.
デザインツールのFigma。各自Gmailまたはメールアドレスでアカウントを作成して利用。
同名のjpドメインは可動フィギュアのWebサイト。AWSとは関係ないので検索するときは注意。
セットアップ
ハンズオンの通り
Cloud9の準備・作成｜AWS Amplify Studio + Figmaハンズオン
Amplifyの準備・作成｜AWS Amplify Studio + Figmaハンズオン
留意点
問題の回避のためNode.js バージョン14を利用。Cloud9にnvmがインストール済み。(ハンズオン資料の下記の部分)。
nvm install 14.19.1 nvm use 14.19.1
デプロイまでの流れ
Amplifyの準備・作成｜AWS Amplify Studio + Figmaハンズオン
Reactの準備・作成｜AWS Amplify Studio + Figmaハンズオン
ハンズオンでは下記を一通り実施
- Figmaでレイアウトを作る
- AWS Amplify StudioでFigmaを読み込む
- AWS Amplify Studioでデータモデルとアプリケーション動作用のデータ(seed)を作成
- Reactコンポーネントを
amplify pullでGitリポジトリにダウンロードする - 作成したReactコンポーネントを使って開発する
amplify publishでAmplifyにデプロイ
LT
感想
- Amplify StudioはFigma連携が便利
- 開発の流れが変わる
- セキュリティとAWSのリソース管理は気を配る必要があると思う
- Amplifyにソースコードの変更をFigmaに反映する機能がなさそうなので、Figma で最初にデザイン→Reactコンポーネントに反映が前提になりそう
- テストの流れが変わる
-
amplify publishの前にはローカルで動作確認しよう、と思ったけど、不要かも？
-
- セキュリティ担保どうする
- https://github.com/renebrandel/amplify-homes/blob/master/amplify/team-provider-info.json これはソースコードにpushしていいのだろうか...
- そもそもCognitoを使うかなど、セキュリティには要注意かもしれない
- Amplifyで作ったリソースの管理は
- 疑問はちょうどLTで解決できた
- 大規模になってきたのでECSに移行したいなど、Amplifyをやめたいときにソースコードはどれぐらい流用できるのか
- GitHub - renebrandel/amplify-homes サンプルソースコードはforkしておけばよかった。変更を自分の手元にpushして保管できる
- Amplifyの使い所
- 最初はコーポレートサイトみたいな静的なコンテンツから使っていくと便利かも
ありがとうございました。
