How to Point Domain and host a Spring Boot + MySQL and React app in Production on VPS

6: Configuring NGINX

Create Virtual Host File

Syntax:

sudo nano /etc/nginx/sites-available/your_domain

Example:

sudo nano /etc/nginx/sites-available/codeakstra.com

Write following Code in Virtual Host File

server{
    listen 80;
    listen [::]:80;
    server_name your_domain www.your_domain;
    location / {
        proxy_pass http://localhost:4173;
        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 Virtual Host or Create Symbolic Link of Virtual Host File

Syntax:

sudo ln -s /etc/nginx/sites-available/virtual_host_file /etc/nginx/sites-enabled/virtual_host_file

Example:

sudo ln -s /etc/nginx/sites-available/codeakstra.com /etc/nginx/sites-enabled/codeakstra.com

Check Configuration is Correct or Not

sudo nginx -t

7: Setting Up React.js App

Now, let's prepare our Next.js app. Navigate to your project directory and execute the following commands:

cd ~/project_folder_name

Install Dependencies

npm install
npm run build

8: Configuring PM2

Create pm2 config File inside project folder

nano ecosystem.config.cjs

Write below code in ecosystem.config.cjs file

module.exports = {
    apps : [
        {
            name: "myapp",
            script: "npm run preview",
            port: 4173
        }
    ]
}

9: Finally

To enable specific environment profile in springboot production project use this command:

java -jar yourproject.jar --spring.profiles.active=prod

Now Create two script with following commands.

start.sh

#!/bin/bash
nohup java -jar yourproject.jar --spring.profiles.active=prod > ~/projects/log.txt 2>&1 &
echo $! > ~/projects/pid.file
stop.sh
kill $(cat ~/projects/pid.file)

Run start script

sudo ./start.sh

Congratulation project is now running on you given port in project config file.

Start ReactJSs Application using pm2

pm2 start ecosystem.config.cjs

Save PM2 Process

pm2 save

Check PM2 Status

pm2 status

Restart Nginx

sudo service nginx restart

Now you can make some changes in your project local development VS Code and Pull it on Remote Server (Only if you have used Github)

Pull the changes from github repo

git pull
npm run build
pm2 reload app_name/id

Using Certbot for HTTPS

Securing your Next.js application with HTTPS is crucial for protecting sensitive data and ensuring user trust. Certbot is a widely used tool for obtaining and managing SSL/TLS certificates from the Let's Encrypt Certificate Authority. Follow these steps to set up HTTPS for your Next.js app using Certbot:

Step 1: Install Certbot

sudo apt update
sudo apt install python3-certbot-nginx

Step 2: Obtain SSL Certificate

Follow the prompts to provide an email address for renewal reminders and agree to the terms of service. Certbot will handle the certificate issuance and configuration for NGINX.

sudo certbot --nginx -d codebhaiya.com

Step 3: Verify HTTPS Configuration

sudo nginx -t

If the test is successful, reload NGINX to apply the changes:

sudo systemctl reload nginx

Step 4: Automate Certificate Renewal

This command ensures that Certbot will renew your certificates automatically when they are about to expire.

sudo systemctl enable certbot.timer

Step 5: Verify Renewal

If the dry run completes without errors, you're all set. Certbot will handle certificate renewal automatically when necessary.

sudo certbot renew --dry-run

Step 6: Test HTTPS Connection

Finally, test your Spring Boot + Reactjs application over HTTPS to ensure that everything is working correctly. You can do this by navigating to your domain in a web browser and verifying that the connection is secure. By following these steps, you can secure your Spring Boot application with HTTPS using Certbot, enhancing security and trust for your users.

Conclusion

In conclusion, deploying your Spring Boot + MySQL and React application on an Ubuntu VPS can be a seamless process when following these comprehensive steps. By accessing your remote server, installing necessary packages, configuring MySQL, transferring your project, setting up your domain, configuring NGINX, and preparing your React app, you ensure that your application runs efficiently and securely. Additionally, using PM2 for process management and Certbot for HTTPS ensures that your app is not only operational but also secure. Follow these guidelines to get your full-stack application live, providing a robust and secure experience for your users.