Setting up a custom domain for your local apps, with port-forwarding

README.md

This is applicable for MacOS. I'm using MacOS BigSur 11.2.3. Linux family should be similar

You'll need to do 2 things:

• Edit the HOST file in your computer to let it know about your custom domain
• Setup a server to do port-forwarding (skip this step if you don't need port-forwarding)

Note: Replace {{YOUR_DOMAIN}} with your domain.

1. Edit the HOST file

• Either run commands such as sudo nano /etc/hosts or sudo code /etc/hosts if you use VSCode, to edit the file manually.
• Or a more simple command: echo "127.0.0.1 {{YOUR_DOMAIN}}" | sudo tee -a /etc/hosts (I couldn't use echo directly - Permission denied).

2. Setup a server

• You need to have Docker installed.
• Copy 3 files (docker-compose.yaml, Dockerfile, nginx.conf) into a folder.
• In nginx.conf, replace {{YOUR_PORT}} with your port.
• Run docker-compose build && docker-compose up.

---

Inspired by: https://emmapopoola.medium.com/setting-up-a-custom-domain-for-your-local-apps-mac-os-linux-c68798722143

docker-compose.yaml

version: '3'

services:
  nginx:
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - '80:80'

Dockerfile

FROM nginx
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

nginx.conf

server {
    listen 80;
    listen [::]:80;
    server_name {{YOUR_DOMAIN}} www.{{YOUR_DOMAIN}};
    access_log /var/log/nginx/mysite.com.access.log;
    error_log /var/log/nginx/mysite.com.error.log;
    location / {
        proxy_pass http://host.docker.internal:{{PORT}};       
        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;
    }
}