A Complete Guide to Deploying a React, Node.js, and MySQL Application on a VPS

A Complete Guide to Deploying a React, Node.js, and MySQL Application on a VPS

Article:

Deploying a full-stack application with React (frontend), Node.js (backend), and MySQL (database) on a VPS ensures a secure, scalable, and performant solution. This guide provides a comprehensive step-by-step process for deploying your application on a VPS.

Prerequisites

1. A VPS server with root access (Ubuntu-based server recommended).
2. A domain name (optional but preferred).
3. Installed software on your local system:
   • Fully developed React and Node.js application.
   • MySQL database setup.
4. Required server software:
   • Node.js
   • Nginx
   • MySQL server
   • PM2 (for Node.js process management)

Step 1: Set Up the VPS

1. Log in to the VPS:
   Use SSH to connect to your server.
   bash
   ssh root@your_server_ip
2. Update System Packages:
   bash
   sudo apt update && sudo apt upgrade -y
3. Install Node.js:
   bash
   curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt install -y nodejs
4. Install Nginx:
   bash
   sudo apt install nginx
5. Install PM2:
   bash
   sudo npm install -g pm2
6. Install MySQL:
   bash
   sudo apt install mysql-server

Step 2: Set Up the MySQL Database

1. Secure MySQL Installation:
   bash
   sudo mysql_secure_installation Follow the prompts to set up a root password and secure MySQL.
2. Create a Database and User:
   Log in to the MySQL server:
   bash
   sudo mysql -u root -p Create a database, user, and grant privileges:sql
   CREATE DATABASE your_database_name; CREATE USER 'your_username'@'%' IDENTIFIED BY 'your_password'; GRANT ALL PRIVILEGES ON your_database_name.* TO 'your_username'@'%'; FLUSH PRIVILEGES; EXIT;
3. Allow Remote Access (Optional):
   Edit the MySQL configuration to allow external connections:bash
   sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf Find the line bind-address = 127.0.0.1 and replace it with:iniCopy codebind-address = 0.0.0.0 Restart MySQL:bash
   sudo systemctl restart mysql

Step 3: Upload Your Application to the VPS

1. Transfer Files:
   Use scp or FileZilla to upload your application files:
   bash
   scp -r /local/path/to/project root@your_server_ip:/var/www/your-app
2. Navigate to the Project Directory:
   bash
   cd /var/www/your-app

Step 4: Configure the Backend (Node.js)

1. Install Dependencies:
   Navigate to the backend directory and install required packages:bashCopy codecd backend npm install
2. Configure Environment Variables:
   Create a .env file for your environment variables:bashCopy codenano .env Add the database credentials and other settings:
   env
   DB_HOST=localhost DB_USER=your_username DB_PASS=your_password DB_NAME=your_database_name
3. Start the Backend with PM2:
   bash
   pm2 start index.js --name "backend" pm2 save pm2 startup

Step 5: Configure the Frontend (React)

1. Build the React App:
   Navigate to the React directory and build the app:
   bash
   cd frontend npm run build
2. Move Build Files:
   Copy the React build files to the Nginx web directory:
   bash
   sudo cp -r build/* /var/www/html

Step 6: Configure Nginx

1. Edit Nginx Configuration:
   Create a new Nginx configuration file:
   bash
   sudo nano /etc/nginx/sites-available/your-app Add the following configuration:nginx
   server { listen 80; server_name your_domain_or_ip; root /var/www/html; index index.html index.htm; location /api/ { proxy_pass http://localhost:5000/; # Backend URL 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; } location / { try_files $uri /index.html; } }
2. Enable the Configuration:
   Link and test the configuration:
   bash
   sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl restart nginx

Step 7: Secure Your App with HTTPS

1. Install Certbot for SSL:bashCopy codesudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d your_domain
2. Auto-Renew Certificates:
   Add a cron job for certificate renewal:bashCopy codesudo crontab -e # Add the following line 0 0 * * * certbot renew --quiet

Step 8: Test Your Application

• Frontend: Visit your domain or server IP (http://your_domain_or_ip).
• Backend: Test API routes via Postman or a browser (http://your_domain_or_ip/api).
• Database: Ensure data flows between the application and the MySQL database.

Conclusion

By following these steps, you can successfully deploy a React, Node.js, and MySQL application on a VPS. This setup provides a robust, secure, and scalable solution for production environments. Regularly monitor the server’s performance, implement backups, and update software to maintain reliability.