Đơn giản hóa địa chỉ web app bằng tên miền `.localhost`

• Chia sẻ kinh nghiệm thiết lập để có thể truy cập các web app đang phát triển bằng những địa chỉ đơn giản như appname.localhost mà không cần nhớ các cổng như localhost:4333
• Hệ thống này giúp việc truy cập web app cục bộ trở nên trực quan và gọn gàng hơn nhiều
• Mỗi app chạy trên một cổng riêng dưới dạng daemon launchd
• Trong tệp /etc/hosts, chuyển hướng appname.localhost tới 127.0.0.1
  • Ví dụ: 127.0.0.1 inclouds.localhost
• Dùng Caddy để proxy tên miền đó tới đúng cổng tương ứng

Ví dụ cấu hình Caddy

  inclouds.localhost {  
    reverse_proxy localhost:5050  
    tls internal  
    encode gzip zstd  
  }  

• Với mỗi tên miền .localhost, viết cấu hình proxy tới cổng tương ứng trong Caddyfile
• Bao gồm cả chứng chỉ TLS nội bộ và hỗ trợ nén

Ý tưởng cải tiến trong tương lai

• Hiện tại vẫn phải chỉnh sửa thủ công ba tệp (/etc/hosts, Caddyfile, launchd plist)
• Mục tiêu trong tương lai là tạo một công cụ tự động hóa để cài đặt/gỡ app vào tên miền .localhost chỉ bằng một lệnh duy nhất

Cập nhật

• Cristóbal đã đề xuất một lệnh dựa trên dnsmasq, giúp quy trình này đơn giản hơn
• Ý tưởng cốt lõi như sau:
  1. Chuyển hướng toàn bộ *.localhost tới 127.0.0.1
  2. Thiết lập một máy chủ thực hiện reverse proxy từ 127.0.0.1 tới các cổng cụ thể

Thiết lập chuyển hướng bằng dnsmasq

• Dùng dnsmasq để định tuyến mọi tên miền *.localhost tới 127.0.0.1
• Cấu hình sau khi cài đặt:

  echo 'port=5353' | sudo tee -a /etc/dnsmasq.conf  
  echo 'address=/localhost/127.0.0.1' | sudo tee -a /etc/dnsmasq.conf  
  sudo systemctl restart dnsmasq  
  

• Đặt cổng dnsmasq là 5353 để tránh xung đột với systemd-resolved
• Thêm dòng sau ở đầu /etc/resolv.conf để đặt dnsmasq làm DNS resolver mặc định:

  nameserver 127.0.0.1  
  

Thiết lập reverse proxy bằng Caddy và script localhost

• Giờ đây có thể dùng máy chủ caddy để kết nối từng subdomain tới một cổng cụ thể
• Có thể chỉnh sửa Caddyfile thủ công, nhưng cũng có thể tự động hóa bằng cách tạo một script bash (localhost)
• Thêm script bash này (localhost) vào PATH (ví dụ thêm vào tệp .zshrc):

  export PATH="$PATH:$HOME/dev/localhost"  
  

• Có thể dùng như sau:

  localhost add hello 8000  
  localhost remove hello  
  

Kiểm tra hoạt động thực tế

• Ví dụ chạy máy chủ cục bộ:

  echo 'hello.localhost!' > index.html  
  python3 -m http.server 1234  
  

• Thiết lập kết nối tên miền:

  localhost add hello 1234  
  

• Giờ đây khi truy cập hello.localhost trong trình duyệt, nội dung từ máy chủ trên sẽ được hiển thị

[dudlf016]

Tôi thì nếu không phải môi trường không thể truy cập mạng ngoài, sẽ dùng Wildcard DNS như NIP.IO.

[GN⁺]

Ý kiến trên Hacker News

• Trình duyệt cung cấp ngữ cảnh bảo mật cho miền .localhost

  • Không cần chứng chỉ tự ký cho HTTPS
  • Hữu ích khi backend API và frontend SPA chạy đồng thời
  • Có thể dùng miền .internal mới được phê duyệt gần đây

• Đoạn cấu hình nginx cho phát triển cục bộ khá đơn giản

  • Kết nối với máy chủ phát triển cục bộ thông qua Unix domain socket
  • Cần thêm phân giải hostname, nhưng không cần chỉnh sửa tệp cấu hình theo cách lập trình hoặc khởi động lại proxy

• Chrome và Firefox mặc định phân giải mọi miền <name>.localhost thành localhost

  • Có thể thiết lập Docker proxy để tự động xử lý mọi yêu cầu

• Dự án Localias hữu ích cho phát triển web cục bộ

  • Được xây dựng dựa trên Caddy, với CLI và định dạng tệp cấu hình tiện lợi
  • Cho phép dùng bí danh miền .local trên các thiết bị khác trong mạng
  • Không cần chỉnh sửa thủ công tệp /etc/hosts

• Các miền con của .localhost hoạt động mặc định trên Linux, OpenBSD, v.v.

  • Trên macOS, cần thêm tường minh các miền con vào /etc/hosts

• Nếu dùng Caddy, nên sử dụng miền đã mua và DNS-01 challenge

  • Không cần thêm chứng chỉ tự ký vào trust store
  • Caddy tự động gia hạn chứng chỉ

• Một số người cũng dùng vanity domain trong mạng cá nhân

  • Dùng Smallstep CA, CoreDNS, Traefik để tự động cấp chứng chỉ SSL
  • Nên dùng vùng internal. cho cấu hình mạng nội bộ

• Có thể gán địa chỉ IP riêng cho từng ứng dụng được host cục bộ

  • Có thể dùng các địa chỉ IP trong dải 127.0.0/24
  • Cũng hoạt động trên macOS, nhưng có thể cần thêm tường minh vào loopback interface

• Trên hệ thống Linux, cách này hoạt động mặc định thông qua systemd-resolved

  • Có lợi thế là có thể chặn CSRF bằng reverse proxy