JSCODE Logo
프로그래밍 과외블로그후기멘토진
회사명 : JSCODE대표 : 박재성사업자 등록번호 : 244-22-01557통신판매업 : 제 2023-인천미추홀-0381 호
학원 명칭 : 제이에스코드(JSCODE)원격학원학원설립ㆍ운영 등록번호 : 제6063호

서울특별시 구로구 경인로 20가길 11(오류동, 아델리아)

Copyright ⓒ 2025 JSCODE - 최상위 현업 개발자들의 프로그래밍 교육 All rights reserved.

이용약관개인정보처리방침
← 블로그 목록으로 돌아가기

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

JSCODE 박재성
JSCODE 박재성
2025-12-01
author
JSCODE 박재성
category
Docker
createdAt
Dec 1, 2025
series
비전공자도 이해할 수 있는 Docker 입문
slug
run-html-with-docker-compose
type
post
updatedAt
Dec 1, 2025 12:07 PM

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

  1. HTML, CSS 파일 만들기
    1. 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; }
       
  1. Dockerfile 작성하기
    1. Dockerfile
      FROM nginx COPY ./ /usr/share/nginx/html
       
  1. compose 파일 작성하기
    1. 참고) 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
       
  1. compose 파일 실행시키기
    1. $ docker compose up -d --build
       
  1. compose 실행 현황 보기
    1. $ docker compose ps $ docker ps
       
  1. localhost:80으로 들어가보기
    1. notion image
       
  1. compose로 실행된 컨테이너 삭제
    1. $ docker compose down
 
 
 
author
category
Docker
createdAt
series
비전공자도 이해할 수 있는 Docker 입문
slug
type
series-footer
updatedAt
Jan 12, 2026 12:04 AM
📎
이 글은 비전공자도 이해할 수 있는 MySQL 성능 최적화 입문/실전 (SQL 튜닝편) 강의의 수업 자료 중 일부입니다.