[Docker] Nginx 이미지로 프론트엔드 서버 실행하기

[실습] 웹 프론트엔드 프로젝트 (HTML, CSS, Nginx) 를 Docker로 배포하기

 

✅ 웹 프론트엔드 프로젝트(HTML, CSS, Nginx)를 Docker로 배포하기

 

1. 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;
}

 

2. Dockerfile 작성하기

 

https://hub.docker.com/_/nginx

 

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

 

3. Dockerfile을 바탕으로 이미지 빌드하기

docker build -t my-web-server .

 

 

4. 이미지가 잘 생성됐는 지 확인하기

$ docker image ls

 

5. 생성한 이미지를 컨테이너로 실행시켜보기 

$ docker run -d -p 80:80 my-web-server

 

 

6. 컨테이너 잘 실행되고 있는 지 확인하기

$ docker ps

 

 

7. localhost:80으로 돌아가보기

8. 실행시킨 컨테이너 중지 / 삭제하기, 이미지 삭제하기

$ docker stop {컨테이너 ID}
$ docker rm {컨테이너 ID}
$ docker image rm {이미지 ID}

 

 

그림으로 이해하기