Deploying a Frontend Application on Nginx and Configuring a Reverse Proxy

Nginx is a widely used web server that can serve static assets of frontend applications and act as a reverse proxy to forward client requests to backend services.

After building your Angular, React, or Vue project, the production files are placed in a dist (or similar) folder containing HTML, JavaScript, and CSS files ready for deployment.

Assuming Nginx is already installed on your Linux machine, you need to create a server block that points the domain (e.g., domain.com ) to the directory where the built files will reside.

Example server configuration:

server {
    server_name domain.com;
    location / {
        root /usr/share/nginx/html/domain;
        try_files $uri $uri/ /index.html;
    }
}

On Ubuntu, create a file under /etc/nginx/sites-available/domain.com , paste the above configuration, and enable it with a symbolic link:

sudo ln -s /etc/nginx/sites-available/domain.com /etc/nginx/sites-enabled/

Copy the contents of your dist folder into /usr/share/nginx/html/domain , then restart Nginx:

sudo systemctl restart nginx.service

To forward API calls (e.g., requests starting with /api ) to a backend running on localhost:8888 , add a proxy location inside the same server block:

location /api {
    proxy_pass http://localhost:8888/api;
}

The final combined server block looks like this:

server {
    server_name domain.com;
    location / {
        root /usr/share/nginx/html/domain;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://localhost:8888/api;
    }
}

After restarting Nginx, visiting http://domain.com will serve your frontend application, while API requests are proxied to the backend, providing a simple yet powerful setup.

In summary, Nginx can efficiently serve static frontend assets and act as a façade to proxy or balance traffic to backend services.