Dev.to on your own domain xyz.com.

Disclaimer: This post is only meant for educational purposes & nothing else.

In the video you can see I am able to access the dev.to website on my own test domain. That is possible because of reverse proxy.

Reverse Proxy

A server that sits between a client and an actual server and routes requests from clients to the actual server is called a reverse proxy.

In the real world, it is almost 100% certain that any website you are visiting or any request you are making in a browser will go through a reverse proxy. You might have heard about load balancers, which are also a type of reverse proxy that routes your request to multiple available servers behind.

Same reverse proxy we are using here to route requests on our domain to the real dev.to domain. Reverse proxies are very useful pieces of software, and if you are a developer, you should know this.

Use cases

1. Protect the real address of actual servers.
2. Route requests in microservice architecture.
3. Secure your servers behind one single HTTPS server (reverse proxy).
4. Load Balancers.
5. Apart from these use cases, the sky is your limit.

Reverse proxy can route requests based on domain name. So you can host multiple applications on the same server and just route according to the domain name using a reverse proxy. You will realize the power once you understand reverse proxies.

The nginx config used

One of the most popular reverse proxies is nginx. Let's see how we can use it as I did in the video at the top.

server {
    listen 443 ssl;
    server_name test.aaraz.me;
    ssl_certificate /etc/nginx/conf.d/Certs/aaraz.me/aaraz_ca_certificate.pem;
    ssl_certificate_key /etc/nginx/conf.d/Certs/aaraz.me/aaraz_origin_private.pem;
    proxy_http_version 1.1;
    add_header X-Served-By $host;
    proxy_set_header X-Forwarded-Scheme $scheme;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    location / {
        resolver 1.1.1.1;
        proxy_set_header Host 'dev.to';
        proxy_pass https://dev.to$request_uri;
    }
}

It looks complicated, but you can copy and paste most of the things. The server_name is the domain you want to use. The SSL thing going around is the basic setup with Cloudflare. You can learn about it HERE.

location / {

The most important part of the setup is this location block in the config. It says when any request comes on domain test.aaraz.me send it to https://dev.to. Websites can block requests when they come from a different domain, so we are using proxy_set_header to set the origin domain of the request to be dev.to. This makes the dev.to server think the requests are coming from their domain, & this is what makes the whole setup work.

Want to implement yourself?

1. Get a domain and a server.
2. Set up nginx on the server and point the domain to the server.
3. use the nginx config provided above by changing these values with your own

• server_name
• ssl_certificate
• ssl_certificate_key
• proxy_set_header
• proxy_pass

My social links.

x.com

anisharaz (Anish Araz) · GitHub

anisharaz has 17 repositories available. Follow their code on GitHub.

github.com

Comments

[Piyush Raj]

Haha, nice misuse of reverse proxy!

[John Doe]

I liked the meme. Quite impressive content. I got to learn a lot about proxy and its role in client-server architecture. I will definitely try to implement it on my own