How to setup CI/CD with GitHub Actions for a React App with AWS EC2?

Here’s a tutorial on how to create a simple CI/CD with GitHub Actions for deploying React applications.

Getting started

GitHub Actions allows you to automate, customise, and execute software development workflows right in your GitHub repository.

A workflow is a configurable automated process made up of one or more jobs. You can configure your workflows to run when specific activity on GitHub happens, at a scheduled time, or when an event outside of GitHub occurs.

The workflow configuration is defined by a YAML file. GitHub provides preconfigured workflow templates.

Before we start on setting up the actions Github would require a few secrets to identify the EC2 instance.

Seeking the secrets

First, on your React App GitHub repository, navigate to the main page of the repository, click Settings.

Inside settings you’ll find actions which will contain repository secrets. These secrets are encrypted environment variables that we create in an organization repository, or repository environment.

CI/CD with GitHub Actions

Now is the chance to get back to our EC2 Dashboard to the respective instance and get the details for the instance in which we are going to deploy.

You can visit this to see how to setup EC2 instance for React Apps

We’ll start with the basics and define the host machine i.e IP of the instance. Click on the new repository secret and fill in the values..

Refer to the following table on how we do it.

DEPLOY_HOST Public IP of your EC2 instance
DEPLOY_KEY Copy paste the content from your pem file
DEPLOY_PORT 22
DEPLOY_TARGET Location for the folder in which files will be stored in the instance
DEPLOY_USERNAME ssh username for your instance

A small tip here, if you are deploying in the home location of your instance path to it would be /home/ubuntu/folder_name if you are on an Ubuntu Instance.

Defining the workflow process

CI/CD with GitHub Actions

Then, you’ll see suggestions of CI templates that are the best fit for your project. You can use workflow templates as a starting place to build your custom workflow.

In this case, click Set up this workflow, under the name of the template NodeJS.

CI/CD with GitHub Actions

Setting up the Workflow

Now there are two ways you can go around, you can choose from a predefined template provided by Github or set up your own workflow.

In this tutorial we are going to set up our own workflow. And don’t worry we’ll share our workflow here as well.

You can use this workflow code:

on:
  push:
    branches: [ dev ]
 
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 14.x to Build
      uses: actions/setup-node@v2
      with:
        node-version: 14.x
    - run: npm install
    - run: CI=false npm run build
    - name: ssh deploy on aws ec2
      uses: easingthemes/ssh-deploy@v2.1.4
      env:
        SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_KEY }}
        REMOTE_HOST: ${{ secrets.DEPLOY_HOST }}
        REMOTE_USER: ${{ secrets.DEPLOY_USER }}
        REMOTE_PORT: ${{ secrets.DEPLOY_PORT }}
        SOURCE: "build/"
        TARGET: ${{ secrets.DEPLOY_TARGET }}

name: Build React Files & Deploy to EC2 amazon

There are 2 events that trigger the workflow on push or pull request. The virtual environment used to run the workflow is an Ubuntu machine in the latest version.

In the steps section, 2 actions and 3 NPM scripts are being used. The first action actions/checkout@v2 is a standard that you must include in your workflow before other actions when your workflow requires a copy of your repository’s code. The second one, as the name suggests, it is a set up for Node.js, as you can see, the set up is made in different versions of Node.js, through an array with all the versions used.

After adding the deploy command on your workflow, click Start commit, and click Commit new file.

CI/CD with GitHub Actions

After commiting the code the pipeline should start running and it will start deploying the application. You can see the status of your workflow in the Actions tab

And the status of your workflow will be shown there.

Happy Coding 🙂

To learn more about the importants of CI/CD, do check out our blogs:

https://nyxwolves.com/ci-cd-pipelines-for-development-businesses-post-corona/

https://nyxwolves.com/web-development/ways-ci-cd-can-increase-your-productivity/

References:

· https://github.com/features/actions

case studies

See Our Case Studies

Contact us

Partner with Nyx Wolves

As an experienced provider of AI and IoT software solutions, Nyx Wolves is committed to driving your digital transformation journey. 

Your benefits:

What happens next?
1

We Schedule a call at your convenience 

2

We do a discovery and consulting meting 

3

We prepare a proposal 

Schedule a Free Consultation