가상호스트(Virtual Host)란 무엇인가?

웹 개발을 하다 보면 “이 도메인으로 접속하면 이 앱이 나오고, 저 도메인으로 접속하면 다른 앱이 나온다”라는 경험을 하는 경우가 있다.

 

그러면, 이것은 도대체 어떻게 개발하는 건가? 싶었다...

 

이럴 때 흔히 쓰이는 개념이 가상호스트(Virtual Host) 다.

간단히 말하자면, 하나의 서버(물리 또는 가상)에서 여러 도메인이나 여러 호스트 이름을 받아서 각각 다른 콘텐츠나 애플리케이션을 제공하는 구조를 의미한다. (위키백과)
예를 들어보자면, myapp.local 과 admin.myapp.local을 같은 서버에서 운영하되, 각각 다른 디렉토리 혹은 애플리케이션으로 연결하는 방식이 가상호스트 구조에 해당한다.

 

🐌 왜 프론트엔드에서도 가상호스트를 알아야 하나?

그렇담. 프론트엔드 실무에서 가상호스트가 쓰이는 이유는 뭘까?

 

프론트엔드 개발자 입장에서 가상호스트가 중요한 이유는 다음과 같다.

• 개발/로컬환경 재현
  여러 프로젝트를 로컬에서 동시에 띄워야 하거나, API도 다른 도메인으로 돌려야 할 때 frontend.local, api.local 과 같은 가상호스트를 설정하면 localhost:3000, localhost:3001처럼 포트로 헷갈리지 않고 도메인 기반으로 테스트할 수 있다.
• CORS 및 리버스프록시 대응
  백엔드가 api.myapp.local 같은 도메인을 요구할 경우, 로컬이나 개발서버에서 동일한 호스트 이름을 가상호스트로 매핑해 두면 CORS나 인증/쿠키 도메인 문제가 줄어든다.
• 프런트엔드/백엔드 통합 또는 마이크로프론트엔드 전략
  하나의 서버에서 여러 앱(예: 고객용 앱, 관리자용 앱)을 운영할 때, 각 앱을 별도 호스트 이름으로 분리하는 것이 유지보수나 접근 제어 측면에서 유리하다.
• Vite 등 개발서버 설정과 함께 사용 가능
  최근 Vite 같은 개발 서버들은 호스트(host)나 허용 호스트(allowedHosts) 등의 옵션을 통해 가상호스트형 접속을 지원하므로, 프론트엔드 개발자가 직접 설정할 여지가 많다. (vitejs)

즉, 가상호스트는 더 이상 서버 인프라 엔지니어나 백엔드만의 영역이 아니라, 프론트엔드 개발 환경·설정에서도 유용한 개념으로 볼 수 있다.

 

 

실무에서 가상호스트는 어디에 쓰이나 ❔

몇 가지 시나리오를 들어보면...

• 로컬 다중 앱 개발환경
  여러 개의 프론트엔드 프로젝트를 동시에 띄워야 할 때, app1.local, app2.local 등의 호스트명을 /etc/hosts 또는 dnsmasq로 매핑해 혼동을 줄인다.
• 도메인 기반 테스트
  인증 쿠키나 OAuth 리다이렉션이 특정 도메인을 요구할 때, 로컬이나 스테이지 환경에서 staging.myapp.local 등을 가상호스트로 지정해 테스트한다.
• 통합 배포 서버 / 마이크로프론트엔드
  하나의 Nginx/Apache 서버에서 admin.myapp.com, user.myapp.com 등을 같은 IP로 서비스하지만 서로 다른 루트 경로 혹은 리버스프록시 설정을 통해 나눈다. (예 > Apache의 VirtualHost 설정) (httpd.apache.org)
• 프런트엔드 개발서버 확장
  vite dev --host myapp.local 또는 server.host / server.allowedHosts 설정을 통해 외부 머신이나 LAN에서 동일 호스트명으로 접속할 수 있게 설정한다. (Stack Overflow)

 

Vite를 이용한 간단한 예제 🤩

로컬 개발환경에서 가상호스트 설정하기

아래는 Vite 프로젝트에서 가상호스트 설정을 하는 아주 간단한 예제이다.

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    host: 'myapp.local',           // 호스트명을 myapp.local로 지정
    port: 3000,
    strictPort: true,
    allowedHosts: ['myapp.local'], // 허용할 호스트 명시
  }
});

 

그리고 로컬 머신의 /etc/hosts(혹은 Windows C:\Windows\System32\drivers\etc\hosts) 파일에 다음 라인을 추가한다.

 

127.0.0.1   myapp.local

 

이제 브라우저에서 http://myapp.local:3000 으로 접속하면 Vite 개발서버가 동작한다.

 

또한, 백엔드 API가 api.myapp.local 같은 이름을 요구한다면, 동일 방식으로 api.myapp.local 도 매핑한 뒤 Vite server.proxy 설정을 통해 프록시 처리를 할 수 있다.

 

// vite.config.js 추가내용
export default defineConfig({
  server: {
    host: 'myapp.local',
    allowedHosts: ['myapp.local', 'api.myapp.local'],
    proxy: {
      '/api': {
        target: 'http://api.myapp.local:4000',
        changeOrigin: true
      }
    }
  }
});

 

이 방식으로 프론트엔드 개발서버에서도 가상호스트 기반 도메인으로 설정하고, API와의 통신에서 도메인 기반 매핑을 할 수 있어 CORS나 네트워크 환경을 실제 운영환경과 유사하게 재현할 수 있다.

 

유의점 및 체크리스트 ☑️

• server.allowedHosts를 true로 무제한 허용하는 것은 보안상 위험할 수 있다.
  Vite 공식 문서에서도 허용할 호스트를 명시적으로 나열하라고 경고하고 있다. (vitejs)
• SSL/TLS 환경에서 가상호스트 기반 인증서를 제대로 구성하지 않으면 연결 오류가 발생할 수 있다.
  (예: Name-based virtual host + HTTPS 이슈) (위키백과)
• 로컬 환경의 /etc/hosts 설정이 팀원이나 CI 환경에 반영되어야 할 때 추가 스크립트나 문서화가 필요하다.
• 가상호스트 이름 선정 시 팀 규약, DNS 가용성, 도메인 충돌 가능성 등을 고려해야 한다.

 

기억해야 할 것 👑

• 가상호스트는 하나의 서버에서 여러 호스트명(도메인)을 처리하는 방식이다.
• 프론트엔드 개발에서는 로컬 개발환경 통일, 도메인 기반 테스트, CORS 대응 등에 유용하다.
• Vite 설정(host, allowedHosts, proxy 등)을 통해 가상호스트 기반 개발서버를 쉽게 구성할 수 있다.
• 설정할 때는 보안 및 DNS/SSL 이슈를 꼭 체크해야 한다.

 

이 글에서 참고한 자료들

• Wikipedia – Virtual hosting: https://en.wikipedia.org/wiki/Virtual_hosting
• Okta – Virtual Hosting: Types, Architecture, Uses & Benefits: https://www.okta.com/identity-101/virtual-host/
• Vite 공식 문서 – Server Options: https://vite.dev/config/server-options
• StackOverflow 답변 – Vite dev with --host 및 가상호스트 설정 사례: https://stackoverflow.com/questions/68855929/a-way-to-run-vite-dev-on-remote-server-like-laravel-mix