deploy a React.js project on AWS EC2 using GitHub Actions

Steps We Will Follow:

1.  Launch an ubuntu instance (aws/azure or anywhere)
2.  Allow Inbound Port (SSH-22) (HTTP-80) (Reactjs-3009) 
3.  Install and configure node packages on ubuntu
4.  Setup fresh react project on ubuntu (Optional)
5.  Push source code to github repository
6.  Configure github actions
7.  Configure github secrets for ubuntu ssh
8.  Verify the deployment
9.  Configure nginx webserver for reverse proxy (Optional)
   
   

Step 1) Launch an ubuntu instance (aws/azure or anywhere)

Step 2) Allow Inbound Port (SSH-22) (HTTP-80) (Reactjs-3009)

Step 3) Install and configure node packages on ubuntu

• sudo apt update -y
• sudo apt install -y nodejs build-essential vim curl
• wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
• source ~/.bashrc
• nvm install 20.18.3
• nvm alias default v20.18.3
• npm install -g pm2

Step 4) Setup fresh react project on ubuntu (Optional)

🚧 : Click Here

Step 5) Push Source Code To The GitHub Repository

• git add .
• git commit -m "Deploy React to EC2"
• git push origin main

Step 6) Configure GitHub Actions

• Create a GitHub Actions Workflow file in your React project.
• In your GitHub repo, go to .github/workflows/ and create a new YAML file:

name: Deploy React to AWS EC2 # Triggers the workflow automatically on a push to the main branch. (Mandatory) on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest #This fetches the latest code from the GitHub repository. (Mandatory) steps: - name: Checkout repository uses: actions/checkout@v3 # Install Node.js and Dependencies - name: Install Node.js and dependencies uses: actions/setup-node@v3 with: node-version: 20 cache: '' - run: npm install --no-lockfile - run: npm run build # Build React project #Securely copy files from GitHub to your EC2 instance. - name: Deploy to EC2 uses: appleboy/scp-action@master with: host: ${{ secrets.EC2_HOST }} username: ${{ secrets.EC2_USER }} key: ${{ secrets.EC2_SSH_KEY }} source: "*" #All github files will deploy target: "/var/www/html/" #Runs a remote SSH command to restart the server. - name: Restart PM2 uses: appleboy/ssh-action@master with: host: ${{ secrets.EC2_HOST }} username: ${{ secrets.EC2_USER }} key: ${{ secrets.EC2_SSH_KEY }} script: | cd /var/www/html/ /home/ubuntu/.nvm/versions/node/v20.18.3/bin/pm2 restart Frontend || /home/ubuntu/.nvm/versions/node/v20.18.3/bin/pm2 start server.js --name Frontend

Step 7) Configure GitHub Secrets For EC2 SSH

Go to your GitHub repository 👉 Settings 👉 Secrets and variables 👉 Actions 👉 New repository secret and add:

• EC2_HOST: Your EC2 public IP.
• EC2_USER: Your EC2 username (ubuntu)
• EC2_SSH_KEY: EC2 Pem File Or Your EC2 SSH key

Tip : If id_rsa file output doesn't work on github action so make sure you have associated id_rsa.pub with authorized_keys file.

Step 8) Verify Deployment

• Your React app should be live at http://ec2-public-ip:3009

Step 9) Configure Nginx on EC2 (Optional)

• sudo apt install nginx -y
• sudo nano /etc/nginx/sites-available/react-app

Add this:

server { listen 80; server_name public_ip-OR-domain; location / { proxy_pass http://localhost:3009; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }

Enable the config:

• sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
• sudo nginx -t
• sudo systemctl restart nginx

Restrict SSH Access to GitHub Actions IPs (Additional)

• Instead of opening SSH access to all (0.0.0.0/0), allow only GitHub’s runner IPs.

1️⃣ Get GitHub Actions IPs

curl -s https://api.github.com/meta | jq -r '.actions[]'

• Manually, you can find them in GitHub’s Actions Meta API: 👉 https://api.github.com/meta

2️⃣ Allow Only GitHub IPs in /etc/hosts.allow file