웹사이트 공개 1편: 전체 구조와 준비물
웹사이트 공개 실습 1/14 · 가상 프로젝트 작은 작업실 기준입니다.
example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요.
이번 편의 목표
도메인을 사기 전에 무엇을 만들고 어디서 실행할지 정합니다. 이 시리즈는 Next.js로 만든 작은 소개·글 목록 사이트를 Docker로 실행하고 Cloudflare Tunnel로 공개합니다. 관리자·게시판·결제는 만들지 않습니다. Google 로그인은 10편의 선택 실습입니다.
주소가 연결되는 순서
방문자 브라우저
→ 내 도메인의 Cloudflare 연결
→ Cloudflare Tunnel
→ Docker의 web 서비스
→ 작은 작업실 화면
- 로컬: 내 컴퓨터에서 확인하는 환경입니다.
localhost는 지금 사용하는 기기 자신입니다. - 서버: 웹 요청에 응답하는 프로그램과 그 실행 환경입니다. 외부에 공개한 동안에는 계속 실행되어야 합니다.
- 도메인: 방문자가 입력할 이름입니다. 구매만으로 앱이 실행되지는 않습니다.
- 네임서버·DNS: 도메인 정보를 관리하고 연결 대상을 찾는 체계입니다.
- HTTPS: 브라우저와 서비스 사이의 암호화된 접속입니다. 인증서 존재와 HTTP 자동 전환은 따로 확인합니다.
준비하기
- 실습용 빈 폴더
mini-workshop을 정합니다. 기존 운영 프로젝트 안에서 시작하지 않습니다. - 이미 사용할 수 있는 AI 코딩 도구 하나와 코드 편집기를 준비합니다. 여러 도구가 같은 폴더를 동시에 고치지 않도록 합니다.
- Node.js 한국어 다운로드에서 24.x LTS와 내 운영체제·칩에 맞는 설치 프로그램을 선택합니다. 이 예제의 컨테이너도 Node 24 기준입니다. 최신 버전이 반드시 24라는 뜻은 아닙니다.
- 설치 후 터미널을 새로 열고 아래 명령을 한 줄씩 실행합니다. 번호나 코드 울타리는 붙여넣지 않습니다.
node --version
npm --version
v24...와 npm 버전 숫자가 나오면 준비됐습니다. Mac은 터미널, Windows는 PowerShell 또는 편집기의 통합 터미널에서 실행합니다. Docker와 Cloudflare 계정은 뒤 단계에서 준비하므로 지금 결제할 필요는 없습니다.
자주 막히는 지점
도메인부터 사야 하나요? 4편까지는 구매 없이 가능합니다. 공개할 이름이 확정됐을 때 구매합니다.
설치했는데 명령을 찾지 못해요. 새 터미널에서도 같은지 확인합니다. 다운로드만 하고 설치를 끝내지 않았거나 PATH가 적용되지 않은 경우를 구분하세요.
이 방법이면 서버 관리가 없어지나요? 아닙니다. Tunnel은 연결 방법입니다. 앱 업데이트·백업·실행 상태 확인은 운영자가 해야 합니다.
완료 기준과 확인 범위
Node와 npm 버전을 확인하고, 빈 실습 폴더를 정했다면 2편으로 갑니다. 예제는 Node 24 컨테이너에서 빌드·실행을 확인했습니다. 모든 OS의 설치 프로그램을 직접 실행한 것은 아닙니다.
공식 자료 확인: 2026-11-15. Node.js 한국어 안내, Next.js 배포 공식 문서(영문).