Nginx reverse proxy for ReactJS, Vuejs,Laravel and Django with or without Docker

Nginx is an important piece on the working chain apps so that it works as bridge between the end user and the application servers, to do that we will be using nginx as a reverse proxy

to know more in deep about nginx reverse proxy go to https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

let's suppose you have a domain name called yourdomainame.com

Nginx - ReactJS/Vuejs

each time you need to create a new domain name, set it on the path /etc/nginx/conf.d/ create a file with vim or nano or whatever you want, and give it the domain name .conf and set the settings on it, this is really useful when you start handling several domain names under the same server

vim /etc/nginx/conf.d/yourdomainame.com.conf

server {         server_name  yourdomainame.com wwww.yourdomainame.com;         # Load configuration files for the default server block.         include /etc/nginx/default.d/*.conf;         location / {             root /usr/share/nginx/html/reactproject/build;             try_files $uri /index.html;             expires -1;         } }

these setting work for both ReactJS and VueJS, this is in the case you only need running a frontend app without any backend

Nginx - ReactJS/Vuejs with SpringBoot without Docker

let's suppose you have backend in SpringBoot, and you have got to main prefix endpoints for your backend /api and /login and it is running over the 7078 port then you would need to do

server {         server_name  yourdomainame.com wwww.yourdomainame.com;         # Load configuration files for the default server block.         include /etc/nginx/default.d/*.conf;         location / {             root /usr/share/nginx/html/reactproject/build;             try_files $uri /index.html;             expires -1;         }               location /api {                           proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 proxy_pass http://localhost:7078;         }         location /login {                           proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 proxy_pass http://localhost:7078;         } }

Nginx - ReactJS/Vuejs with SpringBoot with Docker

Let's suppose you have got already your project running with Docker, and the backend keeps working in the 7078 port  and let's suppose you you have working an nginx frontend ReactJS or VueJS docker container running in the 81 port, and you don't want to set SSL to the docker nginx, but you rather preffer having an nginx before the container docker nginx as reverse proxy for your frontend app and backend app

server {         server_name  yourdomainame.com wwww.yourdomainame.com;         # Load configuration files for the default server block.         include /etc/nginx/default.d/*.conf;         location / {                       expires -1;                 proxy_set_header Host      $host;                 proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-Proto  $scheme;                 proxy_redirect              off;                 proxy_read_timeout          1m;                 proxy_connect_timeout       1m;                 proxy_pass http://localhost:81;       }               location /api {                           proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 proxy_pass http://localhost:7078;         }         location /login {                           proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 proxy_pass http://localhost:7078;         } }

Nginx - Django with Docker

Let's suppose you have got already a django project running with Docker over the port 8000 and you don't want to set SSL to the docker nginx, but you rather preffer having an nginx before the container docker nginx as reverse proxy for your frontend app and backend app

server {         server_name  yourdomainame.com wwww.yourdomainame.com;         include /etc/nginx/default.d/*.conf;         location / {                 proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 expires -1;                 proxy_pass http://localhost:8000;         } }

Nginx - Django restframework with ReactJS/VueJS with Docker 

Let's suppose you have got already a django restframework project running with Docker over the port 8000 and let's suppose you have working an nginx frontend ReactJS or VueJS docker container running in the 81 port and you don't want to set SSL to the docker nginx, but you rather preffer having an nginx before the container docker nginx as reverse proxy for your frontend app and backend app

server {         server_name  yourdomainame.com wwww.yourdomainame.com;         # Load configuration files for the default server block.         include /etc/nginx/default.d/*.conf;       location / {                       expires -1;                 proxy_set_header Host      $host;                 proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-Proto  $scheme;                 proxy_redirect              off;                 proxy_read_timeout          1m;                 proxy_connect_timeout       1m;                 proxy_pass http://localhost:81;         }         location /api {                 proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 proxy_pass http://localhost:8000;         } }

Nginx - Laravel - NuxtJS using Docker

it is the same concept, if you have got your backend running for instance in the 8001 port and the front running in the 3000 both of the running over docker, but you do not want to set SSL to the docker container image for the frontend, instead of that you preffer having an nginx behind like in the main the server, then you should something like this 

server {       server_name  yourdomainame.com wwww.yourdomainame.com;       location /api {                 proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                 proxy_set_header HOST $http_host;                 proxy_pass http://localhost:8001;       }       location / {                 expires -1;                 proxy_set_header Host      $host;                 proxy_set_header X-Real-IP $remote_addr;                 proxy_set_header X-Forwarded-Proto  $scheme;                 proxy_redirect              off;                 proxy_read_timeout          1m;                 proxy_connect_timeout       1m;                 proxy_pass http://localhost:3000;       } }

Note: SSL can be handle through many ways, with AWS, CloudFlare or manual buying the certificates with many companies, this one is quite well https://www.namecheap.com/security/ssl-certificates or you can handle the SSL in an automatic way with certbot tool, I like a lot certbot so that it makes everything for me just giving it the email administrator and the domain name and that's it !, it makes the redirections in the nginx config file which the domain is, just running:

certbot certonly --noninteractive --agree-tos --cert-name ${SITE_TLD} -d ${SITE_DOMAIN_ONE} -d ${SITE_DOMAIN_TWO} -m ${SSL_EMAIL}

certbot --nginx --noninteractive --agree-tos --cert-name domainname.com -d domainname.com -d www.domainname.com -m webmaster@domainname.com

NOTE: so having this said, it is assumed you will set the SSL to your domain name over the possible ways you want to get, if you prefer using AWS or CloudFlare do not set SSL to the nginx unless you want to secure the traffic between the load balancer and your instance, if you want to use it in a manual way then you've got the option about buying the SSL or using certbot