Amplifyで始めるサーバレス開発/serverless-development-starting-with-amplify

Transcript

1. Amplifyで始める サーバレス開発 ESM MEETUP!! 2020-11-27 村上雅彦

2. 村上雅彦 a.k.a @fossamagna

3. Amplifyとは

4. Amplifyとは “スケールするモバイルアプリ およびウェブアプリを最速で 構築する方法”

5. Amplifyの構成 CLI：Amplifyでアプリを構築するためのツール チェーン Cloud Services：アプリのバックエンド Framework：モバイル、Web向けの各SDK Developer Tools：CI/CD, ホスティング、モバイ ルデバイスのテスト環境

6. Amplifyのはじめ方 1. フロントエンドのプロジェクト作成 2. Amplify CLIでクラウドサービス(バックエンドリソース)を追加 3. Amplify CLIでクラウドに反映 4.

   フロンドエンドからクラウドサービスを利用するコードを追加

7. Amplifyのはじめ方 (ストレージとしてS3を追加する場合) $ npx vue create my-project # Vue.jsのプロジェクト作成 $

   amplify init # Amplifyプロジェクトの初期化 $ amplify storage add # ストレージを追加 $ amplify push # 追加したリソースをクラウドに反映

8. Amplifyのはじめ方 (Vue.jsで画像をS3にアップロードする場合) <template> <input type="file" accept="image/png" @change="upload" /> </template> <script

   lang="ts"> import { defineComponent } from 'vue'; import { Storage } from 'aws-amplify'; export default defineComponent({ setup() { const upload = async (e: Event) => { const input = e.target as HTMLInputElement; const file = input && input.files ? input.files[0] : null; if (!file) return; const result = await Storage.put(file.name, file); # S3にアップロード console.log(result); }; return { upload } } }); </script>

9. Amplifyのカテゴリー • auth (Amazon Cognito) • storage (Amazon S3 &

   Amazon DynamoDB) • function (AWS Lambda) • api (AWS AppSync & Amazon API Gateway) • analytics (Amazon Pinpoint) • hosting (Amazon S3 and Amazon CloudFront distribution) • notifications (Amazon Pinpoint) • interactions (Amazon Lex) • predictions (Amazon Rekognition, Amazon Textract, Amazon Translate, Amazon Polly, Amazon Transcribe, Amazon Comprehend, and Amazon SageMaker)

10. awesome list • dabit3/awesome-aws-amplify: Curated list of AWS Amplify Resources

    • watilde/awesome-aws-amplify-ja: 日本語で書かれているAWS Amplifyのツール、チュートリアル、記事などのリンク集

11. Amplifyのカスタマイズ • Amplifyは多くの機能を提供している • 活発に開発されていて頻繁に新機能追加もある • だたし、自分の要件に100%あうとはかぎらない • 足りない部分はカスタマイズできるようになっている

12. Amplifyのカスタマイズ方法 • 既存カテゴリーのテンプレート編集 • カスタムCloudFormationスタックの追加 • プラグイン

13. 既存カテゴリーのテンプレート編集 (Lambdaに環境変数を渡す場合) { "Parameters": { "RoleArn": { "Type": "String", "Default":

    "<default role ARN>" } } … "Resources": { "LambdaFunction": { "Type": "AWS::Lambda::Function", "Properties": { "Environment": { "RoleArn": { "Ref": "RoleArn" } } } } } } { "EndpointURL": "<role ARN override>" } parameters.json lambda-template.json

14. カスタムCloudFormationスタックの追加 1. CloudFormationテンプレートファイルの追加する 2. amplify/backend/backend-config.jsonの編集する 3. CLIに追加したリソースを認識させる

15. カスタムCloudFormationスタックの追加 (CloudFront署名付きURLで画像共有する事例) • S3にアップロードされたファイル に対してCloudFrontの署名付き URLを発行 • S3バケット、LambdaはCLIで生 成したリソースを利用

16. CloudFormationテンプレートファイルの追加 { "AWSTemplateFormatVersion": "2010-09-09", "Description": "Private content resource stack creation

    using Amplify CLI", "Parameters": { "storageMediaContentBucketName": { "Type": "String", "Default": "storageMediaContentBucketName" }, }, "Resources": { "PrivteContentCloudFrontDistribution": { "Type" : "AWS::CloudFront::Distribution", "DependsOn" : [ "OriginAccessIdentity" ], …. } } amplify/backend/<category>/<resource-name>/<cloudformation-template.json/yml>として配置する

17. amplify/backend/backend-config.jsonの編集 { "privatecontent": { "usercontent": { "service": "CloudFront", "providerPlugin": "awscloudformation",

    "dependsOn": [ { "category": "storage", "resourceName": "MediaContent", "attributes": [ "BucketName" ] } ] } }, "storage": { "MediaContent": { "service": "S3", "providerPlugin": “awscloudformation" } }

18. CLIに追加したリソースを認識させる amplify env checkout <current-env-name> を実行して追加したリソー スをCLIに認識させる

19. Amplify CLIプラグイン • Amplify CLIはプラグインとして構成されている • プラグインには4つのタイプがある ◦ category ◦

    provider ◦ frontend ◦ util

20. Amplify CLIプラグインの作成 • プラグインの雛形を生成するコマンドが用意されてる ◦ amplify plugin init ◦ プラグインの名前やタイプなどいくつかの質問に答えると雛形コード

    が生成される

21. Amplify CLIプラグインの構成 プラグインのディレクトリ構成 |_my-amplify-plugin/ |_commands/ # サブコマンド | |_help.js |

    |_version.js | |_event-handlers/ # プラグインライフサイクルイベントのハンドラ | |_handle-PostPush.js | |_handle-PrePush.js | |_amplify-plugin.json # プラグインのメタ情報 |_index.js # プラグインエントリーポイント |_package.json

22. Amplify CLIプラグインの実装例 (CloudFront署名付きURLで画像共有する事例) • CloudFrontを構成するためのプ ラグイン • タイプはcategory • カスタムCloudFormationスタック

    のテンプレート作成、 backend-config.jsonの編集が プラグインの仕事

23. Amplify CLIプラグイン実装のヒント • https://github.com/aws-amplify/amplify-cliのソースが実装の参考 になる • サードパーティプラグインのソースも参考になる • amplify-cli/packages/amplify-cli/src/extensions/amplify-help ers

    配下にはプラグインを実装するのに有用なメソッドがそろっている

24. Amplify CLIのカスタマイズのまとめ • カスタムCloudFormationスタック ◦ 本来、追加したいCloudFormationスタックとbackend-config.jsonの編集 のみでカスタマイズできる • プラグイン ◦

    複数のリソースを追加するような場合は作業が楽で間違いを起こしにくい。汎 用的なら他プロジェクトでも使える（OSSにしたりもできる） ◦ amplify cliのライフサイクルに合わせて実行したいならプラグイン！