Nginx configuration for simple web application

simple-web-app.conf

#A reverse proxy is server component that sits between the internet and your web servers. 
#It accepts HTTP requests, provides various services, and forwards the requests to one or many servers.
#A reverse proxy can hide the topology and characteristics of your back-end servers by removing the need for direct internet access to them.

#This is basic Nginx configuration for reverse proxy for a simple web application.

#Configuration for Frontend
server {
    listen 80;
    server_name <Your Server Name>;
    add_header 'Access-Control-Allow-Credentials: true' always;
    location /frontend  {
        # location for frontend
        proxy_pass http://localhost:3000/;
        add_header 'Access-Control-Allow-Credentials: true' always;

    }
    location ~.*\.(css|js|jpg|svg|png|scss|webmainfest) {
        # Need to pay attention to two points: 1. The value of proxy_pass cannot have /, 2. It cannot have uri either
        # https://www.programmersought.com/article/42734863589/
        proxy_pass http://localhost:3000;
    }
}

#Configuration for Backend
server {
    listen 443;
    server_name <Your Server Name>;
    add_header 'Access-Control-Allow-Credentials: true' always;
    location /  {
        proxy_pass http://localhost:8108/;
        add_header 'Access-Control-Allow-Credentials: true' always;
    }

}