웹에 배포하기
내 프로젝트를 전 세계에 공개하기
⏱ 예상 ~9분
01 · 읽기
지금까지 만든 모든 건 localhost — 내 컴퓨터 — 에서 돌고 있었어요. 아무도 볼 수 없었죠. 이제 바뀌어요.
배포는 24시간 인터넷에 연결된 서버에 앱을 올려서 URL을 가진 사람이라면 누구나 쓸 수 있게 하는 거예요. 복잡해 보이지만 요즘 플랫폼은 정말 쉽게 만들어줘요. 코드를 push하면 나머지는 알아서 처리해요.
Render를 쓸 거예요. 넉넉한 무료 티어에 GitHub와 바로 연결되고 서버 설정이 전혀 필요 없어요. 앱이 몇 분 안에 라이브로 돌아가요.
💡 상상해 봐요localhost는 집 부엌에서 요리하는 것과 같아요. 가족만 먹을 수 있죠. 배포는 식당을 여는 거예요. 누구든 어디서든 들어올 수 있어요. Render는 이미 갖춰진 식당 공간과 같아요. 주방, 테이블, 주소가 다 있고 — 음식(코드)만 가져가면 돼요.
02 · 단계별 설명
Render 배포 단계(무료 티어). 순서대로 따라가면 약 10분 안에 라이브 URL을 얻을 수 있어요.
1. GitHub에 push
프로젝트가 GitHub 리포지터리에 commit되고 push돼 있는지 확인하세요. Render는 GitHub에서 직접 코드를 가져오니까 모든 게 최신이어야 해요.
2. render.com에서 가입
'Sign up with GitHub'가 설정이 가장 쉬워요. Render가 별도 설정 없이 리포에 접근할 수 있어요.
3. 새 Web Service 만들기
'New' → 'Web Service'를 누르고 GitHub 리포를 연결하세요. Render가 어떤 리포를 배포할지 물어볼 거예요.
4. 설정
Build command: npm install. Start command: node app.js. 이게 Render에 앱을 어떻게 설치하고 실행할지 알려줘요. Build command는 의존성을 설치하고, start command는 서버를 띄워요.
5. 환경 변수 추가
.env 값을 Render의 환경 설정에 복사하세요. 절대 git에 commit하지 말고 Render 대시보드에 직접 입력하세요. 각 key-value 쌍을 따로 넣어요.
6. 배포!
Deploy를 누르고 빌드를 기다리세요. 로그가 실시간으로 스트리밍돼요. 상태가 초록색이 되면 .onrender.com URL에서 앱이 라이브로 돌아가고, 누구에게나 공유할 수 있어요.
03 · 실기 실습
이 체크리스트로 프로젝트를 배포하세요. 천천히 가세요. 첫 배포는 항상 몇 번 시도해야 해요. 완전히 정상이에요.
04 · 퀴즈
GitHub에 코드를 push하면 Render 같은 배포 플랫폼은 뭘 하나요?
- 프로젝트의 zip 파일을 이메일로 보냄
- 새 GitHub 리포지터리 생성
- 자동으로 코드를 가져와 빌드하고 자기네 서버에서 실행
- 내 컴퓨터로 코드를 다운로드
05 · 빈칸 채우기
Node.js 앱을 배포할 때, 플랫폼은 서버를 시작할 _____ 명령(예: 'node app.js')을 알아야 해요.
06 · 읽기
잠시 방금 일어난 일을 음미하세요. 지구 반대편의 누군가가 지금 내 URL을 입력해서 내가 만든 걸 쓸 수 있어요. 코드를 썼고, 배포했고, 이제 진짜 서버에서 돌아가요.
대부분의 엔지니어가 평생 기억하는 순간이에요. 자기 프로젝트가 처음 라이브가 된 순간이요.
07 · 퀴즈
.env 파일에 데이터베이스 비밀번호와 API 키가 있어요. Render에 배포할 때 이 값들을 어떻게 처리해야 할까요?
- .env 파일을 git에 commit해서 Render가 읽을 수 있게 함
- 배포 전에 소스 코드에 붙여넣기
- Render 고객 지원에 이메일 보내기
- Render의 환경 변수 설정에 입력 — git에 절대 commit 금지
08 · 빈칸 채우기
Render에 Node.js 앱을 배포할 때, _____ 명령(예: 'npm install')이 플랫폼에 프로젝트 의존성을 어떻게 설치할지 알려줘요.
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.