Deploy serverless mern app to AWS with SLS and Github actions

The purpose of writing the story is to understand how Github actions are used as Continous Integration(CI) and how with the help of SLS or Serverless Framework, we can implement Continous Deployment (CD) in our app. In this case, it’s MERN.

Prerequisites.

Before proceeding further, I assume you are a bit familiar with the mern stack, S3 web hosting, and Lambda. if not you can find it here. since I’ll more be focused on CI/CD part, but will share the code link at the end.

What’s we gonna be discussed?🧠

  1. ) In the Beginning, we’ll talk about what is SLS and Actions.
  2. ) After that, we will install SLS and configure the code with it.
  3. ) Then, we will deploy manually all to AWS Infrastructure.
  4. ) Next, set up Github Actions in the app.

Steps 1:

Let’s talk about the serverless framework now, It’s basically used for serverless deployment where you write code to define the infrastructure for your cloud resources in YAML format and helps you to achieve the continuous deployment part. want to read more, check on their official docs here.

Steps 2:

Now we have to install Serverless Framework into our machine. There are several ways you could install the SLS, depends on which code stack you using, for our case we will use npm to install,

npm install -g serverless
# First Stage
service: ci-cd-mern-jokesapp
frameworkVersion: ‘2’
# Second Stage
provider:
name: aws
runtime: nodejs12
stage: development
region: ap-south-1
# Third Stage
plugins:
- serverless-s3-sync
custom:
s3Sync:
- bucketName: mern-serverless-buckets
localDir: Frontend/build/
#Fourth Stage
resources:
Resources:
S3Bucket:
Type: AWS::S3::Bucket
Properties:
AccessControl: PublicRead
WebsiteConfiguration:
IndexDocument: index.html
ErrorDocument: error.html
BucketName: mern-serverless-buckets
BucketPolicy:
Type: AWS::S3::BucketPolicy
Properties:
Bucket: !Ref S3Bucket
PolicyDocument:
Statement:
- Action:
- ‘s3:GetObject’
Effect: Allow
Resource: ‘arn:aws:s3:::mern-serverless-buckets/*’
Principal: ‘*’
#Fifth Stage:
functions:
JokesGenerator:
handler: Backend/index.jokes_generator
name: jokes-generator
events:
- http: GET /
package:
exclude:
- Frontend/**

Step 3:

As of now, we have configured our Backend and Frontend with serverless Framework we’re good to go, Before proceeding further in this step I must assume that you have installed the serverless-s3-sync package globally and create a build for your react app, don't worry too much we’ll automate all this manual work in our next step.🙂

sls deploy
Bucket name: mern-serverless-buckets

Step 4:

This step purely focused on the Github Actions part simple and easy. so get into it. First thing you have to create a folder called .github in your root dir. inside it create workflows/deploy.yml so that when you push the code GitHub will recognize it and takes the actions further, deploy.yml file where you have to tell Github actions what actions to be performed for that let's just replace the configuration task from below image,

Workflow Process