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

4 weeks ago 12

개발 중인 웹앱에 대해 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 로 접속하면 위 서버의 내용이 표시됨

Read Entire Article