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.

Transcript

1. Deploy web frontend apps with AWS CDK Masashi Tomooka Prototyping Engineer 2023-09-29
2. 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
3. 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.
4. 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
5. Agenda • What to consider when deploying web frontend with CDK • Several patterns to deploy web frontend with CDK • Demo 5
6. 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?
7. 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
8. 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?
9. Possible solutions 1. Deploy backend first, then build frontend locally 2. Fetch variables on runtime 3. Build frontend on deploy time 9
10. 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
11. 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
12. Possible solutions 1. Deploy backend first, then build frontend locally 2. Fetch variables on runtime 3. Build frontend on deploy time 12
13. 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
14. 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
15. 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
16. 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
17. 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)
18. 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
19. Thank you! Masashi Tomooka GitHub/𝕏: @tmokmss 19
20. Appendix 20
21. Deploy-time-build architecture 21