DevOps Labs : Guide to Setup Node.js 23, React, NestJS, Next.js, and Nginx on EC2 Ubuntu 24.04

Guide to Setup Node.js 23, React, NestJS, Next.js, and Nginx on EC2 Ubuntu 24.04

Table of Contents

• Install Node.js 23
• Setup React Application
• Install and Configure Nginx for React
• Setup NestJS and Next.js Applications
• Configure Nginx for NestJS and Next.js
• Start and Verify Applications
• Troubleshooting

---

Install Node.js 23

Step 1: Update and Install Dependencies

sudo apt update && sudo apt upgrade -y
sudo apt install -y curl gnupg2 lsb-release ca-certificates

Step 2: Add NodeSource Repository

curl -fsSL https://deb.nodesource.com/setup_23.x | sudo -E bash -

Step 3: Install Node.js 23

sudo apt install -y nodejs

Step 4: Verify Installation

node -v
npm -v

---

Setup React Application

Step 1: Install create-react-app and Create a Project

npx create-react-app my-react-app
cd my-react-app
npm install

Step 2: Start React Application

npm start

Default React app runs on port 3000.

---

Install and Configure Nginx for React

Step 1: Install Nginx

sudo apt install -y nginx

Step 2: Enable and Start Nginx

sudo systemctl enable nginx
sudo systemctl start nginx

Step 3: Configure Nginx Proxy for React

sudo nano /etc/nginx/sites-available/default

Replace with the following configuration:

server {
    listen 80;

    server_name your_domain_or_IP;

    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;
    }
}

Step 4: Test and Restart Nginx

sudo nginx -t
sudo systemctl restart nginx

---

Setup NestJS and Next.js Applications

Step 1: Install NestJS CLI and Create a New Project

npm install -g @nestjs/cli
nest new my-nest-app
cd my-nest-app
npm install

Step 2: Change NestJS Port to 4000

Edit src/main.ts and modify:

await app.listen(4000);

Step 3: Start NestJS Server

npm run start

Step 4: Setup Next.js Application

npx create-next-app@latest my-next-app
cd my-next-app
npm install

Step 5: Change Next.js Port to 3001

Modify package.json scripts:

"scripts": {
  "dev": "next dev -p 3001"
}

Step 6: Start Next.js Application

npm run dev

---

Configure Nginx for NestJS and Next.js

Step 1: Edit Nginx Configuration

sudo nano /etc/nginx/sites-available/default

Replace with:

server {
    listen 80;
    server_name your_domain_or_IP;

    location /react {
        proxy_pass http://localhost:3000;
    }

    location /nestjs {
        proxy_pass http://localhost:4000;
    }

    location /next {
        proxy_pass http://localhost:3001;
    }
}

Step 2: Test and Restart Nginx

sudo nginx -t
sudo systemctl restart nginx

---

Start and Verify Applications

Step 1: Start Applications

cd ~/my-react-app && npm start &
cd ~/my-nest-app && npm run start &
cd ~/my-next-app && npm run dev &

Step 2: Access Applications via Nginx

• React App: http://your_domain_or_IP/react
• NestJS App: http://your_domain_or_IP/nestjs
• Next.js App: http://your_domain_or_IP/next

---

Troubleshooting

1. Nginx Not Starting?

Check logs:

sudo journalctl -xe
sudo systemctl status nginx

2. React/NestJS/Next.js Not Running?

Check logs:

pm2 logs

Or restart manually:

node app.js 2>&1 | tee error.log

---

Conclusion

You have successfully:

• Installed Node.js 23.
• Set up React, NestJS, and Next.js applications.
• Configured Nginx as a reverse proxy.

If you face any issues, check logs and verify configurations.

---

🚀 Happy coding! 🚀