Deploy React app to AWS EC2 using GitHub Actions

This article helps you understand how you can automatically deploy your reactjs application to AWS EC2 from GitHub

Sat Dec 03 2022

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-[email protected]
        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
Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from our records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email
Nikhil M
Nikhil M

Entrepreneur / Privacy Freak / Humanist / Blockchain / Ethereum / Elixir / Digital Security / Online Privacy

Tags Recent Blogs