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

Jamstack開発者のための App Runner入門

Jamstack開発者のための App Runner入門

JAWS-UG関西「コンテナ勉強会/App Runnerハンズオン(見るだけOK)もあるよ」登壇資料です。

Hidetaka Okamoto
PRO

January 26, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

Transcript

  1. Jamstack։ൃऀͷͨΊͷ


    App Runnerೖ໳
    JAWS-UG ؔ੢
    Hidetaka Okamoto 2022/1/27 #JAWS-UG

    View Slide

  2. Ԭຊलߴ


    @hide__dev
    • Stripe Developer Advocate


    • JS / TS Developer


    • AWS / Next.js / Serverless /
    shopify / …


    • 🐈
    #JAWS-UG

    View Slide

  3. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠

    View Slide

  4. Facebook “JP_Stripes” https://bit.ly/3G2Fh6D

    View Slide

  5. Agenda
    • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ


    • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ


    • AWS AmplifyͱAWS App RunnerɺͲ͕͍͍ͬͪʁ
    #JAWS-UG

    View Slide

  6. Agenda
    • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ


    • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ


    • AWS AmplifyͱAWS App RunnerɺͲ͕͍͍ͬͪʁ
    #JAWS-UG

    View Slide

  7. GitHubʹNext.jsͷϦϙδτϦΛ༻ҙ͓ͯ͘͠

    View Slide

  8. ϚωʔδϝϯτίϯιʔϧʹΞΫηε

    View Slide

  9. GitHubͷ৔߹͸ιʔείʔυϦϙδτϦΛબ୒

    View Slide

  10. GitHubʹΞϓϦΠϯετʔϧ

    View Slide

  11. ϦϙδτϦΞΫηεΛߜΔ͜ͱ΋Մೳ

    View Slide

  12. connectionͷ໊લΛ͚͓ͭͯ͘

    View Slide

  13. Connector / repo / branchࢦఆ

    View Slide

  14. σϓϩΠΛࣗಈʹ͢Δ͔ΛܾΊΔ

    View Slide

  15. ߏஙઃఆ΋GUI͚ͩͰ׬݁Ͱ͖Δʢίʔυ΋Մʣ

    View Slide

  16. Next.jsඪ४ઃఆͷ


    ৔߹
    • ϥϯλΠϜ: Nodejs12 (or later)


    • ߏ੒ίϚϯυ

    yarn && yarn build


    • ։࢝ίϚϯυ

    yarn start


    • ϙʔτ: 3000

    View Slide

  17. ίϯςφαʔϏεͷઃఆ

    View Slide

  18. ઃఆͰ͖Δ಺༰
    • CPU / ϝϞϦ / ؀ڥม਺


    • Φʔτεέʔϧ


    • ϔϧενΣοΫ


    • Πϯελϯεϩʔϧ


    • KMSΩʔ


    • λά
    #JAWS-UG

    View Slide

  19. ݸਓతཁνΣοΫϙΠϯτ
    • Φʔτεέʔϧͷ࠷େαΠζ͕σϑΥϧτ25


    • εέʔϧ։࢝ͷج४͸ಉ࣮࣌ߦ਺ʢ㲈ϦΫΤετ਺ʣ


    • DynamoDBͳͲʹΞΫηε͍ͤͨ͞ͳΒɺΠϯελϯεϩʔϧඞਢ


    • ઀ଓ͢ΔαʔϏε͕ଟ͍ͳΒɺ

    GUI͡Όͳ͘CDKͳͲͰߏ੒؅ཧΛਪ঑
    #JAWS-UG

    View Slide

  20. ઃఆΛϨϏϡʔͯ͠


    σϓϩΠ
    #JAWS-UG

    View Slide

  21. ଴ͭ

    View Slide

  22. τϥϒͬͨΒϩάΛݟΔ

    View Slide

  23. εςʔλε RunningʹͳΕ͹OK

    View Slide

  24. Agenda
    • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ


    • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ


    • AWS AmplifyͱAWS App RunnerɺͲ͕͍͍ͬͪʁ
    #JAWS-UG

    View Slide

  25. ެ։લʹ΍ΔͰ͋Ζ͏௥Ճ࡞ۀ
    • CloudFrontͰCDNΛઃఆ͢Δ


    • CloudFrontʹACMͰSSLূ໌ॻΛઃఆ


    • Route53ͰυϝΠϯΛઃఆ
    #JAWS-UG

    View Slide

  26. ACMʢSSLূ໌ॻʣ͸Ͳ͜ʹ͚ͭΔʁ
    • App RunnerͰ΋ূ໌ॻΛઃఆͰ͖Δ


    • CloudFrontʹ͚ͩઃఆͯ͠΋ಈ͖͸͢Δ༷ࢠ


    • ҆શੑΛͱΔͳΒCF / Runner྆ํͰ͚ͭͨ΄͏͕Α͍͔΋
    #JAWS-UG

    View Slide

  27. AWS CDKͰߏ੒؅ཧ͢Δͱָͦ͏
    new apprunner.Service(this, 'Service', {
    source: apprunner.Source.fromGitHub({
    repositoryUrl: 'https://github.com/aws-containers/hello-app-runner',
    branch: 'main',
    configurationSource: apprunner.ConfigurationSourceType.API,
    codeConfigurationValues: {
    runtime: apprunner.Runtime.PYTHON_3,
    port: '8000',
    startCommand: 'python app.py',
    buildCommand: 'yum install -y pycairo && pip install -r requirements.txt',
    },
    connection: apprunner.GitHubConnection.fromConnectionArn('CONNECTION_ARN'),
    }),
    });
    #JAWS-UG

    View Slide

  28. Agenda
    • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ


    • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ


    • AWS AmplifyͱAWS App RunnerɺͲ͕͍͍ͬͪʁ
    #JAWS-UG

    View Slide

  29. Q.


    AWS Amplify͡ΌͩΊͳͷʁ
    #JAWS-UG

    View Slide

  30. A.


    First Choice͸Amplify


    App Runnerͷग़൪΋͋Δ
    #JAWS-UG

    View Slide

  31. Why?
    #JAWS-UG

    View Slide

  32. AWS Amplify (Next.js SSR/ISR)͸[email protected]
    • ಈ͖ͱͯ͠͸ɺserverless-nextjsʹ͍ۙʢͱ͍ΘΕ͍ͯΔʣ


    • Next.jsΛෳ਺ͷ[email protected]ʹσϓϩΠ


    • CloudFront - [email protected] - S3ߏ੒ʹͳΔ


    • ΤοδͰಈ͘ͷͰɺૣ͍ɻ ISR΋Ͱ͖Δɻnodejs14΋࢖͑Δ


    • ͨͩ͠[email protected]ͷ੍ݶʹनΘΕΔ
    #JAWS-UG

    View Slide

  33. [email protected]ͷ੍ݶͰNext.jsͭΒ͍΍ͭ
    • ϩά΍ݺͼग़͠ݩͷϦʔδϣϯ͕҆ఆ͠ͳ͍


    • ΞΫηεͷ͋ͬͨϦʔδϣϯͷCLWʹϩά͕ग़Δ


    • AWS APIݺͼग़࣌͠ʹϦʔδϣϯࢦఆඞਢ


    • Lambdaʹ؀ڥม਺͕ઃఆͰ͖ͳ͍


    • σϓϩΠύοέʔδͷ༰ྔ͕࠷େ50MB(ΦϦδϯ)
    #JAWS-UG

    View Slide

  34. Ͳ͏͍͏Ҋ݅ͰAmplify͕ਏ͘ͳΔʁ
    • Next.jsͷAPIΛΰϦΰϦʹ࣮૷͢ΔλΠϓ


    • APIʹ؀ڥม਺Λ౉ͨ͘͠ͳΔͱɺͪΐͬͱͨ͠஋Ͱ΋SSMඞਢʹ


    • ґଘϥΠϒϥϦͷଟ͍େن໛ΞϓϦ


    • ϏϧυޙͷΞϓϦαΠζͷνΣοΫਪ঑


    • ίϯςφΠϝʔδͰ؅ཧ͍ͨ͠৔߹΋App Runner޲͚͔΋͠Εͳ͍
    #JAWS-UG

    View Slide

  35. serverless-nextjs΋CDK؅ཧͯ͠͠·͏ख΋͋Δ
    import { NextJSLambdaEdge } from "@sls-next/cdk-construct";
    import { Certificate } from "@aws-cdk/aws-certificatemanager";
    export class ServerlessNextjsCdkExampleStack extends cdk.Stack {
    constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);
    const app = new NextJSLambdaEdge(this, "NextJsApp", {
    serverlessBuildOutDir: "./build",
    domain: {
    domainNames: ["wp-kyoto.net"],
    certificate: Certificate.fromCertificateArn(
    this,
    "WPKYOTOACM",
    “arn:aws:acm:us-east-1:999999:certificate/123-456-789“
    ),
    },
    });
    #JAWS-UG

    View Slide

  36. Amplify -> serverless-nextjs -> App Runner
    • ӈʹߦ͘΄ͲAWSʹґଘ͠ͳ͘ͳΔ


    • Amplify͸CLI͕࡞ΔίʔυΛͲΕ͘Β͍ڐ༰͢Δ͔࣍ୈ͔΋


    • ݸਓతʹ͸not for meͳͷͰɺCDKͰࣗલ؅ཧத


    • CDKͰߏ੒؅ཧ͢Ε͹IAMͳͲͷઃఆΛTakeOver͠΍͍͢
    #JAWS-UG

    View Slide

  37. ·ͱΊ
    • AWSͰNext.js͸ɺͱΓ͋͑ͣAmplifyͰOK


    • ͨͩ͠serverless-nextjsབྷΈͷ੍໿ʹ᪴͘έʔεʹཁ஫ҙ


    • AmplifyͰಈ͔ͤͳ͘ͳͬͨΒɺApp Runner


    • App RunnerΛ஌Δ͜ͱͰɺʮ࣍ͷखʯ͕खʹೖΔ


    • ޙฤͷϫʔΫγϣοϓͰͥͻମݧͯ͠ΈΑ͏ʂ
    #JAWS-UG

    View Slide

  38. Stripe / Jamstack / WordPress <> AWS


    ొஃػձ୳ͯ͠·͢
    • Stripe Webhook -> AWS Step Functions / AppSync / etc…


    • Stripe SDK <> Lambda / Secrets Manager / AWS Amplify / etc…


    • AWS Amplify <> Next.js / Gatsby / Ionic / Capacitor / etc…


    • WordPress <> EC2 / Systems Manager / CloudFront / etc…
    #JAWS-UG

    View Slide