![[AWS EXpert Online for JAWS-UG 18] 見せてやるよ、Step Functions の本気ってやつをな](https://cdn.slidesharecdn.com/ss_thumbnails/awsxon18howfarstepfunctionsgo-211124111849-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to AWS Amplify 入門 (20)
![[AWSマイスターシリーズ] AWS SDK for PHP / Ruby / boto(Python) / JavaScript in Node.js](https://cdn.slidesharecdn.com/ss_thumbnails/20131218aws-meister-regenerate-awssdkforruby-php-python-node-public20131218-131218175831-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[AWSマイスターシリーズ] AWS OpsWorks](https://cdn.slidesharecdn.com/ss_thumbnails/20131016aws-meister-regenerate-opsworks-131025012637-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More from Hideaki Aoyagi (18)
Recently uploaded (8)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
AWS Amplify 入門
- 1. AWS Amplify 入門 青柳 英明 2020/10/17 JAWS-UG 福岡 「8度目もちょっと濃い目にAWSの話をしてみよう」
- 2. はじめに 1 ?セッション資料は終了後に公開します ?ガンガン Tweet お願いします！ ?質問や感想など、お気軽に声をお掛けください ハッシュタグ： #jawsug #jawsugfuk
- 3. 自己紹介 2 青柳 英明 所属： クラスメソッド 福岡オフィス 経歴： クラウドおじさん 職業： AWSソリューションアーキテクト オンプレインフラおじさん LV20 LV1 コアメンバーです LV2 年目
- 4. 本日お話しすること 3 オンプレインフラ歴20年で、プログラミング言語は Visual Basic くらいしか分からないおじさんが、 ひょんなことから AWS Amplify を使ったサー バーレスアプリケーションの構築に関わることに なったので、初学者向けに AWS Amplify の概要 とか使い始める方法とかをお話しできるといいなと 思います。
- 6. Amplifyの構成要素 5 ?Amplify CLI ?Amplify Libraries ?Amplify Console
- 7. Amplify CLI 6 テキストメニュー形式によって サーバーレスアプリケーションのバックエンド環境を 構築することができるツール ※「CLI」という名前ですが、 AWS CLI のようなコマンドラインツールではありません （バッチ処理などが行える訳ではありません）
- 8. Amplify CLI 7 $ amplify add function ? Provide the AWS Lambda function name: amplify_example ? Choose the runtime that you want to use: .NET Core 3.1 Go Java ? NodeJS Python $ amplify push ? Successfully pulled backend environment demo from the cloud. Current Environment: demo | Category | Resource name | Operation | Provider plugin | | -------- | --------------- | --------- | ----------------- | | Storage | amplify_example | Create | awscloudformation | | Function | amplify_example | Create | awscloudformation | | Api | amplify_example | Create | awscloudformation | ? Are you sure you want to continue? (Y/n) y 案内に従って、テキストを入力したり カーソルキー上下で選択します サマリーなどは 見易く表組表示されたりもします
- 9. Amplify Libraries 8 いわゆるSDK 「AWS SDK for JavaScript」 「AWS Mobile SDK (for Android/iOS)」 と呼ばれていたものの後継
- 10. Amplify Libraries 9 JavaScript 対応フレームワーク（基本的にSPA） ?React Next.js (SSR), ReactNative (Android/iOS向けアプリ) ?Angular Ionic ?Vue
- 11. Amplify Libraries 10 Android 言語： Java, Kotlin 環境： Android Studio, Android SDK iOS 言語： Swift 環境： Xcode, CocoaPods
- 12. Amplify Console 11 CI/CD ホスティング GitHub、AWS CodeCommit と連係して アプリケーションのビルドやデプロイが行える Webサイトのマネージドなホスティング環境 S3、CloudFront、Route 53ドメイン (XXXX.amplifyapp.com または独自ドメインを利用可)
- 13. Amplifyの使い方（概要） 12 例： React を使ったSPAアプリケーションの作成 1. 開発マシンに Amplify CLI をインストール ?Node.js … 10.x 以降 ?npm … 6.x 以降 $ npm install -g @aws-amplify/cli
- 14. Amplifyの使い方（概要） 13 2. React のプロジェクトを作成 $ npx create-react-app ＜application-name＞ 3. Amplify の初期設定 $ amplify init 4. Amplify Libraries のインストール $ npm install aws-amplify @aws-amplify/ui-react
- 15. Amplifyの使い方（概要） 14 5. AWSリソースの定義設定 $ amplify add ＜AWSリソースのカテゴリ＞ API … API Gateway (REST) / AppSync (GraphQL) Function … Lambda Storage … S3 / DynamoDB Auth … Cognito / IAM その他にも??? ?分析 (Pinpoint) ?XR (Smerian) ?対話 (Lex) ?IoT ?AI/ML系サービス
- 16. Amplifyの使い方（概要） 15 6. リソースをAWS環境へデプロイ $ amplify push リソース定義 CloudFormation API Gateway AppSync Lambda DynamoDB Cognito
- 17. Amplifyの使い方（概要） 16 7. アプリケーションの動作確認 $ npm start API Gateway AppSync Lambda DynamoDB Cognito ローカルWebサーバー アプリケーション (SPA) http://localhost:3000
- 18. Amplifyの使い方（概要） 17 8. アプリケーションをホスティング $ amplify add hosting $ amplify push Route 53 CloudFront S3 (静的Web ホスティング) Amplify アプリケーション (SPA)
- 20. AWS Amplify で 簡易アンケートアプリを さくっと作ってみた 青柳 英明 2020/10/17 JAWS-UG 福岡 「8度目もちょっと濃い目にAWSの話をしてみよう」
- 21. システム概要 19 AppSync ＋ DynamoDB AppSync DynamoDB 質問一覧 選択肢一覧 回答一覧 GraphQL
- 22. 初めてのAppSync (GraphQL) 20 今回、書いたもの、書いていないもの ?クエリ定義 → 標準で用意されるものを利用 この程度でもアプリが作れてしまう！ (今回一番の驚き？) ?スキーマ定義 → 3つの単純なテーブル ?その他コード → Lambda関数など一切書いてない
- 23. AppSync (GraphQL) の「Subscription」 21 「購読」＝ 更新発生時に通知してくれる AppSync DynamoDB アンケート登録 更新発生 更新を通知 （そのまま、更新分の 読み取りを行う） サマリ表示