Nexjs App deployment on Red hat Server

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.