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 Slide

  2. ˕


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

    View Slide

  3. View Slide

  4. Copyright©2016 Poppendieck.LLC
    2017

    View Slide

  5. 2018

    View Slide

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

    View Slide

  7. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. KANAZAWA
    https://serverless.com

    View Slide

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

    View Slide

  28. 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 Slide

  29. KANAZAWA

    View Slide

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

    View Slide

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

    View Slide

  32. KANAZAWA

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. 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 Slide

  41. KANAZAWA
    ͜Ε͚ͩ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. 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 Slide

  52. 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 Slide

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

    View Slide

  54. AWS Amplify ͷ֦ுੑ

    View Slide

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

    View Slide

  56. AWS Amplifyͱ͸

    View Slide

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

    View Slide

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

    View Slide

  59. Amplify CLIͱόοΫΤϯυ

    View Slide

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

    View Slide

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

    View Slide

  62. Amplify ͷΧελϚΠζ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. 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 Slide

  67. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  75. KANAZAWA
    Ҏ্

    View Slide