Serverless Microfrontends in AWS

Tram Ho

In today’s article, I will show you how to use AWS’s Serverless technique to host and serve Microfrontends for frontend applications.

Today, the development of Microfrontends for web applications is becoming more and more popular. As we all know, keeping frontends as small as microsfrontends, it has ups and downs. Besides, managing the lifecycle and implementing them is a challenge.

But you already know Serverless technology yet? If you have heard of this, have you ever considered using Serverless technology to overcome these challenges?

Here is the architecture for the Serverless solution:

In this article, we will learn how to use AWS’s Serverless technology to host and serve our Microfrontends.

One small note : To keep the UI consistent across different microfrontends and to save development time, I recommend sharing and reusing user UI components using tools like Bit (Github).

Hosting Microfrontends

In contrast to using containers for Microfrontends, the best alternative in AWS is to use Amazon Simple Storage Service (S3). Using Amazon S3, we can store all of our UI static assets, including HTML, JavaScript, CSS, Fonts & etc. One of the main advantages of using Amazon S3 is the basis The infrastructure below provides 99.99% of the high availability to service our Microfrontends by default.

But there is one limitation. You can only store them (not SSR ) on Amazon S3.

However, it is suitable for most modern frontend frameworks such as Angular, ReactJS, VueJS, you can use them to build Microfrontends.

A few tips for using S3 for Microfrontends

  • Use separate buckets for each Microfrontend – this will help you keep each Microfrontend’s life cycle separate. It will also let you set permissions for each group of objects with a higher level of granularity.
  • Do not serve Microfrontends directly with Static Site Hosting – when distributing Microfrontends from Amazon S3, using Static Site Hosting will public frontend your frontend to everyone around the world without any control attached such as. geographic processing. Besides, it will force you to use cross-origin request sharing (CORS) without exposing the entire application in use by a single domain.
  • Ensure that upload of software is independent of Amazon S3 buckets that store Microfronends – use separate Amazon S3 buckets to upload files from the web application, in addition to using buckets allocated to Microfrontends.
  • Use separate buckets for each version – when implementing Microfrontends, back up each deployment package in a separate bucket. Keeping backup versions of deployments will allow us to restore or deploy the previous version if there are any problems. However, using the built-in Amazon S3 versioning feature can complicate things for Microfrontends because each file in the bucket is versioned separately.

Serve and caching Microfrontends

Amazon CloudFront is one of the core-services that play a number of roles when serving Microfrotends to the outside world. One of the obvious features we get is the ability of Content Delivery Networking ( CDN ) to cache Microfrontends closer to the end-user. In addition, Amazon CloudFront also provides a gateway to route requests to different Microfrontends. This feature is quite useful because we can route both Microfrontend and Microservice requests in one place, eliminating the need for separate gateway services.

Useful Amazon CloudFront Features for Microfrontends

  • Content delivery networking (CDN) – allows caching of static content closer to the end user, increasing Microfrontend loading speed.
  • Gateway and Routing – Configuration routing to route incoming browser requests depending on the URL (Advanced routing possible with [email protected] )
  • Web Security Firewall – Provides web application firewall connectivity with minimal configuration for security.
  • Dynamic HTML Creation – Allows adding dynamic content to Microfrontends with Amazon [email protected] For example, you can modify the HTML delivered through Amazon CloudFront by writing some code.
  • Provide content with geographical redundancy – Provides geographical redundancy serving the Microfrontends with high availability.
  • SSL Termination – the only external access point that allows setting up a free SSL certificate using AWS Certificate Manager (ACM) as well as terminating the SSL.

Deployment Lifecycle of Microfrontends

When using Amazon S3 and CloudFront together, you need to consider deactivating the CloudFront cache for each deployment, unless you create a new filename for each new deploy.

If necessary, CloudFront buffers can be deactivated using the CloudFront CLI commands. These commands you can execute during build for each new deployment.

In addition, it is essential to consider managing Microfrontneds’ high availability during the deployment process. Let’s take a look at the following steps that we can use for deploy:

  1. Add a new files -> Invalidate CloudFront cache -> Delete the old files
  2. Delete the old files -> Add new files -> Invalidate CloudFront cache

In this particular case, the first sequence takes precedence over the second, with the second sequence potentially downtime if a customer accesses Microfrontend during deploy.

Document source: https://medium.com/@baphemot/whats-server-side-rendering-and-do-i-need-it-cb42dc059b38 https://blog.bitsrc.io/serverless-microfrontends-in- aws-999450ed3795

Share the news now

Source : Viblo