로컬 웹 브라우저 연동

로컬 웹 브라우저 연동

로컬 웹 브라우저 연동은 우분투 가상머신에서 실행한 웹 애플리케이션이나 API 서버를 호스트 PC의 브라우저에서 직접 확인하는 방식입니다. 이는 웹 개발 환경에서 가장 중요한 요소 중 하나이며, 서버 실행과 UI 테스트가 분리된 구조를 통해 더 실전적인 개발 흐름을 갖출 수 있습니다. Django, Flask, FastAPI, Node.js, PHP 등 대부분의 웹 프레임워크에서 이 방식으로 테스트를 진행합니다.

---

● 핵심 개념

우분투 VM에서 실행한 웹 서버에 대해
호스트 브라우저에서 다음과 같이 접근합니다.

http://localhost:포트번호

또는 VM IP로 직접 접근하는 경우:

http://가상머신_IP:포트번호

이 방식이 가능하려면 VM과 호스트가 네트워크로 연결되어 있어야 하고, NAT 환경에서는 포트 포워딩이 필요합니다.

---

● 준비 사항

항목	설명
네트워크 모드	NAT 또는 브리지
포트 개방	포트 포워딩 또는 브리지 직접접속
웹 서버 실행	0.0.0.0 바인딩 필수
방화벽	UFW 설정 확인(필요 시 허용)

---

● 서버 실행 예시

Django

python manage.py runserver 0.0.0.0:8000

Flask

flask run --host=0.0.0.0 --port=5000

FastAPI

uvicorn main:app --host 0.0.0.0 --port 8000

Node.js

node app.js

(코드에서 app.listen(8000, "0.0.0.0") 형태가 필요)

핵심 포인트: 반드시 0.0.0.0 바인딩
이를 통해 외부(호스트)에서도 접속 가능해집니다.

---

● 호스트 브라우저 접속

NAT 포트 포워딩 시:

http://localhost:8000

브리지 모드 시:

http://VM_IP:8000

VM IP는 다음 명령으로 확인합니다.

ip addr show

---

● 자주 사용하는 포트

서비스	포트
Django/Flask/FastAPI	8000, 5000
Node.js	3000, 8080
MySQL	3306
PostgreSQL	5432
Redis	6379

---

● 개발 흐름 예시

1. Ho st VS Code로 코드 수정
2. Git or 공유폴더로 VM에 반영
3. VM에서 서버 실행
4. Host 브라우저로 테스트

이 방식은 클라우드 환경과 거의 동일한 구조이므로
로컬에서 개발하는 동시에 배포 학습까지 가능합니다.

---

● 문제 해결 가이드

증상	점검 포인트
접속 불가	포트 포워딩 여부
빈 화면 / 오류	브라우저 캐시, 서버 로그
403 또는 404	URL 및 라우팅 확인
Ubuntu 방화벽 차단	sudo ufw allow 8000

---

● 활용 팁

• 실시간 자동 리로드 기능 활용 (Django runserver / Node nodemon)
• 모바일 테스트도 가능(브리지 모드 사용)
• API 개발 시 Postman 또는 Thunder Client 사용 권장

모바일 테스트 예시(브리지 환경)

http://VM_IP:8000

같은 Wi-Fi 내 스마트폰에서 동작 확인 가능하여
반응형 웹 개발에도 유리합니다.

---

우분투 VM에서 실행되는 웹 애플리케이션을
호스트 환경에서 직접 눈으로 확인할 수 있게 되면
개발과 운영이 한층 자연스럽고 전문적으로 이어집니다.