웹사이트 공개 3편: Docker 컨테이너로 실행하기
웹사이트 공개 실습 3/14 · 가상 프로젝트 작은 작업실 기준입니다.
example.com은 설명용 예약 도메인입니다. 외부 설정에는 반드시 본인 소유 도메인을 사용하세요.
이번 편의 목표
2편의 사이트를 독립된 컨테이너에서 실행합니다. Mac은 OrbStack 공식 설치 안내(영문), Windows는 Docker Desktop 공식 설치 안내(영문)를 따릅니다. OrbStack은 macOS용입니다. Windows에 같은 앱을 설치하는 안내가 아닙니다.
실행하기
- 컨테이너 앱을 설치한 뒤 앱도 실행합니다. 다운로드만으로 Docker 엔진이 켜지지는 않습니다.
mini-workshop폴더의 터미널에서docker version,docker compose version을 실행합니다. 엔진 연결 오류가 없어야 합니다.- 2편의
npm run dev가 켜져 있다면 해당 터미널에서 Ctrl+C로 종료합니다. 이번 컨테이너도 호스트의 4100 포트를 사용합니다. - 편집기에서
.env.example을 복제하고 이름을.env로 바꿉니다..env.txt가 아니어야 합니다. 이번에는 기본값을 유지합니다. - 아래 명령으로 이미지를 만들고 실행합니다.
docker compose up -d --build
docker compose ps
- 브라우저에서
http://localhost:4100을 엽니다.docker compose logs --tail=50 web으로 로그를 볼 수 있습니다. 전체 로그를 공개 게시판에 그대로 올리지는 않습니다.
파일을 읽는 방법
Dockerfile은 앱을 실행할 이미지를 만드는 순서이고, compose.yaml은 실행할 서비스·포트·볼륨 설정입니다. 예제의 매핑 127.0.0.1:4100:3000은 내 컴퓨터의 4100 → 컨테이너의 3000을 뜻합니다. 현재는 루프백으로만 열었으므로 이 단계 자체로 외부 공개되지 않습니다.
.env와 data는 .dockerignore로 이미지 복사에서 제외했습니다. 설정값과 저장 데이터는 소스 이미지와 구분합니다. 로그인 예제 라이브러리도 포함되어 있지만 계정 설정을 하지 않으면 로그인 준비 안내만 표시됩니다.
자주 막히는 지점
Docker 명령은 있는데 서버에 연결할 수 없어요. OrbStack 또는 Docker Desktop이 실행 중인지 먼저 확인합니다.
파일을 고쳤는데 컨테이너 화면은 그대로예요. 이 구성은 소스 폴더를 실시간 공유하지 않습니다. docker compose up -d --build로 재빌드해야 합니다.
컨테이너를 지우면 글도 없어지나요? 예제 기록은 site-data 이름의 볼륨에 있습니다. 컨테이너와 볼륨은 별개입니다. 특히 down -v는 볼륨 삭제를 수반하므로 이 실습에서 사용하지 않습니다.
완료 기준과 검증
web이 실행되고 4100 주소에서 같은 화면이 열리면 완료입니다. 샘플의 Docker 빌드와 HTTP 응답을 확인했습니다. Windows 가상화 설정과 설치 마법사 전체를 직접 재현한 것은 아닙니다.
공식 자료 확인: 2026-11-15. Docker Compose 네트워크 공식 문서(영문), OrbStack 시작 안내(영문).