←목록으로
🔌도구

Portless: 포트 번호 대신 안정적인 .localhost URL 사용하기

로컬 개발 환경에서 포트 충돌과 혼란을 해결하는 도구, 각 앱에 안정적인 이름 기반 URL 제공

↗ 원본 링크
#개발도구#로컬개발#프록시#localhost

Portless란?

로컬 개발 환경에서 포트 번호 대신 이름 기반의 안정적인 .localhost URL을 사용할 수 있게 해주는 도구입니다.

기존: http://localhost:3000

개선: http://myapp.localhost:1355

해결하는 문제들

포트 충돌

▸여러 프로젝트가 같은 포트를 사용하면 `EADDRINUSE` 에러 발생
▸포트 번호를 일일이 기억해야 하는 불편함

혼란스러운 개발 경험

▸같은 포트에서 다른 앱을 실행하면 브라우저 탭이 엉뚱한 앱을 보여줌
▸브라우저 히스토리가 여러 프로젝트로 뒤섞임
▸쿠키와 localStorage가 포트별로 충돌

설정 문제

▸CORS, OAuth 리다이렉트 URI 등에 하드코딩된 포트
▸AI 에이전트가 잘못된 포트로 테스트 시도

빠른 시작

bash
# 전역 설치
npm install -g portless

# 프록시 시작 (한 번만, sudo 불필요)
portless proxy start

# 앱 실행
portless myapp next dev
# -> http://myapp.localhost:1355

사용 예시

기본 사용

bash
portless myapp next dev
# -> http://myapp.localhost:1355

서브도메인 지원

bash
portless api.myapp pnpm start
# -> http://api.myapp.localhost:1355

portless docs.myapp next dev
# -> http://docs.myapp.localhost:1355

package.json에 통합

json
{
  "scripts": {
    "dev": "portless myapp next dev"
  }
}

작동 원리

1.프록시 시작: 앱 실행 시 자동으로 시작되거나 수동으로 시작
2.앱 실행: portless <이름> <명령어> 형식으로 실행
3.요청 라우팅: 브라우저가 myapp.localhost:1355 접속 → 프록시가 실제 포트로 전달

주요 장점

✅ 안정적인 URL: 프로젝트마다 고유한 이름으로 접근

✅ 포트 충돌 해결: 자동으로 사용 가능한 포트 할당

✅ 쿠키/저장소 분리: 각 앱이 독립적인 도메인 사용

✅ 팀 협업 개선: "몇 번 포트?" 질문 불필요

✅ AI 에이전트 친화적: 안정적인 URL로 테스트 가능

모노레포 환경이나 여러 서비스를 동시에 개발할 때 특히 유용합니다.