Ask anything about this post!
In this guide, we'll walk through the process of hosting a Next.js app in production using NGINX and PM2. Follow these steps to get your Next.js app up and running smoothly.
Syntax:
ssh -p PORT USERNAME@HOSTIP
Example:
ssh -p 22 abhi@203.32.44.92
ssh root@194.87.34.23
First, let's ensure our server has the required packages installed. Open a terminal and run the following commands:
sudo apt update && sudo apt upgrade
sudo apt install nginx
sudo apt install git
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
npm install -g pm2@latest
Verify that all required softwares are installed:
nginx -v
node -v
npm -v
git --version
pm2 --version
Add PM2 Process on Startup:
sudo pm2 startup
Verify Nginx is Active and Running:
sudo service nginx status
Verify Web Server Ports are Open and Allowed through Firewall:
sudo ufw status verbose
If UFW Firewall is not enable you can enable it:
sudo ufw enable
sudo ufw allow http
sudo ufw allow https
sudo ufw allow ssh
Exit from Remote Server:
exit
Login to Your Domain Provider Website, Navigate to Manage DNS & Add Following Records:
| Type | Host/Name | Value |
|---|---|---|
| A | @ | Your Remote Server IP |
| A | www | Your Remote Server IP |
| AAAA | @ | Your Remote Server IPv6 |
| AAAA | www | Your Remote Server IPv6 |
There are two ways to do it:
Syntax:
scp -P Remote_Server_Port Source_File_Path Destination_Path
Example:
scp -P 1034 codebhaiya.zip abhi@203.32.44.92
Syntax:
ssh -p PORT USERNAME@HOSTIP
Example:
ssh -p 1034 abhi@203.32.44.92
ssh root@194.87.34.23
Syntax:
unzip zip_file_name
Example:
unzip codebhaiya.zip
Syntax:
ssh-keygen -t ed25519 -C "your_email@example.com"
If Permission Denied then Own .ssh then try again to Generate SSH Keys
Syntax:
sudo chown -R user_name .ssh
Example:
sudo chown -R abhi .ssh
Open Public SSH Keys then copy the key
cat ~/.ssh/id_ed25519.pub
Syntax:
git clone ssh_repo_path
Example:
git clone git@github.com:abhinayjangde/codebhaiya.git
Create Virtual Host File
Syntax:
sudo nano /etc/nginx/sites-available/your_domain
Example:
sudo nano /etc/nginx/sites-available/codebhaiya.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: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;
}
}
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/codebhaiya.com /etc/nginx/sites-enabled/codebhaiya.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.js
Write below code in ecosystem.config.js file
module.exports = {
apps : [
{
name: "myapp",
script: "npm start",
port: 3000
}
]
}
Restart Nginx
sudo service nginx restart
Start NextJS Application using pm2
pm2 start ecosystem.config.js
Save PM2 Process
pm2 save
Check PM2 Status
pm2 status
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 Next.js 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 Next.js application with HTTPS using Certbot, enhancing security and trust for your users.
Your Next.js app is now ready and running in production! NGINX is serving as a reverse proxy, forwarding requests to your Next.js server, and PM2 is ensuring your app stays up and running.
By following these steps and configurations, you can successfully deploy and host your Next.js application in a production environment. Happy coding!
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!