CI/CD Deployment for Frontend & Backend using GitHub Actions, PM2, and Nginx on Ubuntu

1. Setting Up the Ubuntu Server

• Update and upgrade the system packages.
• Install Nginx, Node.js, npm, and Git.
• Install PM2 globally for process management.
• Check if Nginx is running and enable it to start on reboot.

2. Backend Setup with PM2

• Clone the backend repository from GitHub.
• Navigate to the backend directory.
• Install dependencies using npm.
• Start the backend application using PM2.
• Save the PM2 process list and configure it to start on reboot.
• Verify that the backend is running.

3. Configuring Nginx for Backend & Frontend

• Open the default Nginx configuration file.
• Update the configuration to serve the frontend and proxy API requests to the backend.
• Test the Nginx configuration for errors.
• Restart Nginx to apply changes.

4. Frontend Deployment

• Clone the frontend repository from GitHub.
• Navigate to the frontend directory.
• Install dependencies using npm.
• Build the frontend application.
• Move the build files to the Nginx web directory.

5. Automate Deployment with GitHub Actions

• Create a .github/workflows directory in the repository.
• Add a new GitHub Actions workflow file for automation.
• Define steps for checking out the repository, setting up Node.js, and deploying via SSH.
• Configure backend deployment to pull the latest changes, install dependencies, and restart the application.
• Configure frontend deployment to pull the latest changes, build the project, and move files to the web directory.

6. Configure GitHub Secrets

• Navigate to GitHub repository settings.
• Add repository secrets for the server IP, username, and SSH private key.

7. Testing the CI/CD Pipeline

• Push a change to the repository’s main branch.
• Verify that the GitHub Actions workflow is triggered.
• Ensure deployment is completed without errors.

8. Debugging & Logs

• Check Nginx logs for potential errors.
• Use PM2 logs to debug backend issues.
• Review GitHub Actions logs for workflow execution details.

This is a structured step-by-step guide without any code, perfect for copying into your blog without formatting issues. 🚀