This reference architecture has been provided by BASED EDGE LLC
This repo contains a sample reference AWS CDK stack for setting up a blue green deployed serverless distribution.
A sample React javascript application is (async) chunked by webpack with a distinct buildId included in the publicPath. The cdk stack deploys the web assets to S3 (using the buildId as a the subfolder) as well as update the edge lambda to a new version with the latest buildId. AWS Code Deploy then slowly switches traffic b/w the old lambda and the new lambda. As users visit the page, they will be progressively more likely to see the new version over the old version until the deployment successfully completes. To reduce origin latency for users far away from us-east-1, a route53 latency based TXT record is used to redirect the s3Origin request to the closet s3 bucket (that contains all the same assets).
If something were to go wrong with the latest assets, (ie: code bug), the code deployment would fail and revert to the old version. Since the javascript entry should never be cached, any users who were served the bad version will get the old version after reloading the page. The same rollback action could be manually performed if an issue was discovered after the deployment completed.
The major down side with this approach is having to invoke a lambda every time a user loads the widget. This can lead to incurring Lambda costs, depending the level of traffic the app receives. These costs can be lower (or more operationally acceptable) than running comparable server(s) 24/7. The contents of index.js are inlined directly into the edge lambda handler since it is small enough to fit inside the lambda without impossing a large cold start time. By moving the file into the edge lambda, we are able to avoid the s3 call all together (saving some ms and $$$). Using Route53 latency routing, the js chunk edge lambda was upgraded to redirect the origin request to the closest aws region + replicated bucket, to reduce distance based latency. Yet again, this introduces more (possible) line items to the AWS bill in terms of additional storage costs and DNS queries, but these should be pretty minor.
Alternatively, a hybrid or all-in approach with Cloudflare R2 could be considered.
For engineers that need to deploy javascript applications to many sites that they do not control, this is offered as one approach. Since they do not want to be beholden to many different deployment pipelines, this architecture allows them to deploy the javascript to a single distribution in a controlled and safe manner (slow rollout using blue green deployments ) and fully control the rollback if there were to be an issue without having to boss around all the different consumers.
Depending on an organization structure and/or priorities, host teams may not be interested in maintain a noticeable and ongoing operation cost of integrating your app into their site.
- install node 14+, set up local aws credentials for your test account
npm ito install all node js dependenciesnpm run buildto build local assetsnpm run cdk synthto set up your aws account for use with CDK- edit bin/main.ts to provide your domain + supported regions
npm run cdk deploy '*-EdgeBucketto create the edge bucketsnpm run cdk deploy MainStackto deploy the cdk stack and web assets (this should take some time due to cloudfront distribution creation time).- edit bin/main.ts again to provide the generated cloudfront origin access id for the s3 buckets
npm run cdk deploy '*-EdgeBucketto grant cloudfront access to the buckets
- basic post back metrics for alarms (have webapp have generate metrics for rollback alarm)
- client side alarm api gateway
- rollback alarm on deployment
copy assets to bucket closer to the edge, use route53 latency record to find closet to edge lambda, and redirect request to there
automated clean up of old assets pre-gzip web assets before upload to reduce traffic from s3 to cloudfront edge (need to see if s3 already does this?)
health check for s3 endpoint to allow redirecting traffic away from aws regions currently on fire (look at you, us-east-1).