How To Create Admin Subdomain In Cloudflare with Nginx Proxy using Docker with SSL

August 30, 2022

Introduction

I have my main website, which I run on Lets say: gyanblog.com. Now, there is my admin panel, or admin-ui which is a separate deployable artifact altogether. My admin panel runs on port 8080. It can be any CMS like Strapi, which runs on 8080.

Website runs with Cloudflare.

One way to open admin panel is IP:8080. But, I want to use SSL and a proper domain name. Another way could be to write a proxy which redirects /admin to that admin panel. But, there is no such path that can differentiate my main website UI and this admin panel.

Create Subdomain in Cloudflare

Login to cloudflare, open DNS settings for your website. I assume, you have two records already:

  • A-record with name as your website name, value as your hosting IP
  • CNAME-record with name as www and value as yourwebsite.com

Now, we need to add another CNAME record. With name as admin and value as yourwebsite.com So, I want my website to open as admin.yourwebsite.com

Save it. Now, it is the turn to configure your nginx proxy.

Generate SSL Cert for admin Subdomain

Before moving to Nginx, you also need to create SSL certificate. I used Lets-Encrypt. Now, I have my cert for three names:

Configure Nginx Proxy

Configuration file:

upstream my_ui {
    least_conn;

    server my_ui:3000 max_fails=3 fail_timeout=60 weight=1;
}
upstream my_api {
    ip_hash;
    least_conn;

    server my_api:8080 max_fails=3 fail_timeout=60 weight=1;
}
upstream my_admin {
    ip_hash;
    least_conn;

    server my_api:8080 max_fails=3 fail_timeout=60 weight=1;
}

server {
    listen 80;
    server_name yourwebsite.com www.yourwebsite.com;

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name yourwebsite.com www.yourwebsite.com;

    keepalive_timeout   70;
    client_max_body_size 50M;

    ssl_certificate /etc/letsencrypt/live/yourwebsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourwebsite.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location /  {
        add_header Pragma "no-cache";
        add_header Cache-Control "no-cache, must-revalidate";
        gzip_static on;

        proxy_pass http://my_ui/;
    }

    location /api/ {
        rewrite ^/api/?(.*)$ /$1 break;
        proxy_pass http://my_api;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
}

server {
    listen 443 ssl;
    server_name admin.yourwebsite.com;

    keepalive_timeout   70;
    client_max_body_size 50M;

    ssl_certificate /etc/letsencrypt/live/yourwebsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourwebsite.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location /  {
        add_header Pragma "no-cache";
        add_header Cache-Control "no-cache, must-revalidate";
        gzip_static on;

        proxy_pass http://my_admin/;
    }
}

Restart or reload your Nginx server. I use docker, just restart your containers.

And, it will just open well, with your admin.yourwebsite.com

Hope it helps.

nginxcloudflarestrapisslproxydocker

Similar Posts

Latest Posts