End to end testing every commit is a challenge solved with serverless preview environments. Traditionally only select environments like "integration" and "UAT" could be fully tested, because apps required deployment tooling. Using modern serverless cloud solutions, you can deploy and host every commit, providing immediate PR feedback on feature branches and discovering problems long before they're merged.

1. Serverless Preview
Environments to the Rescue
test every commit
Joseph Lust mabl engineer @lustcoder

2. About Me: Joseph Lust
Engineer
■ Building the web for two decades
■ Cloud native since 2011
■ Currently building mabl testing cloud on GCP
■ Co-organizer GDG Cloud Boston Meetup
@lustcoder

3. Why end 2 end UI test every commit?
■ Rapid developer feedback
▲ Push and forget
■ Visually intractable PRs
▲ Review pixels, not CSS files
■ Confidence on merging to master
▲ Break feature branches, not master
3
* for React Single Space Applications (SPAs)

4. Why Not?
■ Deployments are slow
■ So many domains/networks!
■ So many servers!
■ So many environments!
■ So much $$$$
4

5. Serverless to the rescue
■ Deployments are slow
■ So many domains/networks!
■ So many servers!
■ So many environments!
■ So much $$$$
5
Wow, such serverless

6. Why serverless just works
■ No Provisioning
■ Transparent Scaling
■ Pay only for Use
6

7. Solving the domains/networking problem
■ You don’t need separate domain/networking per app/version
▲ Even if your SPA expects to be at the root path
■ Use a wildcard domain!
▲ Only one DNS entry ever needed!
▲ One IP address for everything!
■ Map your app and version into the domain
7
a32df28-accounting.preview.acme.com
● a23df28 ← Git Commit (version)
● Accounting ← App Name

8. Solving the deployment problem
■ Forget about servers
■ Forget about containers
▲ They’re huge!
■ Drop your SPA artifacts in a bucket
▲ e.g. Google Cloud Storage
▲ or AWS S3
▲ or Azure Storage
8

9. gsutil -m cp -r -Z -a public-read .
gs://my-previews/${APP_NAME}/${APP_HASH}/
“deploy” in 5 seconds
cli

10. Solving the server problem
■ Why do you need a server?
■ SPAs only need basic URL rewriting
■ Use a trivial nginx server to rewrite the URLs for ALL apps
■ Run your container on a serverless provider
▲ e.g. Cloud Run or Google Compute Engine
▲ Don’t need Kubernetes
10

11. nginx URL rewriter
Dockerfile
FROM nginx
COPY html /usr/share/nginx/html
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/nginx.conf

12. nginx URL rewriter config
nginx.conf
server_name
"~^(?<app_hash>[a-f0-9]{7})-<?<app_name([^.]+)>.preview.acme.com$"
location / {
rewrite ^/$ /$app_name/$app_name/$app_hash/index.html last;
}
location /${app_name} {
proxy_pass https://storage.googleapis.com/my-previews;
}

13. Just add eye balls 👀
■ GitHub webhook to trigger on each build completion
▲ Everyone can see your preview environment!
▲ You can point your tests @ the preview environment
■ Just use a serverless Cloud Function webhook to send messages
13

14. Summary: from the top
1. CI/CD builds the commit
2. Push artifact to bucket
3. Use app/commit centric URL
▲ e.g. email, Slack, Pull Request comment
▲ Fire E2E UI Tests!
e.g. https://741004b.preview-dev.mabl.com
14

15. Questions?