[실습] Docker Compose로 프론트엔드(HTML, CSS, Nginx) 실행시키기

author

JSCODE 박재성

✅ Docker Compose로 프론트엔드(HTML, CSS, Nginx) 실행시키기

HTML, CSS 파일 만들기

index.html


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>My Web Page</h1>
</body>
</html>

주의) Nginx의 기본 설정에 의하면 메인 페이지(첫 페이지)의 파일명을 index.html이라고 지어야 한다.

style.css


* {
  color: blue;
}

Dockerfile 작성하기

Dockerfile


FROM nginx 
COPY ./ /usr/share/nginx/html

compose 파일 작성하기

참고) compose를 작성하지 않고 Docker CLI로 실행시킬 때


$ docker build -t my-web-server .
$ docker run -d -p 80:80 my-web-server

compose.yml


services:
  my-web-server:
    build: .
    ports:
      - 80:80

compose 파일 실행시키기


$ docker compose up -d --build

compose 실행 현황 보기


$ docker compose ps
$ docker ps

localhost:80으로 들어가보기

compose로 실행된 컨테이너 삭제


$ docker compose down

author

✅ Docker Compose로 프론트엔드(HTML, CSS, Nginx) 실행시키기

HTML, CSS 파일 만들기

index.html


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>My Web Page</h1>
</body>
</html>

주의) Nginx의 기본 설정에 의하면 메인 페이지(첫 페이지)의 파일명을 index.html이라고 지어야 한다.

style.css


* {
  color: blue;
}

Dockerfile 작성하기

Dockerfile


FROM nginx 
COPY ./ /usr/share/nginx/html

compose 파일 작성하기

참고) compose를 작성하지 않고 Docker CLI로 실행시킬 때


$ docker build -t my-web-server .
$ docker run -d -p 80:80 my-web-server

compose.yml


services:
  my-web-server:
    build: .
    ports:
      - 80:80

compose 파일 실행시키기


$ docker compose up -d --build

compose 실행 현황 보기


$ docker compose ps
$ docker ps

localhost:80으로 들어가보기

compose로 실행된 컨테이너 삭제


$ docker compose down