Ch.8 웹 개발 상식
배포 — localhost에서 인터넷으로
내 컴퓨터에서 잘 돌아가는데 다른 사람은 볼 수 없다?
열심히 만든 웹사이트가 내 컴퓨터에서는 완벽하게 작동합니다. 하지만 친구에게 보여주려면 어떻게 해야 할까요? URL을 보내도 'localhost:3000'은 접속이 안 됩니다.
개발과 배포는 완전히 다른 단계입니다. 로컬에서 작동하는 것과 인터넷에서 작동하는 것은 다릅니다.
배포 과정을 이해하면 내 프로젝트를 세상에 공개하고, 환경별 설정을 올바르게 관리할 수 있습니다.
핵심 내용
localhost = 내 컴퓨터에서만 접근 가능한 주소입니다. 다른 사람이 내 웹사이트를 보려면 배포가 필요합니다.
비유하면, 집에서 만든 요리(localhost)를 다른 사람에게 먹이려면 포장해서 배달(배포)해야 합니다. 아무리 맛있어도 집 밖으로 나가지 않으면 나만 먹을 수 있습니다.
배포 = 내 코드를 인터넷 서버에 올려서 누구나 접근 가능하게 만드는 것
Next.js 프로젝트를 배포하는 가장 쉬운 방법은 Vercel입니다. Next.js를 만든 회사가 운영하는 서비스라 궁합이 완벽합니다.
GitHub에 push: 코드를 저장소에 올리기
Vercel 감지: 새 코드가 올라온 걸 자동 감지
빌드: 코드를 서버용으로 변환
배포 완료: URL 발급, 누구나 접근 가능
Vercel의 장점: Git에 push만 하면 자동으로 배포됩니다. 무료 티어로 충분히 시작할 수 있고, 별도의 서버 설정이 필요 없습니다.
환경변수 주의 개발용 DB와 프로덕션 DB는 반드시 분리해야 합니다. .env.local — 개발용 환경변수 (내 컴퓨터에서만) Vercel 환경변수 — 프로덕션용 (배포 서버에서만) 실수로 개발용 DB를 프로덕션에 연결하면 테스트 데이터가 사용자에게 노출됩니다.
Vercel 배포의 첫 번째 단계는?
localhost에서 잘 돌아가면 배포해도 무조건 잘 돌아간다
핵심 용어
개발 (dev)
내 컴퓨터. 자유롭게 실험하고 수정하는 환경
스테이징 (staging)
배포 전 테스트 환경. 프로덕션과 동일한 조건에서 검증
프로덕션 (prod)
실제 사용자가 접근하는 환경. 안정성이 최우선
핵심 정리
- 1localhost = 내 컴퓨터 전용, 배포 = 인터넷 공개
- 2Vercel: GitHub push → 자동 빌드 → 배포 → URL 발급
- 3환경 3단계: 개발(dev) → 스테이징(staging) → 프로덕션(prod)
- 4환경변수는 반드시 환경별로 분리 관리
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작