Config Nginx proxy with Webpack — Dev Env

Download and setup nginx server

Window: http://nginx.org/en/download.html

Linux: https://www.nginx.com/resources/wiki/start/topics/tutorials/install/

Mac: https://www.javatpoint.com/installing-nginx-on-mac

Setup configuration as below

worker_processes  2;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
  server {
    listen       80;
    underscores_in_headers on;
    location / {
        access_log on;
        proxy_pass http://localhost:8080;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /static/ {
        proxy_pass http://localhost:3001;
        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;
    }
    location /web-app-1/ {
         rewrite ^/web-app-1(/.*)$ $1 break;
         proxy_pass http://localhost:8090;
         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;
    }
    location /web-app-2/ {
        rewrite ^/web-app-2(/.*)$ $1 break;
        proxy_pass http://localhost:3001;
        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;
    }
    location /sockjs-node/ {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
    root   html;
  }
 }
}

Run check config file and start Nginx server

Linux Example:

nginx -t -c ${path}/aex.conf

start nginx -c aex.conf

Check nginx running : get-process | Where {$_.ProcessName -Like “nginx”}

Linux Example: https://www.nginx.com/resources/wiki/start/topics/tutorials/commandline/

Mac Example: https://www.javatpoint.com/starting-and-restarting-nginx

Step 4: Start application and recheck the Nginx server.

1. Start Server ( Port: 8080 )
2. Start web app 1 ( Port: 8090 )
3. Start web app 2 ( Port: 3001 )