레다솔의 자기계발

Vue 개발 환경을 WSL(Windows Subsystem for Linux)에서 구성했을 때,
개발 서버에 Windows 브라우저나 다른 디바이스에서 접속이 안 되는 문제를 겪은 적 있다.

이 글에서는 npm run dev로 실행한 Vue 서버를 Windows 및 같은 네트워크의 다른 기기에서도 접속 가능하도록 설정하는 방법을 정리한다.
포트는 3000번을 기준.

알고보니 wsl 은 윈도우 내부에서 가상 머신으로 돌고 있으므로 포트 포워딩과 방화벽을 열어주지 않으면 볼 수 없었다.

chatGPT의 도움을 받아 설정을 진행했다.

아래는 GPT에게 해당 방법을 포스팅 글 작성으로 부탁한 내용이다.

1. vite.config.js 수정

WSL 프로젝트 폴더에 vite.config.js가 없다면 생성하고 아래처럼 작성:

// vite.config.js
export default {
  server: {
    host: '0.0.0.0', // 외부 접속 허용
    port: 3000        // 고정 포트 지정
  }
}

2. WSL에서 개발 서버 실행

WSL 터미널에서 다음 명령을 실행:

npm run dev

출력 예:

➞  Local:    http://localhost:3000/
➞  Network:  http://172.23.x.x:3000/

⚠️ 이 주소들은 WSL 내부에서만 접근 가능하므로, 외부에서는 접속할 수 없습니다.

3. Windows에서 포트포워딩 설정

PowerShell을 관리자 권한으로 실행 후 다음 명령을 입력:

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=127.0.0.1

이 명령은 "Windows가 받은 요청을 WSL 내부 서버로 전달하라"는 뜻

4. Windows 방화벽에서 포트 3000 허용

netsh advfirewall firewall add rule name="WSL Vue Dev 3000" dir=in action=allow protocol=TCP localport=3000

이 설정이 없으면 외부에서 접근을 막을 수 있음.

5. Windows IP 확인

CMD에서 다음 명령을 입력:

ipconfig

IPv4 주소 확인 (예: 192.168.0.101)

6. 외부 기기에서 접속

동일한 와이파이망에 있는 스마트폰이나 다른 PC에서 아래 주소 입력:

http://192.168.0.101:3000

Vue 개발 페이지가 보이면 성공입니다! 🎉

추가로 알아두면 좋은 명령어들

포트 점유 상태 확인:

netstat -ano | findstr :3000

프로세스 확인:

tasklist | findstr [PID]

점유 프로세스 종료:

taskkill /PID [PID] /F

포트포워딩 삭제할 때

netsh interface portproxy delete v4tov4 listenport=3000 listenaddress=0.0.0.0

컴퓨터 재시작하면 포트포워딩과 방화벽 설정이 초기화되므로 다시 진행해야 하지만 공유가 필요할 때만 열면되니까 문제없다.

구글 검색으로 찾을 수가 없었는데 chatGPT 덕분에 많은 걸 해결하는 시대가 온 것 같다.