Deploy Reactjs Docker container on Ubuntu using GitHub Actions

 

Prerequisites:

1. An Ubuntu server with Docker installed.
2. In Firewall Allow Inbound Port (SSH-22) (Reactjs-3009)
3. A GitHub repository containing your React app.
4. A Docker Hub account (or a private registry).
5. SSH access to the Ubuntu server.

Step 1) Install Docker on Ubuntu

• 🔗 Click Here

Step 2) Create a Dockerfile on your Project

# Use Node.js as base image FROM node:20-alpine # Set working directory WORKDIR /app # Copy package.json and install dependencies COPY package.json ./ RUN npm install # Copy the rest of the application COPY . . # Build the React app RUN npm run build # Install PM2 globally RUN npm install -g pm2 #App will run on port no 3009 EXPOSE 3009 # Start the app with PM2 CMD ["pm2-runtime", "start", "server.js"]

Step 3) Configure GitHub Actions Workflow

• In your GitHub repo, go to .github/workflows/ and create a new YAML file:

name: Deploy React App on: push: branches: - main # Change this if your default branch is different jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Log in to Docker Hub run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin - name: Build and push Docker image run: | docker build -t ${{ secrets.DOCKER_USERNAME }}/react-app:latest . docker push ${{ secrets.DOCKER_USERNAME }}/react-app:latest - name: Deploy to Ubuntu server uses: appleboy/ssh-action@v0.1.6 with: host: ${{ secrets.EC2_HOST }} username: ${{ secrets.EC2_USER }} key: ${{ secrets.EC2_SSH_KEY }} script: | docker pull ${{ secrets.DOCKER_USERNAME }}/react-app:latest docker stop react-app || true docker rm react-app || true docker run -d -p 3009:3009 --name react-app ${{ secrets.DOCKER_USERNAME }}/react-app:latest

Step 4) Configure GitHub Secrets For Ubuntu SSH and Dockerhub

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
• DOCKER_USERNAME: Your DockerHub User Name
• DOCKER_PASSWORD: Your DockerHub Password

Step 5) Verify Deployment

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

Step 6) Configure Nginx on Ubuntu (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