npm run dev를 실행하고 브라우저에서 localhost:3000을 열면 사이트가 보입니다. 뿌듯하지만, 이 주소는 내 컴퓨터에서만 열립니다. 친구에게 링크를 보내도 친구 컴퓨터에는 그 사이트가 없습니다.
배포는 내 사이트를 24시간 켜져 있는 인터넷 서버에 올려서, 누구나 접속할 수 있게 만드는 일입니다.
지금 http://localhost:3000 → 나만 볼 수 있어요
배포 후 https://vibegongzzang.kr → 누구나 볼 수 있어요17.1배포하는 두 가지 길
1. 호스팅 서비스 이용 Vercel, Netlify 같은 서비스에 GitHub11장 저장소를 연결하면, 코드를 올릴 때마다 알아서 빌드하고 배포해 줍니다. 서버 관리를 신경 쓰지 않아도 되어서 처음 시작하기에 좋습니다.
2. 내 서버에 직접 올리기 클라우드 서버를 빌려 직접 운영하는 방법입니다. Docker로 실행 환경을 통째로 포장하고, Caddy 같은 웹 서버로 HTTPS를 붙입니다. 자유도가 높은 대신 관리할 것이 늘어납니다.
이 홈페이지는 두 방법을 모두 준비해 두었습니다.
17.2배포할 때 일어나는 일
- 빌드: npm run build로 개발용 코드를 실제 서비스용으로 정리하고 압축합니다.
- 환경변수 설정: 16장16장에서 본 비밀 키들을 서버에도 넣어 줍니다.
- 실행: 빌드된 결과를 서버에서 켭니다.
- HTTPS 연결: 주소창에 자물쇠가 뜨도록 보안 인증서를 붙입니다. 호스팅 서비스와 Caddy는 대부분 자동으로 해 줍니다.
17.3배포 전 체크리스트
- 내 컴퓨터에서 npm run build가 성공하는지
- 필요한 환경변수를 서버에 모두 넣었는지
- 테스트 키를 실제 키로 바꿔야 하는지 (결제 등)
- 배포 후 주요 페이지를 하나씩 열어 봤는지
- 휴대폰으로도 확인했는지
17.4자주 하는 실수 세 가지
- 환경변수 빠뜨림: 내 컴퓨터에선 되는데 배포하면 안 된다면, 십중팔구 서버에 환경변수가 없는 경우입니다.
- 빌드를 안 해 보고 배포: 개발 모드에서는 그냥 넘어가던 타입 오류가 빌드에서 걸리기도 합니다. 배포 전에 한 번 빌드해 보세요.
- 주소를 localhost로 고정: 코드 곳곳에 http://localhost:3000이 박혀 있으면 배포 후 동작하지 않습니다. 사이트 주소도 환경변수로 관리하세요.
17.5AI에게 이렇게 말해 보세요
- “배포 전에 빌드 돌려서 오류 있는지 확인해 줘”
- “이 프로젝트 배포에 필요한 환경변수 목록 정리해 줘”
- “배포된 사이트의 주요 페이지가 잘 열리는지 점검해 줘”
배포가 끝나면 이제 남은 건 이름입니다. 18장에서는 내 사이트에 도메인을 연결하는 방법을 알아보겠습니다.
— 17장 끝 —