Ask anything about this post!
This guide shows you how to deploy your full-stack Spring Boot, MySQL, and React app to a VPS, making it production-ready. You'll learn to configure NGINX, manage your React app with PM2, run your Spring Boot backend, and secure everything with HTTPS using Certbot. Get your application live and running efficiently with these practical steps!
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
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
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
}
]
}
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
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:
sudo apt update
sudo apt install python3-certbot-nginx
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
sudo nginx -t
If the test is successful, reload NGINX to apply the changes:
sudo systemctl reload nginx
This command ensures that Certbot will renew your certificates automatically when they are about to expire.
sudo systemctl enable certbot.timer
If the dry run completes without errors, you're all set. Certbot will handle certificate renewal automatically when necessary.
sudo certbot renew --dry-run
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.
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.
Thank you for reading our blog!
We have a Discord community where you can ask questions and get help from the community.
No comments yet. Be the first to share your thoughts!