Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

MURAKAMI Masahiko

November 30, 2020
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Amplifyとは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Amplifyのはじめ方
    (ストレージとしてS3を追加する場合)
    $ npx vue create my-project # Vue.jsのプロジェクト作成
    $ amplify init # Amplifyプロジェクトの初期化
    $ amplify storage add # ストレージを追加
    $ amplify push # 追加したリソースをクラウドに反映

    View full-size slide

  8. Amplifyのはじめ方
    (Vue.jsで画像をS3にアップロードする場合)

    />

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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    "Resources": {
    "LambdaFunction": {
    "Type": "AWS::Lambda::Function",
    "Properties": {
    "Environment": {
    "RoleArn": {
    "Ref": "RoleArn"
    }
    }
    }
    }
    }
    }
    {
    "EndpointURL": ""
    }
    parameters.json
    lambda-template.json

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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///として配置する

    View full-size slide

  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"
    }
    }

    View full-size slide

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

    View full-size slide

  19. Amplify CLIプラグイン
    ● Amplify CLIはプラグインとして構成されている
    ● プラグインには4つのタイプがある
    ○ category
    ○ provider
    ○ frontend
    ○ util

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  22. Amplify CLIプラグインの実装例
    (CloudFront署名付きURLで画像共有する事例)
    ● CloudFrontを構成するためのプ
    ラグイン
    ● タイプはcategory
    ● カスタムCloudFormationスタック
    のテンプレート作成、
    backend-config.jsonの編集が
    プラグインの仕事

    View full-size slide

  23. Amplify CLIプラグイン実装のヒント
    ● https://github.com/aws-amplify/amplify-cliのソースが実装の参考
    になる
    ● サードパーティプラグインのソースも参考になる
    ● amplify-cli/packages/amplify-cli/src/extensions/amplify-help
    ers 配下にはプラグインを実装するのに有用なメソッドがそろっている

    View full-size slide

  24. Amplify CLIのカスタマイズのまとめ
    ● カスタムCloudFormationスタック
    ○ 本来、追加したいCloudFormationスタックとbackend-config.jsonの編集
    のみでカスタマイズできる
    ● プラグイン
    ○ 複数のリソースを追加するような場合は作業が楽で間違いを起こしにくい。汎
    用的なら他プロジェクトでも使える(OSSにしたりもできる)
    ○ amplify cliのライフサイクルに合わせて実行したいならプラグイン!

    View full-size slide