Deploy React app to AWS EC2 using GitHub Actions

In a previous article we have discussed how to Deploy to AWS EC2 using GitHub Actions. After a few months someone reached out and asked me to support him to deploy react app to AWS using GitHub actions.

This article helps you understand how you can automatically deploy your react js code to AWS EC2 from GitHub using GitHub Actions.

Automatically Deploy React JS Application to AWS EC2 using GitHub Actions

Follow the steps from our previous article Deploy to AWS EC2 using GitHub Actions to understand how to invoke GitHub actions on every git push and take your code to requires EC2 instance.

Now we want to execute commands in the server to build and publish the ReactJS application.

Execute ssh commands in EC2

We are going to use appleboy/ssh-action to execute custom ssh commands in the server.

Please note appleboy/ssh-action will only support Linux docker container.

name: Remote ssh command
on: [push]
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Executing remote ssh commands using ssh key
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST_DNS }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            cd ~/YOUR/TARGET/DIR
            yarn/npm install
            yarn/npm build
            yarn/npm i serve
            serve -p 3000 build/

Here we are doing the following steps

1. Logging into the remote server using ssh key
2. Moving to react app folder
3. Building the react app using yarn/npm build
4. Installing serve globally to serve build folder
5. Serving the build/ folder from port 3000