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

拡張して使うServerless&Amplify/use-with-extending-serverless-and-amplify

 拡張して使うServerless&Amplify/use-with-extending-serverless-and-amplify

MURAKAMI Masahiko

November 20, 2019
Tweet

More Decks by MURAKAMI Masahiko

Other Decks in Programming

Transcript

  1. KANAZAWA
    ֦ுͯ͠࢖͏ Serverless & Amplify
    גࣜձࣾӬ࿨γεςϜϚωδϝϯτɹञҪٛਔɾଜ্խ඙ | 2019/11/20

    View full-size slide

  2. ˕


    ຊࣾʗ෱Ҫࢢ໰԰
    ౦ژࢧࣾʗਆా
    ԭೄࣄ຿ॴʗಹ೼ࢢ
    ׆ಈڌ఺

    View full-size slide

  3. Copyright©2016 Poppendieck.LLC
    2017

    View full-size slide

  4. εΫϥϜϚελʔ
    ʢେن໛޲͚ʣ
    ΤϯδχΞʗ
    εΫϥϜϚελʔ
    Ϋϥ΢υΞʔΩςΫτ
    Ϋϥ΢υΞʔΩςΫτ
    ʗεΫϥϜϚελʔ
    ΤϯδχΞ
    εΫϥϜϚελʔ
    • ܦݧ๛෋ͳΞδϟΠϧʗΫϥ΢υٕज़ऀʹΑΔ։ൃࢧԉαʔϏεɻίʔνϯά΋ՄೳͰ͢ɻ
    • POC͔Β঎༻αʔϏεͷ։ൃ·Ͱɺ෯޿͍ٕज़ྖҬʹରԠ͠·͢ɻ
    • ϦϞʔτ։ൃͳΒͰ͸ͷޮ཰ੑͱಁ໌ੑΛ௥ٻɻ͓٬༷ͱϫϯνʔϜͰϏδωεΛ੒௕ͤ͞·͢ɻ
    Point
    Agile Studio Fukuiɿ
    DX࣌୅ʹରԠͨ͠ڞ૑։ൃͱڞҭڌ఺ɻ
    ΞδϟΠϧ/Ϋϥ΢υΛ
    ಘҙͱ͢ΔΤϯδχΞνʔϜ

    View full-size slide

  5. ServerlessͰ࡞ΔॳΊͯͷαʔόϨε

    View full-size slide

  6. KANAZAWA
    Name: ञҪ ٛਔ
    Age: 0x20୅
    Home: ژ౎෎Ӊ࣏ࢢ
    • େࡕͷখ͍͞ձࣾͰϝʔΧʔ͔Βͷडୗ։ൃ
    • ओʹܞଳ୺຤ͷ૊ΈࠐΈιϑτ
    • ಛʹܞଳి࿩ʢFOMAॳ߸ػʙAndroid4.4ʣ
    • 2014೥10݄ΑΓݱ৬
    • C/C++/Java/Objective-C/C#/JavaScript/TypeScript/etc

    View full-size slide

  7. KANAZAWA
    εϚϗΞϓϦʴόοΫΤϯυͷ։ൃґཔ
    • 20೥͙Β͍΍ͬͯΔαʔϏε
    • ͍Ζ͍Ζ͋ͬͯϦχϡʔΞϧ͍ͨ͠
    • ։ൃձࣾʹෆຬʢεϐʔυײͦͷଞʣ

    View full-size slide

  8. KANAZAWA
    ελʔτ࣌఺ͷঢ়گ
    • ϦχϡʔΞϧ಺༰͸ݻ·͍ͬͯͳ͍
    • ݱߦΞϓϦͷجຊػೳ͸ඞਢ
    • εϚϗΞϓϦ͸iOS/Android྆ํ
    ɹ὎ αʔό΋ΞϓϦ΋ɺಈ͘΋ͷΛૣ͘࡞Δඞཁ͕

    View full-size slide

  9. KANAZAWA
    ௨ৗͷαʔόߏ੒
    AWS
    DC

    View full-size slide

  10. KANAZAWA
    ௨ৗͷαʔόߏ੒
    • ϓϩϏδϣχϯά
    • εέʔϦϯά
    • ӡ༻ɾอक
    ɹ὎ ΞϓϦຊདྷͷػೳҎ֎ʹɺͦΕͳΓͷ࣌ؒͱ࿑ྗ

    View full-size slide

  11. KANAZAWA
    αʔόϨεͰʂ
    • ϓϩϏδϣχϯά
    • εέʔϦϯά
    • ӡ༻ɾอक
    ɹ὎ ΞϓϦຊདྷͷػೳʹ஫ྗ

    View full-size slide

  12. KANAZAWA
    εϚϗΞϓϦଆ
    • ݱߦΞϓϦ͸iOS=Objective-CˍAndroid=Java
    • ܦݧऀෆ଍
    ɹ὎ ࡞Γ௚͍͕ͨ͠ωΠςΟϒΞϓϦͦΕͧΕΛ࡞Δ࣌ؒ͸ͳ͍

    View full-size slide

  13. KANAZAWA
    ϋΠϒϦουͰʂ
    • Cordova
    • Xamarin
    • React Native
    • Native Script
    • Flutter

    View full-size slide

  14. KANAZAWA
    ϋΠϒϦουͰʂ
    • Cordova
    • Xamarin
    • React Native
    • Native Script
    • Flutter
    αʔόϨεͷ࿩Ͱ͸ͳ͍ͷͰׂѪ

    View full-size slide

  15. KANAZAWA
    REST APIɿNode.js + TypeScript + Jest
    εϚϗΞϓϦɿReact Native + TypeScript + Jest
    ɹ὎ ར༻͢Δٕज़Λڞ௨Խ͢Δ͜ͱ͕Ͱ͖ͨ

    View full-size slide

  16. KANAZAWA
    αʔόϨεͳAPIߏ੒
    AWS
    DC

    View full-size slide

  17. KANAZAWA
    αʔόϨεͳAPIߏ੒
    AWS
    DC
    Amazon API Gateway
    APIͷఆٛɾσϓϩΠɾอकΛߦ͏ͨΊͷϑϧϚωʔδυαʔϏε

    View full-size slide

  18. KANAZAWA
    αʔόϨεͳAPIߏ੒
    AWS
    DC
    AWS Lambda
    ೚ҙͷίʔυΛ࣮ߦ͢ΔͨΊͷϑϧϚωʔδυαʔϏε

    View full-size slide

  19. KANAZAWA
    αʔόϨεͳAPIߏ੒
    AWS
    DC
    Amazon DynamoDB
    ແݶʹεέʔϧ͢ΔNoSQLσʔλϕʔε

    View full-size slide

  20. KANAZAWA
    αʔόϨεͳAPIߏ੒
    AWS
    DC
    Amazon Cognito
    γϯϓϧʹϢʔβʔΛ؅ཧ͢ΔϑϧϚωʔδυαʔϏε

    View full-size slide

  21. KANAZAWA
    αʔόϨεͳAPIߏ੒
    AWS
    DC
    AWS Amplify

    View full-size slide

  22. KANAZAWA
    αʔόϨεར༻ͷݒ೦
    • Ϋϥ΢υʹ͔͠ͳ͍
    ϩʔΧϧͰ࣮ߦͰ͖ͳ͍ʹςετͰ͖ͳ͍ʹ։ൃ͠ʹ͍͘
    • ߏங͕໘౗ͦ͏
    Ϛωδϝϯτίϯιʔϧʢखಈʣ͸࠶ݱੑͷ໰୊
    CLIΛεΫϦϓτͰୟ͘ͷ΋อक͕೉͘͠ͳΔ

    View full-size slide

  23. KANAZAWA
    https://serverless.com

    View full-size slide

  24. KANAZAWA
    Serverless FrameworkͳΒ
    • Ϋϥ΢υʹ͔͠ͳ͍
    ϩʔΧϧͰ࣮ߦͰ͖Δ
    • ߏங͕໘౗ͦ͏
    YAMLϑΝΠϧʴίϚϯυͰҰൃσϓϩΠ

    View full-size slide

  25. KANAZAWA
    $ yarn global add serverless
    $ sls create -t aws-nodejs-typescript -p example-project
    Serverless: Generating boilerplate...
    Serverless: Generating boilerplate in "/Users/sakai-y/work/example-project"
    _______ __
    | _ .-----.----.--.--.-----.----| .-----.-----.-----.
    | |___| -__| _| | | -__| _| | -__|__ --|__ --|
    |____ |_____|__| \___/|_____|__| |__|_____|_____|_____|
    | | | The Serverless Application Framework
    | | serverless.com, v1.55.1
    -------'
    Serverless: Successfully generated boilerplate for template: “aws-nodejs-typescript"
    $ cd example-project

    View full-size slide

  26. KANAZAWA
    $ yarn install
    $ sls config credentials -p aws -k [AWS AccessKey] -s [AWS SecretKey]
    $ sls deploy

    View full-size slide

  27. KANAZAWA
    ex) API GatewayͷΞΫηεϩάΛ༗ޮʹ͍ͨ͠

    View full-size slide

  28. KANAZAWA
    ϩʔΧϧͰͷ࣮ߦ͸ʁ

    View full-size slide

  29. KANAZAWA
    https://github.com/serverless/plugins

    View full-size slide

  30. KANAZAWA
    https://github.com/dherault/serverless-offline
    serverless-offline

    View full-size slide

  31. KANAZAWA
    ͜ΕͰΞϓϦέʔγϣϯͷ࣮૷ʹूதͰ͖Δ

    View full-size slide

  32. KANAZAWA
    ՝୊ɿΦϯϓϨαʔό΁ͷ઀ଓʹݻఆIP͕ඞཁ
    AWS
    DC

    View full-size slide

  33. KANAZAWA
    LambdaΛVPCʹೖΕͯΞϨίϨ͢Δඞཁ͕
    DC
    VPC
    Private subnet Public subnet

    View full-size slide

  34. KANAZAWA
    https://github.com/smoketurner/serverless-vpc-plugin
    serverless-vpc-plugin

    View full-size slide

  35. KANAZAWA
    $ yarn add -D serverless-vpc-plugin
    ϓϥάΠϯͷΠϯετʔϧ
    serverless.ymlʹઃఆ௥Ճ
    plugins:
    - serverless-webpack
    - serverless-vpc-plugin
    custom:
    vpcConfig:
    cidrBlock: '10.0.0.0/16'
    zones:
    - ap-northeast-1a
    - ap-northeast-1c

    View full-size slide

  36. KANAZAWA
    ͜Ε͚ͩ

    View full-size slide

  37. KANAZAWA
    Error ——————————————————————
    The CloudFormation template is invalid: Template format error: Number of resources, 201, is greater
    than maximum allowed, 200
    ՝୊ɿ͋Δ೔σϓϩΠ͕ࣦഊͨ͠

    View full-size slide

  38. KANAZAWA
    1APIʹ͖ͭෳ਺ͷCloudFormationϦιʔε͕࡞ΒΕΔ
    • AWS::Lambda::Function
    • AWS::Lambda::Permission
    • AWS::Logs::LogGroup
    • AWS::ApiGateway::Resource
    • AWS::ApiGateway::Method
    APIʹΑͬͯ͸AWS::ApiGateway::Model͕ෳ਺ɺ͞Βʹڞ௨ͷϦιʔε
    ɹ὎ ࣮͸ݶք௿͍

    View full-size slide

  39. KANAZAWA
    https://github.com/dougmoscrop/serverless-plugin-split-stacks
    serverless-plugin-split-stacks

    View full-size slide

  40. KANAZAWA
    ՝୊ɿ΍Ήͳ͘σϓϩΠΛյ͢ඞཁ͕͋ͬͨ
    ɹɹɹEIP͕มΘΔˠΦϯϓϨͷઃఆมߋ͕ඞཁˠݏͳإΛ͞ΕΔ

    View full-size slide

  41. KANAZAWA
    https://github.com/SC5/serverless-plugin-additional-stacks
    serverless-plugin-additional-stacks

    View full-size slide

  42. KANAZAWA
    ՝୊ɿVPCʹೖΕͨLambda͸ىಈʢίʔϧυελʔτʣ͕஗͍
    ɹɹɹඇVPCͩͱ2ʙ3ඵ
    ɹɹɹVPCͩͱ9ʙ10ඵ

    View full-size slide

  43. KANAZAWA
    https://github.com/FidelLimited/serverless-plugin-warmup
    serverless-plugin-warmup

    View full-size slide

  44. KANAZAWA
    ՝୊ɿ։ൃ؀ڥ͚ͩඞཁͳϦιʔε

    View full-size slide

  45. KANAZAWA
    https://github.com/anantab/serverless-plugin-ifelse
    serverless-plugin-ifelse

    View full-size slide

  46. KANAZAWA
    custom:
    serverlessIfElse:
    - If: '"${self:custom.currentStage}" == “dev"'
    Exclude:
    - provider.role
    - provider.environment.ENV1
    - functions.func3
    - functions.func1.events.http.0.authorizer
    Set:
    provider.timeout: 90
    provider.profile: dev
    ElseExclude:
    - provider.environment.ENV2
    ElseSet:
    provider.timeout: 120
    https://github.com/anantab/serverless-plugin-ifelse/blob/master/README.md

    View full-size slide

  47. KANAZAWA
    serverless-merge-config
    serverless-webpack
    serverless-jest-plugin
    serverless-dynamodb-local
    serverless-offline
    serverless-aws-documentation
    serverless-iam-roles-per-function
    serverless-plugin-api-gateway-auth
    serverless-plugin-stage-variables
    serverless-plugin-split-stacks
    serverless-plugin-warmup
    serverless-scriptable-plugin
    serverless-plugin-additional-stacks
    serverless-es-logs
    serverless-plugin-ifelse
    serverless-kms-secrets
    serverless-plugin-package-json
    serverless-plugin-git-variables
    ར༻தͷϓϥάΠϯ

    View full-size slide

  48. KANAZAWA
    Serverlessͷ·ͱΊ
    • Serverless FrameworkͰAPI࡞੒͸ૉૣ͘Ͱ͖Δ
    • ࠔͬͨ࣌͸ϓϥάΠϯΛ୳͢
    • ࠷ऴखஈ͸CloudFormationςϯϓϨʔτ

    View full-size slide

  49. AWS Amplify ͷ֦ுੑ

    View full-size slide

  50. ଜ্խ඙ a.k.a @fossamgna

    View full-size slide

  51. AWS Amplifyͱ͸

    View full-size slide

  52. AWS Amplify ͱ͸
    “εέʔϧ͢ΔϞόΠϧΞϓϦ͓Αͼ΢Σϒ
    ΞϓϦΛ࠷଎Ͱߏங͢Δํ๏”
    KANAZAWA

    View full-size slide

  53. AWS Amplify ͷߏ੒
    CLIɿAmplifyͰΞϓϦΛߏங͢ΔͨΊͷπʔϧνΣʔϯ
    Cloud ServicesɿΞϓϦͷόοΫΤϯυ
    FrameworkɿϞόΠϧɺWeb޲͚ͷ֤SDK
    Developer ToolsɿCI/CD, ϗεςΟϯάɺϞόΠϧσόΠε
    ͷςετ؀ڥ
    KANAZAWA

    View full-size slide

  54. Amplify CLIͱόοΫΤϯυ

    View full-size slide

  55. Amplify CLIͷجຊίϚϯυ
    $ amplify init
    $ amplify add/remove/update
    $ amplify push
    KANAZAWA

    View full-size slide

  56. Amplify CLIͷΧςΰϦ
    Authentication
    (Cognito)
    Storage
    (S3, DynamoDB)
    API
    (API Gateway, AppSync)
    Function
    (Lambda)
    KANAZAWA
    Analytics
    (Pinpoint, Kinesis)
    Interactions
    (Lex)

    View full-size slide

  57. Amplify ͷΧελϚΠζ

    View full-size slide

  58. Amplify ͷΧελϚΠζํ๏
    •طଘΧςΰϦʔͷςϯϓϨʔτฤू
    •ΧελϜCloudFormationελοΫͷ௥Ճ
    •ϓϥάΠϯ
    KANAZAWA

    View full-size slide

  59. Amplify ΧελϚΠζͷࣄྫ
    • S3ʹΞοϓϩʔυ͞ΕͨϑΝΠϧʹରͯ͠
    CloudFrontͷॺ໊෇͖URLΛൃߦ
    • S3όέοτɺLambda͸CLIͰੜ੒ͨ͠Ϧιʔ
    εΛར༻
    KANAZAWA

    View full-size slide

  60. ΧελϜCloudFormationελοΫͷ௥Ճ
    1. CloudFormationςϯϓϨʔτϑΝΠϧͷ௥Ճ͢Δ
    2. amplify/backend/backend-config.jsonͷฤू͢Δ
    3. CLIʹ௥Ճͨ͠ϦιʔεΛೝࣝͤ͞Δ
    KANAZAWA

    View full-size slide

  61. CloudFormationςϯϓϨʔτϑΝΠϧͷ௥Ճ
    amplify/backend///ͱͯ͠഑ஔ͢Δ
    {
    "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"
    ],
    ….
    }
    }
    KANAZAWA

    View full-size slide

  62. amplify/backend/backend-config.jsonͷฤू
    {
    "privatecontent": {
    "usercontent": {
    "service": "CloudFront",
    "providerPlugin": "awscloudformation",
    "dependsOn": [
    {
    "category": "storage",
    "resourceName": "MediaContent",
    "attributes": [
    "BucketName"
    ]
    }
    ]
    }
    },
    "storage": {
    "MediaContent": {
    "service": "S3",
    "providerPlugin": “awscloudformation"
    }
    }
    KANAZAWA

    View full-size slide

  63. CLIʹ௥Ճͨ͠ϦιʔεΛೝࣝͤ͞Δ
    amplify env checkout Λ࣮ߦͯ͠௥Ճ͠
    ͨϦιʔεΛCLIʹೝࣝͤ͞Δ
    KANAZAWA

    View full-size slide

  64. Amplify CLIϓϥάΠϯ
    • Amplify CLI͸ϓϥάΠϯͱͯ͠ߏ੒͞Ε͍ͯΔ
    • ϓϥάΠϯʹ͸4ͭͷλΠϓ͕͋Δ
    • category
    • provider
    • frontend
    • util
    KANAZAWA

    View full-size slide

  65. Amplify CLIϓϥάΠϯͷ࡞੒
    • ϓϥάΠϯͷ਽ܗΛੜ੒͢ΔίϚϯυ͕༻ҙ͞ΕͯΔ
    • amplify plugin init
    • ϓϥάΠϯͷ໊લ΍λΠϓͳͲ͍͔ͭ͘ͷ࣭໰ʹ౴͑Δ
    ͱ਽ܗίʔυ͕ੜ੒͞ΕΔ
    KANAZAWA

    View full-size slide

  66. Amplify CLIϓϥάΠϯͷߏ੒
    ࠷খߏ੒ͷྫ
    |_my-amplify-plugin/
    |_commands/
    | |_ help.js
    | |_ version.js
    |
    |_amplify-plugin.json
    |_index.js
    |_package.json
    KANAZAWA

    View full-size slide

  67. ࣄྫͷAmplify CLIϓϥάΠϯ
    • CloudFrontΛߏ੒͢ΔͨΊͷϓϥάΠϯ
    • λΠϓ͸category
    • ΧελϜCloudFormationελοΫͷςϯϓ
    Ϩʔτ࡞੒ɺbackend-config.jsonͷฤू͕
    ϓϥάΠϯͷ࢓ࣄ
    KANAZAWA

    View full-size slide

  68. Amplify CLIϓϥάΠϯͷ࣮૷
    • ϓϥάΠϯ࣮૷΋ؔ͢Δ৘ใ͸·ͩ·ͩগͳ͍
    • https://github.com/aws-amplify/amplify-cliͷιʔε͕࣮૷ͷࢀߟʹͳΔ
    • amplify-cli/packages/amplify-cli/src/extensions/amplify-helpers ഑Լʹ͸
    ϓϥάΠϯΛ࣮૷͢Δͷʹ༗༻ͳϝιου͕ͦΖ͍ͬͯΔ
    KANAZAWA

    View full-size slide

  69. Amplify CLIͷΧελϚΠζͷ·ͱΊ
    • ΧελϜCloudFormationελοΫ
    • ྑ͍఺ɿຊདྷɺ௥Ճ͍ͨ͠ελοΫͱbackend-config.jsonͷฤूͷΈͰΧε
    λϚΠζͰ͖Δ
    • ΠϚΠνͳ఺ɿLambdaͷΑ͏ʹෳ਺ͷϦιʔεΛ௥Ճ͢ΔΑ͏ͳ৔߹͸࡞
    ۀ͕൥ࡶ
    • ϓϥάΠϯ
    • ྑ͍఺ɿෳ਺ͷϦιʔεΛ௥Ճ͢ΔΑ͏ͳ৔߹͸࡞ۀָ͕Ͱؒҧ͍Λى͜͠
    ʹ͍͘ɻ൚༻తͳΒଞϓϩδΣΫτͰ΋࢖͑ΔʢOSSʹͨ͠Γ΋Ͱ͖Δʣ
    • ΠϚΠνͳ఺ɿϓϩάϥϜΛॻ͘ඞཁ͕͋Δʢ࣮૷ίετ͕͔͔Δʣ
    KANAZAWA

    View full-size slide

  70. KANAZAWA
    Ҏ্

    View full-size slide