Hello, everyone. I want to share how we can deploy our Frontend and Backend applications in this article. I used React.js on the Frontend and Nest.js on the Backend side.
First of all, I want to explain these terms;
Web Hosting: Web hosting is an online service that makes your website’s content accessible online. When you purchase a hosting plan, you rent space on a physical server to store all the website’s files and data. I will use Hostinger in this article, but you can use other web hosting services like DigitalOcean, Contabo, etc.
Nginx: Ngnix is open-source web server software designed to handle many connections simultaneously. It is a web server but is commonly used as a reverse proxy. It can be scaled efficiently as a web server and a reverse proxy. Ngnix also helps establish a secure connection between your data centers and the outside network. It works well as an HTTP load balancer that allows you to use multiple load-sharing mechanisms.
PM2: PM2 is an advanced process manager for NodeJS applications that allows you to start, control, or stop your node processes quickly. It runs as a daemon on the server and will ensure your app is available 24/7. Therefore, I will run our backend on the server using the PM2 command.
Installing Nginx
First, I connect my remote Ubuntu server with SSH and run these commands.
sudo apt update
sudo apt install nginx
After these commands, Ubuntu starts Nginx. The server should already be up and running. Open your browser and navigate to your server’s IP address to access the default Nginx landing page to confirm that the software is running correctly.
Configuring Nginx
Before the Nginx configuration, let’s clone our application to the /var/www/your_domain folder. You can initialize and set up the app in this directory, or you can clone the app from GitHub. I cloned it because my app already exists in my GitHub.
Nginx on Ubuntu has one server block enabled by default that is configured to serve documents out of a directory at /var/www/
Then, let’s update the Backend .env file.
APP_PORT=3000
APP_URL=http://your_ip_address
BE_APP_URL=http://your_ip_address
And then, let’s update the Frontend .env file.
VITE_PORT=3001
VITE_APP_URL=http://your_ip_address
VITE_BASE_API_URL=http://your_ip_address/api
Note: I did set a global prefix to my Nest.js app in start.ts using this command: app.setGlobalPrefix('api')
And then, let’s build our Backend and Frontend applications.
Now, we can continue to configure the Ngnix. Let’s run this command and open the Nginx config file.
sudo nano /etc/nginx/sites-available
We can configure it like this;
server {
listen 80;
listen [::]:80;
root /var/www/your_domain/app/web/dist; #it's a build folder the frontend app
server_name your_domain your_ip_address;
location / {
try_files $uri /index.html;
}
location /api {
proxy_pass http://your_ip_address:3000;
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;
}
}
Next, let’s enable the file by creating a link from it to the sites-enabled directory, which Nginx reads from during startup:
ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled
/etc/nginx: The Nginx configuration directory. All of the Nginx configuration files reside here.
/etc/nginx/sites-available/: The directory where per-site server blocks can be stored. Nginx will not use the configuration files in this directory unless linked to the sites-enabled directory. Typically, all server block configuration is done in this directory and then enabled by linking to the other directory.
/etc/nginx/sites-enabled/: The directory where enabled per-site server blocks are stored. Typically, these are created by linking to configuration files in the sites-available directory.
Let’s test to make sure that there are no syntax errors in any of your Nginx files:
sudo nginx -t
And restart the nginx to enable our changes.
sudo systemctl restart nginx
Nginx should now be serving your Frontend app. You can test this by navigating to http://your_domain, or http://your_domain
Let’s serve the Backend
I’m installing the PM2 with NPM and starting the backend app.
pm2 start app.js
npm install pm2@latest -g
pm2 start /var/www/your_domain
And let’s check the process using the pm2 ps command.
Some definitions were sourced from this website https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04
Top comments (2)
I followed the guide to deploy my React.js frontend and Nest.js backend with Nginx, but I ran into quite a few problems. The Nginx installation seemed fine, but when it came to setting up the reverse proxy and making sure both the front end and back end were working, nothing went as planned. The configuration to handle /API routes kept failing, and PM2 wasn’t picking up my backend app correctly, even after multiple restarts. I spent hours troubleshooting, and it still didn’t work right. I wish there was more clarity on setting up the reverse proxy with Nginx and PM2 for apps like mine.
If you're facing similar issues, I recommend checking out the Guide on How to Install Nginx on Ubuntu 24.04. It was helpful for understanding some basic Nginx configuration steps and helped me resolve some of the issues I was dealing with.
I followed the guide to deploy my React.js frontend and Nest.js backend with Nginx, but I ran into quite a few problems. The Nginx installation seemed fine, but when it came to setting up the reverse proxy and making sure both the frontend and backend were working, nothing went as planned. The configuration to handle /API routes kept failing, and PM2 wasn’t picking up my backend app correctly, even after multiple restarts. I spent hours troubleshooting, and it still didn’t work right. I wish there was more clarity on setting up the reverse proxy with Nginx and PM2 for apps like mine.
If you're facing similar issues, I recommend checking out this guide on how to install Nginx on Ubuntu 24.04. It was helpful for understanding some basic Nginx configuration steps and helped me resolve some of the issues I was dealing with."
Let me know if you need any further adjustments!