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

Deploy web frontend apps with AWS CDK

Masashi Tomooka
September 29, 2023

Deploy web frontend apps with AWS CDK

There are a few things to consider when building and deploying frontend applications with AWS CDK, such as embedding environment variables in static files. In this session, we will share lessons learned from several deployment patterns, and discuss which one is best for your particular situation.

Masashi Tomooka

September 29, 2023
Tweet

More Decks by Masashi Tomooka

Other Decks in Technology

Transcript

  1. About me Masashi Tomooka Prototyping Engineer @AWS Japan • Currently

    on parental leave 👶 Hobby contributor to CDK: • Improve CDK hotswap feature • AWS CDK Translator 2 GitHub/𝕏 : @tmokmss
  2. AWS CDK Translator TypeScript CDK code to Python/Java/etc. Completely run

    in your web browser powered by jsii-rosetta and WebContainer API 3 https://tmokmss.github.io/cdk-translator/ Disclaimer: it is my private project; I do not guarantee anything.
  3. Popularity of AWS CDK in Japan Monthly meetup with >

    150 attendees on average Topics: Sharing best practices, deep dive into CDK internals, and lessons learned from production use cases 4 Archives: https://www.youtube.com/results?search_query=jawsug_cdk Photo credit: @nikuyoshi
  4. Agenda • What to consider when deploying web frontend with

    CDK • Several patterns to deploy web frontend with CDK • Demo 5
  5. Problem - Deploy static frontend app • Focus on static

    (CSR) frontend, not SSR • Serve static files from S3 via CloudFront • Frontend client calls AWS resources directly for authentication etc. 6 API Gateway backend Cognito UserPool S3 Bucket CloudFront HTML / CSS JavaScript UserPool ID Client ID API Gateway URL Frontend static assets Problem: How to build and deploy these frontend static assets?
  6. Deploy-time values • Values only available on deployment time, not

    on synthesis time • e.g. most values accessed via construct’s properties • Not usable directly when you build a frontend app (constraint) 7
  7. Using AWS resources from client • Need to pass AWS

    resource attributes to frontend clients • e.g. Cognito user pool ID • Usually the attributes are injected during frontend build process • but they are now deploy-time values… 8 Example: Frontend JavaScript code (w/ Amplify Libraries) Problem: How to make these values available to your frontend client?
  8. Possible solutions 1. Deploy backend first, then build frontend locally

    2. Fetch variables on runtime 3. Build frontend on deploy time 9
  9. 1. Build frontend assets locally 10 Build frontend assets NEXT_PUBLIC_AWS_REGION=us-east-1

    \ NEXT_PUBLIC_USER_POOL_ID =xxxx \ … npm run build CDK synth/deploy npx cdk deploy CloudFormation deployment Assets deployed to S3 bucket (e.g. BucketDeployment) Deploy backend first, and build frontend locally with environment variables get those values from the deployed backend or create a .env file
  10. 1. Build frontend assets locally • Most straightforward approach •

    Lower cognitive load • Deployment needs multiple steps • Sometimes human-error prone • Manage env vars outside of CDK • using .env file / some shell script • Burden on setting up new env 11 $ npx cdk deploy BackendStack $ cd /frontend $ npm run build # inject env vars from the stack $ cd - $ npx cdk deploy FrontendStack 🟢 Pros 🔴 Cons Deploy backend first, and build frontend locally with env vars
  11. Possible solutions 1. Deploy backend first, then build frontend locally

    2. Fetch variables on runtime 3. Build frontend on deploy time 12
  12. 2. Inject env vars on runtime 13 Build frontend assets

    without environment variables npm run build CDK synth/deploy npx cdk deploy CloudFormation deployment Create runtime-config.json using deploy-time values Assets deployed to S3 bucket runtime-config.json runtime-config.json will be fetched from client on runtime
  13. 2. Inject env vars on runtime • Can deploy the

    entire system in a single step • Need to fetch variables on runtime • More code to manage • Slower initial page load 14 🟢 Pros 🔴 Cons Deploy a json containing deploy-time values, using BucketDeployment
  14. 3. Build frontend on deploy time 15 CDK synth/deploy npx

    cdk deploy CloudFormation deployment Assets deployed to S3 bucket (e.g. BucketDeployment) Build frontend assets NEXT_PUBLIC_AWS_REGION=us-east-1 \ NEXT_PUBLIC_USER_POOL_ID =xxxx \ … npm run build Frontend is now built on deploy time
  15. 3. Build frontend on deploy time • Build and deploy

    completes in a single CDK deployment • Build failure results in CFn rollback • More complexity on infrastructure 16 🟢 Pros 🔴 Cons Build frontend during deployment running a CodeBuild job https://github.com/tmokmss/deploy-time-build
  16. Summarized trade-offs 🟢 Pros 🔴 Cons #1. Build locally Simple

    and straightforward, easy to implement and understand Deployment requires two steps (Backend deploy -> Frontend build/deploy) #2. Runtime config Deploy completes in a single step Easy to build and deploy Requires specific logic in frontend Not ideal for runtime performance #3. Deploy-time build Deploy completes in a single step More complexity in infrastructure Build failure results in CFn rollback 17 * Other possible options: Use Amplify Hosting (fronend deployment managed outside of CDK) Build locally and deploy-time injection of environment variables (SST way)
  17. Key takeaways • Even for a simple static frontend deployment,

    there are several possible patterns to consider • Optimal path may vary with your use cases; evaluate the trade-offs • Understanding CDK-specific concepts like deploy-time value will help to use CDK more effectively 18 The code shown in demo is available here: https://github.com/tmokmss/deploy-static-web-frontend-with-cdk