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.

Feb 20, 2025 - 05:33

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

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.