Check the instance http(80) and https(443) is open or not

1. Install Nginx

Update the package list:
```
  sudo apt update
```
Install Nginx:
```
  sudo apt install nginx -y
```

2. Check Nginx Status

Ensure Nginx is running:
```
  sudo systemctl status nginx
```
If it’s not running, start it:
```
  sudo systemctl start nginx
```

Enable Nginx to start on boot:

sudo systemctl enable nginx

Now you have 2 think to know:-

/var/www/html :- where you store the build folder(include index.html file)
/etc/nginx/sites-available/default :- where you configure or target the folder in config file

Step 1: Copy the Build Folder

Transfer your build folder to the Nginx root directory:
```
 sudo cp -r /path/to/your/build /var/www/html/
```
Verify the folder is copied correctly:
```
 ls /var/www/html/build
```

Step 2: Configure Nginx to Serve the Build Folder

Open the Nginx configuration file for editing:

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

Update the server block to point to the build folder:

 server {
     listen 80;
     listen [::]:80;

     root /var/www/html/build;
     index index.html;

     server_name _;

     location / {
         try_files $uri /index.html;
     }

     error_page 404 /index.html;
 }

try_files $uri /index.html ensures routing works for single-page applications (SPAs).

Save and close the file.

Step 3: Test and Reload Nginx

Test the configuration:
```
 sudo nginx -t
```
- If there are errors, fix them before proceeding.
Reload Nginx to apply the changes:
```
 sudo systemctl reload nginx
```

Step 4: Check File Permissions

Ensure the Nginx user has permission to access the build folder:
```
 sudo chmod -R 755 /var/www/html/build
```

Step 5: Verify the Application

Access your application in the browser using your public IP:
```
 curl http://<your-public-ip>
```

Other Advance thing

{frontend is running on public ip i don't know about backend i thing it is also running but developer said this" host the backend on main domain - maindomain.com and frontend on subdomain app.maindomain.com "}

Step 1: Configure Nginx for Frontend (Subdomain `app.flipchat.link`)

For the frontend (React, Angular, etc.), you need to serve it from the app.flipchat.link subdomain.

Update Nginx Configuration for Frontend: Assuming you already have the frontend built and placed in the dist folder, configure Nginx to serve the frontend on app.flipchat.link.

Open the Nginx configuration for app.flipchat.link (if the file doesn’t exist, you can create one):
```
 sudo nano /etc/nginx/sites-available/app.flipchat.link
```

Configure the Nginx Server Block for the Frontend: Add the following configuration to serve the frontend:

 server {
     listen 80;
     listen [::]:80;

     server_name app.maindomain.link;

     root /var/www/html/dist;  # Path to your frontend build folder
     index index.html;

     location / {
         try_files $uri $uri/ /index.html;
     }

     error_page 404 /index.html;  # Redirect 404 to index.html
 }

Create a Symlink to Enable the Site: Enable the site by creating a symbolic link to the sites-enabled directory:
```
 sudo ln -s /etc/nginx/sites-available/app.flipchat.link /etc/nginx/sites-enabled/
```
Restart Nginx to Apply Changes:
```
 sudo systemctl restart nginx
```

Now, your frontend should be accessible at http://app.flipchat.link.

Step 2: Configure Nginx for Backend (Main Domain `flipchat.link`)

Next, you need to set up Nginx to serve the backend on the main domain (flipchat.link).

Create or Update Nginx Configuration for Backend: Open the Nginx configuration for flipchat.link:
```
 sudo nano /etc/nginx/sites-available/flipchat.link
```

Configure the Server Block for the Backend: Here's an example of how to configure Nginx to serve the backend (assuming the backend is running on a local port like 5000):

 server {
     listen 80;
     listen [::]:80;

     server_name maindomain.link;

     location / {
         proxy_pass http://localhost:5000;  # Proxy requests to your backend running on port 5000
         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;
     }
 }

Replace localhost:5000 with the correct address and port for your backend. If your backend is running on a different server or port, update accordingly.

Create a Symlink to Enable the Site:

 sudo ln -s /etc/nginx/sites-available/flipchat.link /etc/nginx/sites-enabled/

Restart Nginx to Apply Changes:
```
 sudo systemctl restart nginx
```

Now, your backend should be accessible at http://maindomain.link.

Step 3: Verify DNS Configuration

Make sure that both maindomain.link and app.maindomain.link are correctly pointing to your server’s IP address. You need to configure the DNS settings for these domains/subdomains:

For the main domain (maindomain.link), add an A record pointing to your server's IP address.
For the subdomain (app.maindomain.link), add a subdomain record (CNAME or A record) pointing to your server’s IP address as well.

You can usually configure these DNS settings through your domain registrar's control panel.

Step 4: Test the Setup

Frontend: Visit http://app.maindomain.link to make sure the frontend is loading.
Backend: Visit http://maindomain.link to make sure the backend API is accessible (you can test it using Postman or your browser).

How to serve a website by NGINX