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.

Github Actions whereas helps to automate the deployment process. In this post, we cover out how Github's actions help to achieve the continuous integration part for our app, like say we only responsible for the code and commit the changes in our code repo and all rest are handle with GitHub actions workflow we define once.

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

After Installing we will configure our Frontend first, as we’re deploying the code to AWS we have to create a S3 Bucket for hosting. As we are using SLS we didn’t have to navigate to AWS console to create and configure the bucket, we simply create all those stuff using SLS as IAC (Infratsure as code). Before that let me showcase my folder structure.

Below is the code snippet, copy and replace in serverless.yml file:

# 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: ‘*’

Let’s just go through each stage define in the .yml file.

First Stage: Describes the name of the service for your resources and framework version.

Second Stage: general configuration, in this case, the name of the cloud provider and the region where you want to deploy these resources.

Third Stage: For this step, you have to install a package named serverless-s3-sync globally, creates a synchronization layer with your code. let’s say every time you deploy the code it will check and replace the updated code into your s3 bucket.

Fourth Stage: This is stage focused on creating a S3 bucket, configure it for web hosting, and create a public access policy for the bucket.

Next, we move to set up our Backend with SLS, just replace the below code in your serverless.yml. It basically creates a lambda function named jokes-generator that is pointing towards the index.js file inside the Backend folder, also added a trigger for our lambda i.e., and API Gateway listening to GET request.

#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.🙂

Now, if you have done all those set up let’s move further, so we have to run just a single command i.e.,

sls deploy

what does this command do, it will create and deploy all those resources you define in the .yml template into AWS you can verify all those resources just by navigating into your aws console. The below image depicts the success result for the — sls deploy cmd,

Now we’re all good to go if you follow my code, so just go to the newly created s3 bucket in the console and navigate below in the properties tab you will find the hosted s3 link for the website like in my case,

Bucket name: mern-serverless-buckets

Till now it's working fine, but not as we expected i.e., every time we change the code and want to deploy in the live server, we have to manually build the code and deploy with — sls deploy cmd, we want this to be automated for that we’ll now move to step 4 finally 😃.

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,

In short what this above image does, whenever you push the code into your branch master the actions will be triggered and do the following task, here most importantly you have to focus on the steps part. I’m not going much about deleted to the steps, you could analyze by yourself what exactly happening here, if not can check out here.

Now, finally, we have automated the process for our serverless mern app, next if you want to change some code, you can then commit the changes and push the code into the GitHub repo your set, all from will automatically be deployed to the live server, you can visit GitHub, navigate to actions tab on the repo and can further see the deployment process just like the below image,

Workflow Process

Hurray! 💪

We have implemented the automation layer to our serverless mern app with the serverless framework as continuous deployment and Github actions as continuous integration. let you know that it’s a simple configuration, but you could explore more and makes the hand dirty by implementing an extra layer from their official docs if required. you could check out the code repo used in this post here.