소개
LITTLE HOUR에는 완성된 카페 메뉴가 있고, 주말 팝업 매장에서도 같은 웹사이트가 필요합니다. 홈페이지만으로는 부족합니다. 고객은 음료 상세 정보, 가격, 로컬 일러스트와 영업시간도 확인해야 합니다. 이 모든 경험을 Docker 이미지로 전달하는 것이 여러분의 역할입니다.
제공된 파일을 패키징하고 이미지를 실행한 다음, 새 컨테이너를 시작하여 실제 웹사이트를 확인합니다. 애플리케이션 코드를 작성하거나 Docker를 설치하지 않습니다. 기본 터미널 사용에 익숙하면 충분합니다. Docker, 경로, 포트와 명령은 사용할 때 설명합니다. 카페, 제품, 가격과 주소는 모두 가상입니다.
터미널 명령에는 Workstation, 제공된 디자인에는 Reference Menu, 실행한 컨테이너에는 Your Menu, 환경 구성도에는 Topology를 사용합니다. Your Menu는 2단계에서 컨테이너를 시작한 뒤 사용할 수 있으며, 그전에는 접속되지 않을 수 있습니다. 각 실습은 독립된 환경에서 시작합니다.
완전한 메뉴 이미지 빌드하기
이번 단계에서는 카페의 요구 사항을 이해하고 고객 웹사이트 전체를 담은 이미지를 빌드합니다. Reference Menu에서 시작하세요.
고객 경험 살펴보기
홈페이지는 LITTLE HOUR를 소개합니다. A few good favourites에서 Flat white를 여세요. 상세 페이지에는 $4.00, 제공량과 알레르기 유발 성분이 표시됩니다. Find us로 영업시간을 확인하고 LITTLE HOUR로 홈에 돌아오세요. 링크와 일러스트도 전달 대상이며 선택적인 장식이 아닙니다.
참고 사이트는 포트 8082에 준비되어 있습니다. 자신의 컨테이너가 중지되어도 계속 열리므로, 이를 납품 성공의 증거로 사용하면 안 됩니다.
전달할 파일 찾기
Workstation으로 전환하세요. 터미널은 /home/labex/project/cafe-menu에서 시작합니다. pwd는 현재 디렉터리, ls는 그 안의 이름을 출력합니다.
pwd
/home/labex/project/cafe-menu
ls
menu, brand, notes가 보여야 합니다. menu/에는 고객 페이지, brand/에는 스타일시트와 일러스트가 있습니다. notes/는 제작자 자료이므로 공개 메뉴에 포함하면 안 됩니다. 제공된 파일은 변경하지 마세요.
웹사이트의 주소는 URL 경로입니다. 서버는 /menu/flat-white.html을 공개 디렉터리 아래의 파일에 연결합니다. 바깥쪽 소스 폴더 menu/에는 상세 페이지용 안쪽 menu/ 디렉터리가 있습니다. 두 소스 그룹을 확인하세요.
ls menu
ls brand
페이지에는 index.html, visit.html, 404.html과 상세 디렉터리가 포함됩니다. 브랜드 파일에는 site.css와 .svg 일러스트 세 개가 있습니다. SVG는 이미지 형식입니다. 페이지는 실행 중인 사이트의 모든 브랜드 파일이 /assets/ 아래에 있다고 가정합니다.
패키징 레시피 작성하기
Docker는 컨테이너에서 프로그램을 실행합니다. 이미지는 컨테이너를 만들 때 쓰는 저장된 패키지이고, 컨테이너는 그 이미지의 실행 중이거나 중지된 인스턴스입니다. Docker는 이미 설치되어 있습니다. 준비된 이미지 menu-base:1에는 웹 서버 Nginx와 없는 페이지에 대한 설정이 있습니다. 공개 디렉터리는 /usr/share/nginx/html/입니다. 카페 메뉴는 아직 들어 있지 않습니다.
Dockerfile은 이미지 빌드 방법을 설명합니다. FROM은 기본 이미지를 선택합니다. COPY는 파일을 이미지로 복사합니다. 첫 경로는 빌드 디렉터리 기준의 원본이고, 두 번째는 이미지 내부 목적지입니다. 디렉터리 내용을 올바른 위치로 복사하면 기존 링크가 유지됩니다. 실행 컨테이너를 소스 디렉터리에 연결하는 동작은 아닙니다.
복사를 두 번 명시합니다. 페이지는 공개 디렉터리로, 브랜드 파일은 그 아래 assets/로 보냅니다. 이렇게 하면 제작자 메모가 제외됩니다. Nginx 기본 이미지가 서버 시작 명령을 이미 정의하므로 추가할 필요가 없습니다.
cat > Dockerfile은 해당 파일을 다음 텍스트로 바꿉니다. 따옴표가 있는 DOCKERFILE은 here-document를 시작합니다. 마지막의 단독 DOCKERFILE 줄까지 블록 전체를 붙여 넣으세요. 따옴표는 내용을 문자 그대로 유지합니다. Workstation에서 실행하세요.
cat > Dockerfile <<'DOCKERFILE'
FROM menu-base:1
COPY menu/ /usr/share/nginx/html/
COPY brand/ /usr/share/nginx/html/assets/
DOCKERFILE
cat은 파일을 출력할 때도 사용합니다. 빌드 전에 저장한 레시피를 읽고 두 목적지를 비교하세요.
cat Dockerfile
저장할 이미지 빌드하기
docker build는 레시피를 읽고 이미지를 만듭니다. -t는 이름과 태그를 지정합니다. little-hour-menu가 이름이고 1은 선택한 버전 표시입니다. 마지막 점은 현재 디렉터리를 빌드 컨텍스트, 즉 Docker가 빌드에 사용할 수 있는 파일 범위로 지정합니다. 태그는 편리한 이름이지 완전한 내용의 증거는 아닙니다.
docker build -t little-hour-menu:1 .
출력은 Docker 버전에 따라 다릅니다. 명령이 성공하고 little-hour-menu:1을 식별해야 합니다. COPY가 실패하면 pwd, 원본 이름과 저장된 Dockerfile을 확인하고 레시피를 고친 뒤 같은 빌드 명령을 다시 실행하세요. 경로 실수를 감추려고 제공된 페이지를 바꾸거나 프로젝트 전체를 복사하지 마세요.
이제 저장된 전달용 이미지가 있습니다. 메뉴 컨테이너는 아직 실행되지 않았습니다.
이미지를 실행 중인 메뉴로 공개하기
이번 단계에서는 자신의 컨테이너를 만들고 웹사이트를 엽니다. Workstation에서 시작하세요.
컨테이너를 웹사이트 포트에 연결하기
Nginx는 컨테이너 내부 포트 80에서 수신합니다. 포트는 네트워크 서비스를 식별합니다. Your Menu가 접근하도록 실습 인스턴스의 포트 8081로 공개합니다. 포트 8082의 참고 사이트는 바뀌지 않습니다.
docker run은 컨테이너를 만들고 시작합니다. -d는 백그라운드로 실행하여 터미널을 계속 쓸 수 있게 합니다. --name cafe-menu는 나중에 쓸 이름을 지정합니다. -p 8081:80은 실습의 포트 8081을 컨테이너의 포트 80으로 연결합니다. 마지막 인자는 빌드한 이미지를 선택합니다. 소스 디렉터리나 볼륨은 마운트하지 않습니다.
docker run -d --name cafe-menu -p 8081:80 little-hour-menu:1
긴 출력은 새 컨테이너 ID이며 실행마다 달라집니다. ID만으로 애플리케이션이 계속 실행 중임을 알 수는 없습니다. docker ps는 실행 중인 컨테이너를 보여 줍니다.
docker ps
cafe-menu, 이미지 little-hour-menu:1, 8081->80/tcp가 포함된 매핑을 찾으세요. 다른 교육용 컨테이너가 보여도 건드리지 마세요.
이름이 이미 사용 중이라면 다른 이름으로 여러 복사본을 시작하지 마세요. docker ps에서 자신의 컨테이너를 찾아 올바르면 계속 진행합니다. 종료되었거나 매핑이 잘못되었다면 docker logs cafe-menu로 서버 메시지를 봅니다. 자신의 정적 메뉴 컨테이너만 교체할 때는 docker rm -f cafe-menu로 해당 이름의 컨테이너를 중지하고 삭제합니다. 이미지와 소스 파일은 유지됩니다.
레시피나 포트를 수정한 뒤 필요하면 다시 빌드하고 원래 docker run을 반복하세요. 삭제 명령은 교체가 필요할 때만 쓰며, 성공적으로 시작할 때마다 실행하지 않습니다.
자신의 전달 결과 열기
Your Menu로 전환하세요. 컨테이너 시작 전에 열었다면 새로고침하세요. 레이아웃과 일러스트가 완전한 LITTLE HOUR가 보여야 합니다. 포트 8081에서 온 페이지이며 제공된 Reference Menu가 아닙니다.
A few good favourites에서 Flat white를 여세요. 그림, 가격, 제공량과 알레르기 정보가 있어야 합니다. Find us에서 시간을 확인한 뒤 같은 탭의 LITTLE HOUR로 홈에 돌아오세요. 글자만 있는 홈페이지나 깨진 그림은 완전한 전달이 아닙니다.
Topology로 전환하세요. 이제 Menu homepage reachable이 표시될 수 있습니다. 이는 제한된 관찰이며 모든 페이지의 합격 판정은 아닙니다. 다음으로 독립 실행 여부와 나머지 고객 경로를 확인합니다.
새 컨테이너와 웹사이트 전체 확인하기
이미지에서 새 인스턴스를 시작하고 제작자 디렉터리에 의존하지 않는 전체 고객 경험을 확인합니다. Workstation에서 시작하세요.
이미지와 컨테이너 구별하기
컨테이너를 삭제해도 이미지는 저장되어 있습니다. 이 사이트에는 고객 제출 데이터나 데이터베이스가 없으므로 이 컨테이너를 교체해도 업무 데이터가 사라지지 않습니다. 상태가 있는 애플리케이션에서는 이 차이가 중요합니다.
2단계의 교체 명령으로 cafe-menu만 삭제합니다.
docker rm -f cafe-menu
같은 공개 포트로 새 인스턴스를 시작합니다.
docker run -d --name cafe-menu -p 8081:80 little-hour-menu:1
다른 컨테이너 ID가 출력됩니다. 다시 빌드하거나 제작자 디렉터리를 마운트하지 않았습니다. 새 인스턴스는 이미지에 이미 들어 있는 파일을 씁니다.
docker inspect는 컨테이너의 실제 설정을 보여 줍니다. --format은 전체 객체 대신 한 필드를 선택합니다. 따옴표 안 템플릿은 마운트 목록을 JSON으로 바꿉니다.
docker inspect cafe-menu --format '{{json .Mounts}}'
[]
빈 목록은 호스트 디렉터리나 볼륨 마운트가 없다는 뜻입니다. 이 실습에서 원하는 증거입니다. 소스 파일이 전달 결과의 부족한 부분을 몰래 채우지 않습니다. 마운트는 다른 상황에서는 유용하지만, 여기서는 자체적으로 완전한 정적 메뉴가 필요합니다.
실제 고객 경로 테스트하기
Your Menu에서 새로고침하고 세 추천 상품을 차례로 선택합니다. Flat white는 $4.00, Espresso는 $3.00, Iced oat latte는 $4.75입니다. 각 상세에 올바른 그림과 정보가 있어야 합니다. 매번 LITTLE HOUR로 돌아옵니다. Find us에서 평일 영업시간 08:00–17:00을 확인합니다. Your Menu 안에서 검사하세요. Reference Menu는 다른 서버를 테스트합니다.
Workstation으로 전환합니다. HTTP는 브라우저가 사용하는 요청과 응답 프로토콜입니다. 성공 응답 상태는 200, 404는 요청한 리소스가 없다는 뜻입니다. 연결 실패는 다릅니다. 정상적인 서버 응답을 받지 못한 것입니다.
curl은 요청을 보냅니다. -sS는 진행률을 숨기고 연결 오류는 표시합니다. -o /dev/null은 응답 본문을 버립니다. -w는 따옴표 안 형식을 출력하며 %{http_code}는 상태, \n은 줄바꿈입니다. Workstation에서 127.0.0.1은 이 실습 인스턴스를 가리킵니다. 자신의 컴퓨터 터미널에서 실행하지 마세요.
curl -sS -o /dev/null -w '%{http_code}\n' http://127.0.0.1:8081/menu/flat-white.html
200이 출력되어야 합니다. 앞선 브라우저 검사로 내용과 그림도 확인했습니다. 잘못된 페이지를 담은 200만으로는 부족합니다.
제작자 메모는 공개하면 안 됩니다. 예상 URL을 요청하세요.
curl -sS -o /dev/null -w '%{http_code}\n' http://127.0.0.1:8081/notes/launch-notes.txt
예상 결과는 404입니다. 패키징 경계에서는 의도한 성공입니다. HTTP 오류 응답에서 실패하도록 요구하지 않았으므로 curl은 정상 종료합니다. 사이트 전체를 중지하면 정상 메뉴 검사에 통과하지 못합니다.
Your Menu로 돌아가 LITTLE HOUR로 홈을 엽니다. 메모 요청을 거절한 뒤에도 일반 메뉴는 작동해야 합니다. 완전한 고객 콘텐츠와, 전달 대상이 아닌 리소스에 대한 적절한 응답을 모두 확인했습니다.
요약
완전한 정적 메뉴 이미지를 빌드하고 서버 포트를 공개했으며 소스 마운트 없이 새 컨테이너를 시작했습니다. 실제 페이지, 그림과 방문 정보를 확인하고 제작자 메모는 공개 사이트에서 제외했습니다. 다음 독립 챌린지에서는 다른 소스 구조를 가진 베이커리에 같은 판단을 적용합니다.
