Docker #4 자신의 Frontend (HTML, JS, CSS) 개발 코드를 컨테이너로 만들고 이것을 실행시켜 보자

Docker #4 자신의 Frontend (HTML, JS, CSS) 개발 코드를 컨테이너로 만들고 이것을 실행시켜 보자 #

#2025-08-04

#조건

  1. nginx:alpine 이미지를 사용
  2. 노출 Port는80
  3. nginx를실행하는방식은 -nginx -g daemon off;
  4. nginx의 routing 설정은 default.conf에설정한다.

#path

$ pwd
/Users/yshmbid/rde/config/workspace/exec-template

$ ls
Dockerfile      default.conf    deploy          deploy.yaml     docker-build.sh docker-push.sh  service.yaml    src

#

1. docker-build.sh와 docker-push.sh 복사 #

$ pwd
/Users/yshmbid/rde/config/workspace/container/05.webserver
$ ls
Dockerfile      default.conf    deploy          docker-build.sh docker-push.sh  src

# docker-build.sh

#!/bin/bash
NAME=sk019
IMAGE_NAME="healthcheck-server" #IMAGE_NAME="webserver"

VERSION="1.0.0"
CPU_PLATFORM=arm64 #amd64

# Docker 이미지 빌드
docker build \
  --tag ${NAME}-${IMAGE_NAME}:${VERSION} \
  --file Dockerfile \
  --platform linux/${CPU_PLATFORM} \
  ${IS_CACHE} .

docker-build.sh에서 amd였던걸 arm으로 바꿔줫고

# docker-push.sh

#!/bin/bash
NAME=sk019
IMAGE_NAME="healthcheck-server" #IMAGE_NAME="webserver"

VERSION="1.0.0"

DOCKER_REGISTRY="amdp-registry.skala-ai.com/skala25a"
DOCKER_REGISTRY_USER="robot\$skala25a"
DOCKER_REGISTRY_PASSWORD="1qB9cyusbNComZPHAdjNIFWinf52xaBJ"
DOCKER_CACHE="--no-cache"

# 1. Docker 레지스트리에 로그인 (옵션: 이 스크립트를 실행하기 전에 미리 로그인해두어도 됩니다)
echo ${DOCKER_REGISTRY_PASSWORD} | docker login ${DOCKER_REGISTRY} \
	-u ${DOCKER_REGISTRY_USER}  --password-stdin \
   	|| { echo "Docker 로그인 실패"; exit 1; }

# 2. harbor 로 push 하기 위해 tag 추가
#docker tag  ${NAME}-${IMAGE_NAME}.amd64:${VERSION} ${DOCKER_REGISTRY}/${NAME}-${IMAGE_NAME}.amd64:${VERSION}
docker tag  ${NAME}-${IMAGE_NAME}.arm64:${VERSION} ${DOCKER_REGISTRY}/${NAME}-${IMAGE_NAME}.arm64:${VERSION}


# Docker 이미지 푸시
#docker push ${DOCKER_REGISTRY}/${NAME}-${IMAGE_NAME}.amd64:${VERSION}
docker push ${DOCKER_REGISTRY}/${NAME}-${IMAGE_NAME}.arm64:${VERSION}

docker-push.sh에서 마찬가지 amd를 arm으로 바꿔줌.

#

2. Dockerfile과 default.conf 작성 #

# Dockerfile

# nginx 기반 이미지 사용
FROM nginx:alpine

# 커스텀 nginx 설정 파일 복사
COPY default.conf /etc/nginx/conf.d/

# index.html을 /usr/share/nginx/html/ 경로에 복사 << 추가
COPY src/ /usr/share/nginx/html/

# nginx 포트 노출
EXPOSE 80

# nginx 실행 (기본 CMD가 이미 설정되어 있음)
CMD ["nginx", "-g", "daemon off;"]

원래 코드에 COPY src/ /usr/share/nginx/html/이 없었는데 필요한거아닌가 싶어서 넣어줬다.

# default.conf 

server {
    listen 80;
    
    # 정적 파일 서빙
    location /sk019 {
        alias /usr/share/nginx/html/;
        try_files $uri $uri/ /index.html;
        
    }
}

#

3. 파일 구조 #

/workspace
└── exec-template
     ├── Dockerfile
     ├── default.conf
     ├── docker-build.sh
     ├── docker-push.sh
     ├── deploy/
     └── src/
         ├── index.html      
         └── media/

index.html이랑 이미지 디렉토리 media는 src 디렉토리에 넣었다.

#

4. 이미지 push build + docker run #

$ sudo ./docker-push.sh
$ sudo ./docker-build.sh
$ sudo docker run -d --name posts-get --network bridge -p 8888:80 sk019-posts-get.arm64:1.0

마찬가지 run 주소도 arm으로 넣어줌.

image

잘 나온다 ㅎㅎㅎ

#

5. 헷갈리는점 #

  1. docker-build.sh에서
  • IMAGE_NAME을 healthcheck-server로 바꿔주라고 ppt에 나와있었는데 안바꾸고 webserver를 썼는데 마지막에 sudo docker run -d --name posts-get --network bridge -p 8888:80 sk019-posts-get.arm64:1.0 했을때 제대로 나왔다.
  • 근데 chatgpt 치니까 IMAGE_NAME=“healthcheck-server” 해놓고 sudo docker run -d --name posts-get 해버리면 안된다고나옴 빌드한 이미지와 실행한 이미지 이름이 다르다고 근데 원래는 달랐는데 잘되던데… 확인 필요할듯.

#

  1. default.conf는 사실 아래 코드로 바꿔넣어줬었다. index.html;을 추가한것임.
#server {
#    listen 80;

#    location /sk019/ {
#        alias /usr/share/nginx/html/;
#        index index.html;
#        try_files $uri $uri/ /index.html;
#    }
#}

이부분도 확인 필요.

#

*1에 추가: env.properties에서 SERVICE_NAME=“posts-get"가 나오긴한데 docker-build.sh와 docker-push.sh 가 앞에 source ./env.properties가 붙는 식으로 진행되면 IMAGE_NAME=“posts-get"이 적용되고 이미지 이름이 sk019-posts-get:1.0.0으로 만들어지고, run/push 시 모두 일관성이 유지되는게 맞는데?

env.properties를 불러오지도 않고, IMAGE_NAME에 healthcheck-server이 하드코딩 대있어서 연관성을찾기 어려운상태.

#