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

January 26, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

Transcript

  1. Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS

    Developer • AWS / Next.js / Serverless / shopify / … • 🐈 #JAWS-UG
  2. Next.jsඪ४ઃఆͷ ৔߹ • ϥϯλΠϜ: Nodejs12 (or later) • ߏ੒ίϚϯυ 


    yarn && yarn build • ։࢝ίϚϯυ 
 yarn start • ϙʔτ: 3000
  3. ઃఆͰ͖Δ಺༰ • CPU / ϝϞϦ / ؀ڥม਺ • Φʔτεέʔϧ •

    ϔϧενΣοΫ • Πϯελϯεϩʔϧ • KMSΩʔ • λά #JAWS-UG
  4. 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
  5. AWS Amplify (Next.js SSR/ISR)͸Lamnda@Edge • ಈ͖ͱͯ͠͸ɺserverless-nextjsʹ͍ۙʢͱ͍ΘΕ͍ͯΔʣ • Next.jsΛෳ਺ͷLamnda@EdgeʹσϓϩΠ • CloudFront

    - Lamnda@Edge - S3ߏ੒ʹͳΔ • ΤοδͰಈ͘ͷͰɺૣ͍ɻ ISR΋Ͱ͖Δɻnodejs14΋࢖͑Δ • ͨͩ͠Lamnda@Edgeͷ੍ݶʹनΘΕΔ #JAWS-UG
  6. 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
  7. Amplify -> serverless-nextjs -> App Runner • ӈʹߦ͘΄ͲAWSʹґଘ͠ͳ͘ͳΔ • Amplify͸CLI͕࡞ΔίʔυΛͲΕ͘Β͍ڐ༰͢Δ͔࣍ୈ͔΋

    • ݸਓతʹ͸not for meͳͷͰɺCDKͰࣗલ؅ཧத • CDKͰߏ੒؅ཧ͢Ε͹IAMͳͲͷઃఆΛTakeOver͠΍͍͢ #JAWS-UG
  8. 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