▲

.localhost 도메인으로 웹앱 주소 간소화하기

 (inclouds.space)
16P by GN⁺ 8일전 | ★ favorite | 댓글 2개
  • 개발 중인 웹앱에 대해 localhost:4333 같은 포트를 기억하지 않고도, appname.localhost 같은 간단한 주소로 접근 가능하도록 설정한 경험 공유
  • 이 시스템을 활용하면 로컬 웹앱 접근이 훨씬 직관적이고 깔끔해짐
  • 각 앱은 고유 포트에서 launchd 데몬으로 실행됨
  • /etc/hosts 파일에서 appname.localhost를 127.0.0.1로 리디렉션함
    • 예: 127.0.0.1 inclouds.localhost
  • Caddy를 통해 해당 도메인을 적절한 포트로 프록시 처리함

Caddy 설정 예시

  inclouds.localhost {  
    reverse_proxy localhost:5050  
    tls internal  
    encode gzip zstd  
  }
  • .localhost 도메인마다 Caddyfile에 해당 포트로의 프록시 설정 작성
  • 내부 TLS 인증서와 압축 지원도 포함됨

향후 개선 아이디어

  • 현재는 세 가지 파일(/etc/hosts, Caddyfile, launchd plist)을 수동으로 편집해야 함
  • 향후 단일 명령으로 앱을 .localhost 도메인에 설치/삭제하는 자동화 도구를 만드는 것이 목표임

업데이트

  • Cristóbal이 dnsmasq 기반의 명령어를 제안해 이 과정을 더 간편하게 만듦
  • 핵심 아이디어는 다음과 같음:
    1. *.localhost를 모두 127.0.0.1로 리디렉션함
    2. 127.0.0.1에서 특정 포트로 리버스 프록시를 수행하는 서버 설정함

dnsmasq로 리다이렉션 설정하기

  • 모든 *.localhost 도메인을 127.0.0.1로 라우팅하기 위해 dnsmasq 사용
  • 설치 후 설정: 
    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
  • dnsmasq 포트를 5353으로 설정하여 systemd-resolved와 충돌 방지
  • /etc/resolv.conf 맨 위에 다음을 추가해 기본 DNS 리졸버를 dnsmasq로 설정: 
    nameserver 127.0.0.1

Caddy 및 localhost 스크립트로 리버스 프록시 설정하기

  • 이제 caddy 서버를 활용해 각 서브도메인을 특정 포트로 연결 가능
  • 수동으로 Caddyfile을 편집할 수도 있지만, bash 스크립트(localhost)를 만들어서 자동화 가능
  • 이 bash 스크립트(localhost)를 PATH에 추가 (예시로 .zshrc 파일에 추가): 
    export PATH="$PATH:$HOME/dev/localhost"
  • 다음과 같이 사용할 수 있음: 
    localhost add hello 8000  
localhost remove hello

실제 동작 테스트

  • 로컬 서버 실행 예시: 
    echo 'hello.localhost!' > index.html  
python3 -m http.server 1234
  • 도메인 연결 설정: 
    localhost add hello 1234
  • 이제 브라우저에서 hello.localhost 로 접속하면 위 서버의 내용이 표시됨
▲
dudlf016 7일전  [-]

저는 외부망 접근 못하는거 아니면 NIP.IO 같은 Wildcard DNS 쓸래요.

답변달기
▲
GN⁺ 8일전  [-]
Hacker News 의견

  • 브라우저는 .localhost 도메인에 대해 보안 컨텍스트를 제공함

    • HTTPS를 위한 자체 서명 인증서가 필요하지 않음
    • 백엔드 API와 프론트엔드 SPA가 동시에 실행될 때 유용함
    • 최근 승인된 .internal 도메인을 사용할 수 있음

  • nginx 로컬 개발 설정 스니펫은 간단함

    • 유닉스 도메인 소켓을 통해 로컬 개발 서버와 연결됨
    • 호스트 이름 해상도를 추가해야 하지만, 구성 파일을 프로그래밍적으로 편집하거나 프록시를 재시작할 필요는 없음

  • Chrome과 Firefox는 기본적으로 모든 <name>.localhost 도메인을 localhost로 해석함

    • Docker 프록시를 설정하여 모든 요청을 자동으로 처리할 수 있음

  • Localias 프로젝트는 로컬 웹 개발에 유용함

    • Caddy 기반으로 구축되어 있으며, CLI와 구성 파일 형식이 편리함
    • .local 도메인 별칭을 네트워크의 다른 장치에서 사용할 수 있게 함
    • /etc/hosts 파일을 수동으로 편집할 필요가 없음

  • .localhost의 하위 도메인은 Linux, OpenBSD 등에서 기본적으로 작동함

    • macOS에서는 /etc/hosts에 하위 도메인을 명시적으로 추가해야 함

  • Caddy를 사용하는 경우, 구매한 도메인과 DNS-01 챌린지를 사용하는 것이 좋음

    • 자체 서명 인증서를 신뢰 저장소에 추가할 필요가 없음
    • Caddy가 인증서를 자동으로 갱신함

  • 개인 네트워크에서 Vanity 도메인을 사용하는 사람도 있음

    • Smallstep CA, CoreDNS, Traefik을 사용하여 SSL 인증서를 자동으로 발급받음
    • 내부 네트워크 설정에 internal. zone을 사용하는 것이 좋음

  • 각 로컬 호스팅 앱에 별도의 IP 주소를 부여할 수 있음

    • 127.0.0/24 범위의 IP 주소를 사용 가능함
    • macOS에서도 작동하지만, 루프백 인터페이스에 명시적으로 추가해야 할 수도 있음

  • Linux 시스템에서는 systemd-resolved를 통해 기본적으로 작동함

    • CSRF를 역방향 프록시로 차단할 수 있는 이점이 있음
답변달기