[한번 띄워봐] 웹 코딩 서버 실행 방법 (총정리)

사진: Unsplash 의 Chen

 

 

안녕하세요. 스페이스차일드입니다.

 

요즘 바이브코딩의 폭발적인 성장으로

평소 생각만 하던 웹개발 공부에 뛰어드신 분들이 많을 것 같아서 정리했습니다.

 

웹 코딩 결과물 보기 - 서버 실행 방법 총정리!

 

1. VSCode 확장 프로그램 사용

• Live Server
• Live Preview (마이크로소프트 공식 확장/에디터 내 미리보기 가능)

놀랍게도 Live Server는 마이크로소프트의 공식 확장 프로그램은 아닙니다.

Live Preview가 공식 확장...

 

'Antigravity'에도 Live Server 가 있습니다.

 

2. 언어/런타임별 터미널 명령어

 

VSCode 내 터미널에서도 사용할 수 있습니다.

그냥 터미널로 프로젝트 폴더에 가서 실행할 수도 있고요.

 

다양하게 있는데, 프레임워크를 안 쓸 때는

저는 아래 터미널 명령어를 자주 쓰는 것 같습니다.

npx serve .
npx live-server --host=0.0.0.0 --port=8080
npx browser-sync start --server --files "**/*" --host 0.0.0.0

 

Node.js

#가장 빠른 정적 서버
npx serve .
npx http-server .
npx live-server .          # 파일 변경 시 자동 새로고침

# 포트 지정
npx serve . -p 3000
npx http-server . -p 8080

 

Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# 포트 지정
python -m http.server 3000

 

3. 프레임워크별 개발 서버 여는 법

# React (CRA)
npm start

# Vite (React/Vue/Svelte 등)
npm run dev

# Vue CLI
npm run serve

# Next.js
npm run dev

# Angular
ng serve

# Astro
npm run dev

 

 

(중요) 모바일 기기에서 접속할 수 있도록 서버를 여는 법

 

다른 분들은 어떻게 하는지 모르겠는데,

저는 모바일 기기에서 직접 확인하는 걸 좋아해서,

웹페이지에서 지원하는 모바일기기 화면보기 기능 같은 건 잘 안 쓰는 것 같습니다.

 

1. PC와 모바일이 같은 Wi-Fi에 연결되어 있을 때

 

Step 1. 맥의 로컬 IP 확인

macOS는 ifconfig, Windows는 ipconfig 임에 유의

macOS에서도 ipconfig 로 시작하는 명령어가 있는데, 맥os 전용 명령어라고...

# macOS / Linux
ifconfig | grep "inet "
ipconfig getifadd en0


# Windows
ipconfig

 

Step 2. 0.0.0.0으로 서버 실행(외부접근허용)

 

Step1에서 알아낸 IP를 치는게 아니라, 0.0.0.0을 쳐야 한다는 점에 유의하자.

# http-server (가장 간단)
npx http-server . -p 8080 --cors

# Python
python -m http.server 8080

# Vite — vite.config.js 수정 or 플래그
npx vite --host

# live-server
npx live-server --host=0.0.0.0 --port=8080

# browser-sync (가장 편함 — QR코드 + 여러기기 동기화)
npx browser-sync start --server --files "**/*" --host 0.0.0.0

 

Step 3. Step1에서 알아낸 IP로 모바일 브라우저에서 접속

 

Step1에서 알아낸 IP가 192.168.0.5 라고 할 때, 아래와 같이 모바일 웹브라우저에 입력해서 접속합니다.

http://192.168.0.5:8080

 

2. 같은 Wi-Fi 연결 없이 외부에서 접근하는 법(터널링)

# ngrok (가장 유명)
npx ngrok http 8080
# → https://abc123.ngrok.io 같은 공개 URL 생성

# cloudflared (Cloudflare 무료)
cloudflared tunnel --url http://localhost:8080

# localtunnel (설치 없이)
npx localtunnel --port 8080

 

 

누군가에겐 도움이 되길