Creating an nginx reverse proxy server to serve localhost over SSL

You might have seen a lot of articles explaining how to create a proxy server but if you haven’t found one on how to create a reverse proxy server, which worked for you, here’s my take…

Photo credit: avinetworks.com

Spinning up a local server to build and test one’s site is something every developer does. However, there are instances when we need to serve our assets over https:// instead of the good ol’ http:// .

First things first, what is a reverse proxy server? As explained on NGINX’s site,

A reverse proxy server is a type of proxy server that typically sits behind the firewall in a private network and directs client requests to the appropriate backend server. A reverse proxy provides an additional level of abstraction and control to ensure the smooth flow of network traffic between clients and servers.

Simply put, on a localhost level, the reverse proxy decides which URL should a given request be routed to. You will see a practical example of it below.

1. Generating a self-signed SSL certificate

We need to generate a self-signed SSL certificate which would allow us to serve localhost over https. In order to run a secure server locally, two files are required: server.crt and server.key

For more information on how to generate them, please see the Generate a self-signed ceritficate section at this link: https://www.digitalocean.com/community/tutorials/openssl-essentials-working-with-ssl-certificates-private-keys-and-csrs

Just be mindful that within the article they use domain.crt and domain.key.

2. Setting up a nginx reverse proxy

Ensure that nginx is installed on your machine. If not, run: brew install nginx

Next, go to /usr/local/etc/nginx/nginx.conf and uncomment the block of code under ‘HTTPS Server’.

The server.crt and server.key we had created in the previous section will be referenced in our nginx.conf file. You want to ensure that these files’ relative paths are referenced correctly. The easiest solution to avoid any mistakes is to save the server.crt and server.key files in the nginx folder.

The block of code should look something like this:

# HTTPS server
server {
    listen 40444 ssl;
    server_name secure.localhost;
    ssl_certificate server.crt;
    ssl_certificate_key server.key;
    location / {
    proxy_pass http://localhost:8080/;
}

NOTE: In order to be able to use ‘secure.localhost’, make an entry within your /etc/hosts file like so:

127.0.0.1    secure.localhost

The proxy_pass routes the calls made from https://secure.localhost:40444 to http://localhost:8080.

Once done, you can test your changes by typing nginx -t in your console. You should see the following in your console:

nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful

Now, you can start the server by typing the following in the console:

sudo nginx

And stop the server by typing:

sudo nginx -s stop

NOTE: If the browser blocks the connection, please allow the website to be rendered, there are no security issues since it’s only intended for local development.

And there you have it. You should now be able to serve your localhost over https.

I hope you enjoyed this post. Let me know if you have any comments/suggestions about the post or would like me to write about a particular topic.

Ciao for now!