Make Nginx help redirections in local development

Viewed 78

I have a website built in React. In my Mac, I could use yarn and PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start to launch the website in http://localhost:8000.

Now, I want to add Nginx to my Mac to simulate the environment of the production, especially for redirections. I just installed Nginx in my mac by brew, and here is /usr/local/etc/nginx/nginx.conf:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8080;
        server_name  localhost;

        location / {
            proxy_set_header    Host                $host;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto   $scheme;
            proxy_set_header    Accept-Encoding     "";
            proxy_set_header    Proxy               "";
            proxy_pass          http://localhost:8000/;

            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;
        }
    }

    server {
       listen       443 ssl;
       server_name  localhost;

       ssl_certificate      /etc/ssl/localhost/localhost.crt;
       ssl_certificate_key  /etc/ssl/localhost/localhost.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

       location ~ /google {                                                                                            
           proxy_pass  https://www.google.com;
       }

       location ~ /faceboook {                                                                                            
           rewrite ^ 'https://www.facebook.com' redirect;
       }

       location / {
            proxy_set_header    Host                $host;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto   $scheme;
            proxy_set_header    Accept-Encoding     "";
            proxy_set_header    Proxy               "";
            proxy_pass          https://localhost:8000/;

            proxy_http_version 1.1;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
       }
    }
    include servers/*;
}

The result is that, https://localhost:443 in the browser redirects to https://localhost/#/ and runs my website.

However,

  1. I always want the domain to be https://localhost:8000 rather than https://localhost:443 or https://localhost/.
  2. Additionally, I want https://localhost:8000/google to redirect to https://www.google.com and https://localhost:8000/facebook to redirect to https://www.facebook.com because of Nginx.

Does anyone know how to achieve this?

2 Answers

first I would run the application on port 8080, then this would do number 2

server {
        listen 8000 ssl;
        ssl_certificate      /etc/ssl/localhost/localhost.crt;
        ssl_certificate_key  /etc/ssl/localhost/localhost.key;
        location /{
            proxy_pass http://localhost:8080; # app runs on porn 8080
            # if backend has ssl enabled
            #proxy_pass https://localhost:8080;
            #proxy_ssl_verify              off;
        }

        location /facebook {
                  rewrite ^(/.*)$ https://www.facebook.com permanent;
        }

        location /google {
                  rewrite ^(/.*)$ https://www.google.com permanent;
        }
}

Fist you have to careful with the / (trailing slash) on the proxy_pass :

The configuration should look likes below :

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen 8000 ssl;
        server_name localhost;
        ssl_certificate      /etc/ssl/localhost/localhost.crt;
        ssl_certificate_key  /etc/ssl/localhost/localhost.key;
        
        root <PATH_TO_APPS>;
        index index.html;
        
        location / {
            try_files $uri $uri/ /index.html;
        }

        location /facebook {
            rewrite ^(/.*)$ https://www.facebook.com permanent;
        }

        location /google {
            rewrite ^(/.*)$ https://www.google.com permanent;
        }
    }

    server {
       listen       443 ssl;
       server_name  localhost;

       ssl_certificate      /etc/ssl/localhost/localhost.crt;
       ssl_certificate_key  /etc/ssl/localhost/localhost.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

       location / {
            return 301 https://localhost:8000;
       }
    }

    include servers/*;
}
Related