Serverless React / Gatsby website with Go backend on AWS Lambda

This article describes an Incipience template, its components, as well as considerations used to make the architectural decisions.

You can build a production-ready web-site with this template using Incipience generator.

Build a web-site using this template

When you start a new project, the first question that you need to answer is what stack of technologies will be used in the new project.

In this article we will consider one of the answers to this question.

Let’s assume that you need to build a pretty common set-up used by a majority of Internet projects:

• Publicly available web site with marketing materials and potentially some blog
• Project dashboard area available only to authenticated users.

This set-up splits into the following major components:

1. Public front-end
2. Front-end dashboard application
3. Authentication and back-end API

From the SEO perspective it’s important that public front-end and the dashboard are hosted under the same domain. Whereas the back-end API can be hosted under a different domain name (e.g. a subdomain).

Many people prefer to join front-end and back-end applications under the same domain name, same project and same code repository.

Such set-up has some benefits, however, there are arguments why we prefer to separate them, especially in large applications:

1. We fully de-couple independent pieces of architecture. The front-end developer can mock the back-end API in their tests;
2. Such a de-coupling gives us freedom of moving the back-end between platforms, cloud providers, implementation languages, versions, etc. For example, you can easily switch your API to/from Serverless, from Go to nodeJs or Pyton, etc.
3. You can have independent build/test/release cycles for these independent components.

For the sake of conciseness, this article is splitted into the following sub-articles, for each of the above components:

1. Serverless website with Gatsby static content generator
2. Dashboard web app with React, Redux and Reactstrap
3. Golang service on AWS Lambda with Cognito authentication

Architecture

The following diagram demonstrates the cloud architecture generated by this template.

Frontend

The frontend is served by a CloudFront handling requests for

1. public website
2. dashboard
3. authentication

Both public website and the dashboard application are served from the same S3 bucket. Authentication logic is implemented as a set of Lambda functions integrated with Cognito.

Backend

The backend API is served by an API Gateway backed by a set of Lambda functions. Lambda functions store information in DynamoDB. The backend API uses Cognito to authorize API calls.

Lambda@Edge

The are two Lambda@Edge functions: One Lambda is to add proper security headers to the documents; The other Lambda is to help CloudFront to serve default paths.

CI/CD

From other other side of the diagram we have a deployment flow. Changes to each of the code repositories trigger CodePipeline running CodeBuild.

For static content the pipeline builds the website and uploads it to S3. Backend API pipeline builds Golang code, runs unit tests, uploads artifacts to S3, packages SAM template and then submits the resulting template to CloudFormation.

This CloudFormation is responsible for building major parts of the infrastructure: Lambda functions, DynamoDb storages, IAM, etc.