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.
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
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.
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.
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/
