Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Amplifyで始めるサーバレス開発/serverless-development-start...

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

MURAKAMI Masahiko

November 30, 2020
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Programming

Transcript

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

    amplify init # Amplifyプロジェクトの初期化 $ amplify storage add # ストレージを追加 $ amplify push # 追加したリソースをクラウドに反映
  2. 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>
  3. 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)
  4. awesome list • dabit3/awesome-aws-amplify: Curated list of AWS Amplify Resources

    • watilde/awesome-aws-amplify-ja: 日本語で書かれているAWS Amplifyのツール、チュートリアル、記事などのリンク集
  5. 既存カテゴリーのテンプレート編集 (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
  6. 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>として配置する
  7. amplify/backend/backend-config.jsonの編集 { "privatecontent": { "usercontent": { "service": "CloudFront", "providerPlugin": "awscloudformation",

    "dependsOn": [ { "category": "storage", "resourceName": "MediaContent", "attributes": [ "BucketName" ] } ] } }, "storage": { "MediaContent": { "service": "S3", "providerPlugin": “awscloudformation" } }
  8. 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
  9. Amplify CLIのカスタマイズのまとめ • カスタムCloudFormationスタック ◦ 本来、追加したいCloudFormationスタックとbackend-config.jsonの編集 のみでカスタマイズできる • プラグイン ◦

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