Deployment of Nextjs Application.
You can follow this article as well.
https://medium.com/bina-nusantara-it-division/how-to-deploy-your-next-js-apps-on-linux-server-using-nginx-and-pm2-65834cfecd37
https://codebhaiya.com/blog/how-to-point-domain-and-host-a-next.js-app-in-production-on-an-ubuntu-vps
My searching on BlackBox Ai
Chat Blackbox: AI Code Generation, Code Chat, Code Search
Step 1.
Setup Node environment on server
Now we will start installing following packages using commands
-sudo dnf install nodejs npm git
After successful installations check these packages versions to verify.
Note: For installing latest/specific version on nodejs. we will use mvn package.
this is github official installation guide
https://github.com/nvm-sh/nvm
By using nvm command we can install nvm package. Its a Node Version Manager
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
To verify run command
-nvm //hit enter
If it not found than close the terminal and re-login
-nvm install node
Step 2.
Get pull of git project on your server.
you can go to your directory
.cd root
By this command your project will be download from your git repository to your server directory.
Inside root: -git pull your-project-url.git
Step 3.
Go to the project root directory. Install node module in your project.
-npm install
or install latest on os recommend while npm install
npm install -g npm@10.8.3
Now test the app my this command
-npm run dev
You app will run on local host at 3000 port.
Step 4
Install NGINX web server
dnf install nginx
Start NGINX
sudo systemctl start nginx
sudo systemctl status nginx
start nginx as an service
systemctl enable nginx
Configuration of virtual hosting
Step 5
NGINX configuration
go to /etc/nginx/conf.d directory
open conf.d directory and create a file with the name of <project_name>.conf
Add this configuration in this file.
Now here is the important this to under stand.
This is Next App that we are going to deploy. The next app can run directly through nginx. It must be run as an service in localhost at some port. Normally we run this next project on 3000 port.
What this configuration will do, it take the coming request from api url and redirect the request to the
localhost:3000 url. Basically with this configuration is working as a reverse proxy.
server {
listen 80;
listen [::]:80;
server_name 203.128.6.46;
location / {
# reverse proxy for next server
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;
}
}
save this file with name of <project_name>.conf
Step 6
Run Next app as an service using pm2 package.
pm2 is the third party service that we use to run any program/app as an background service.
-npm install -g pm2
Now run your application. Go to the project root directory than run this command.
-pm2 start npm --name "react-todo-app" -- run preview //for react app
To run my app
-pm2 start npm --name 'bsms_frontend_app' -- run start //for next app
Note:
Run the backend Nodejs(express) app with same command
-pm2 start npm --name "bsms_backend_service_app" -- run start
The App will start with the name of 'bsms_frontend_app'.
Step 7
Now reload the nginx
-systemctl reload nginx
Hit the url to check: You will definitely find live your app now ;)
Step 8
Big Challenge for me here!
In case the on hitting url you cant find your app to live or you get some error on 503 Bad gateway. Than there is the problem you have to configure and sort.
The error i face:
Go to the var/log/nginx directory where you will find error.log file.
-cat error.log or -tail -n 100 error.log
Get to know the what is the error you have.
What error i find in this file?
Permission Denied: The connect() function failed to connect to 127.0.0.1:3000 due to permission denied (error code 13). This suggests that the Nginx process (PID 1206913) does not have the necessary permissions to connect to the upstream server at 127.0.0.1:3000.
here is the solution.
1) check in the /etc/nginx/default.conf file, the server block code.
you have to mention your server ip in server block code.
2) I'm providing the Stackoverflow link to fix this problem.
3) This link is very important to clear the understanding and building concept.
Comments
Post a Comment