Nginx is popular web server used to serve static resources of the web app (client sources). I will explain how to setup Nginx as the static content resources web server and how to configure it as the reverse proxy (connect client with backend) on Linux system. Basically how to setup frontend + backend with the Nginx on Linux. You will find it helpful if you:

  • want to put your Angular/React/Vue or any other frontend based framework application on Nginx;
  • want to connect the client on Nginx with backend (e.g. Node.js or Java app);
  • want to delegate domain calls to inner web server, for example working on other port (proxy);

Frontend app on Nginx

If you develop frontend application using any framework like Vue, Angular or React you finally produce the production package – the files (html, js, css) ready to be deployed on the web server. In most framework running the production build will be something like npm build or for example while using Quasar for Vue: quasar build. Your production files should be in the dest folder generated in the project folder.

Files (frontend application) generated in the destfolder are ready to be put on the web server like Apache or Nginx.

I assume that you have Nginx installed on the destination machine (like your server machine).

Nginx frontend app configuration

Nginx configuration can be found under /etc/nginx. Main config file is called nginx.conf. Depends of your system configuration can be a little bit different:

  • whole config in nginx.conf file (like in for example Arch linux)
  • main config in nginx.conf, domain configurations split per domain (like in Ubuntu, domain configuration can be found insites-available folder

Let’s assume that your domain is domain.com. You want to setup your frontend application under http://domain.com (default 80 port).

The configuration for nginx is given:

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

If your configuration is based on nginx.confonly (e.g. Arch linux):

Paste above config in http section in the nginx.conf

If you are using Ubuntu:

  1. In /etc/nginx/sites-available create file domain.com (simply touch domain.com)
  2. Paste above config to the file
  3. Go to /etc/nginx/sites-enabled and invoke: sudo ln -s /etc/nginx/sites-available/domain.com /etc/nginx/sites-enabled/

Next step is to provide frontend app content to the nginx resources folder. First build your frontend app (e.g. npm build depending  of your setup). Then move every file/folder created in the dist folder of your frontend app to the /usr/share/nginx/html/domain (you must create the domain folder under /usr/share/nginx/html).

Last step: sudo systemctl restart nginx.service

Visting now http://domain.com should render your frontend application.

Connecting backend

Using Angular/Vue/React probably you was working on dev server which was reloading your code after change and was also proxying your requests to the backend. Now similar proxy configuration configuration must be provided in the Nginx config.

Let’s assume that all requests you are doing from client to the backend had /api prefix e.g. get('/api/myWallet') are doing requests to the localhost:8888/api/myWallet backend server. Your configuration may be different but generally this is how it usually works.

All we want to do now is setup nginx to proxy every domain.com/api/* requests to the localhost:8888. This is the config:

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

Paste this config to the server {} section (which you defined above).
Finally it should look like:

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 all: sudo systemctl restart nginx.service

Summary

Nginx is powerful tool and in simple scenario can handle static resources of frontend web app with the possibility of proxying the requests to the backend server – what is all we need. Actually we get something like facade to the server which can be setup to filter or even balance the traffic.

devops english frontend nginx