Deploying Your Next.js Application on a VPS
Deployment — A crucial part of development that most crash courses and tutorials leave out of their curriculum. It is one of the underrated skills and a must-have to become an all-round developer. Today we are going to see how to deploy a Next.js application on a VPS (Virtual Private Server).
You must be thinking, why not just deploy it on Vercel? It is so simple and seamless. But let me tell you, while Vercel is a well-liked option, you might prefer to test on your own VPS or you might not feel comfortable with a managed hosting company, and the costs on Vercel increase exponentially very quickly.
This article will be a total guide on how to deploy your Next.js application, set up Nginx as a proxy server, connect your domain to the Next.js app, get an SSL certificate using Certbot, and run it using PM2. So let’s get started.
Things to Have Beforehand
- Your own VPS
- A Next.js application
- Basic knowledge of SSH, Node.js, and basic Linux command-line usage
- Domain for your application (optional, you can check your app running directly on IP also)
Set Up Your VPS
-
Connect to VPS using SSH: Replace
your-vps-ip
with the IP address of your VPS.
ssh root@your-vps-ip
- Install Necessary Software
Update and Upgrade: Update the package list and upgrade installed packages to the latest versions.
sudo apt update
sudo apt upgrade -y
Install Node.js and npm: Install Node.js and npm on your VPS.
sudo apt install -y nodejs
Install PM2: PM2 is a process manager for Node.js applications. It keeps your app running and restarts it if it crashes.
sudo npm install -g pm2
Deploy Your Next.js Application
Here are three ways to deploy your application:
-
Transfer your application files to the VPS using SCP: Use the command below from your local machine’s terminal. Replace the paths as needed.
scp -r /path/to/your/nextjs-app root@your-vps-ip:/path/to/destination
-
Clone your application from a GitHub repository: If it is a public repo, clone directly (not recommended). For a private repo, generate SSH keys in your VPS and then copy the public key and put it in the keys section of your GitHub account to allow the VPS to clone your private repo using SSH.
git clone <Your repository link>
-
Create a new Next.js app on the VPS:
cd /path/to/your/nextjs-app npx create-next-app@latest myapp
Now that we have deployed our application, it’s time to set up a reverse proxy Nginx server and connect the domain to our application. Then at last, we will build our app and start it with PM2.
Set Up a Reverse Proxy with Nginx
-
Install Nginx: Install Nginx, a web server that can act as a reverse proxy.
sudo apt install nginx -y
-
Adjust our Firewall: To allow Nginx and traffic on ports 80 and 443.
sudo ufw allow 'Nginx HTTP' sudo ufw allow 'Nginx HTTPS' sudo ufw enable sudo ufw status
The status should show something like below:
Status: active To Action From -- ------ ---- OpenSSH ALLOW Anywhere Nginx HTTP ALLOW Anywhere OpenSSH (v6) ALLOW Anywhere (v6) Nginx HTTP (v6) ALLOW Anywhere (v6)
-
Check if Nginx has started:
systemctl status nginx
Verify by going to the IP of your VPS
http://your_vps_ip_address
on a browser; it should show the default Nginx page. -
Create Nginx Config: Create an Nginx configuration file to forward web traffic to your Next.js application.
sudo nano /etc/nginx/sites-available/nextjs-app.conf
Paste the below configuration and replace
your-domain.com
with your domain.
server { listen 80; server_name your-domain.com; location / { proxy_pass http://localhost: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; } }
Now delete the default config file:
sudo rm /etc/nginx/sites-enabled/default
Enable our configuration by creating a symbolic link and restarting Nginx:
sudo ln -s /etc/nginx/sites-available/nextjs-app.conf /etc/nginx/sites-enabled/ sudo systemctl restart nginx
Secure Your Application with SSL
Install Certbot with Snapd:
Install Snapd:
sudo apt install snapd
Ensure you have the latest Snapd version installed:
sudo snap install core; sudo snap refresh core
Install Certbot with Snapd:
sudo snap install --classic certbot
Create a symlink to ensure Certbot runs:
sudo ln -s /snap/bin/certbot /usr/bin/certbot
Obtain SSL Certificate with Certbot:
sudo certbot --nginx -d your_domain_name.com -d www.your_domain_name.com
Build Your Application and Start with PM2
Now that we have our app on the VPS, the domain connected with it, and SSL to secure it, it's finally time to build our Next.js app and get it running.
-
Go to your app and run the build command:
cd /path/to/your/nextjs-app npm run build
-
Start the application using PM2:
sudo pm2 start npm --name "myapp" -- start
-
Save the PM2 process and set up PM2 to start on boot:
sudo pm2 save sudo pm2 startup
-
Now go to your domain, and you will see your Next.js app running:
https://your-domain.com
Conclusion
Deploying your Next.js application on a VPS might seem challenging at first, but by following these steps, you can set up your server, install the necessary software, transfer your application, and secure it with HTTPS. This process gives you more control over your application and can lead to better performance and cost savings. Happy deploying!
Reference
Epilogue
Thank you for reading! If you have any feedback or notice any mistakes, please feel free to leave a comment below. I’m always looking to improve my writing and value any suggestions you may have. If you’re interested in working together or have any further questions, please don’t hesitate to reach out to me at fa1319673@gmail.com.
Top comments (0)