웹 프론트엔드 프로젝트(HTML, CSS, Nginx)를 Docker로 배포하기
1. 폴더 생성 후 vscode에서 오픈
mkdir webpage
2. css, html 파일 생성파일은 간단하게 만들자.
index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Page</h1>
</body>
</html>
style.css
* {
color: blue;
}
3. Dockerfile 생성
html, css 파일을 배포하고 운영하게끔 해주는 서버의 역할을 하는 프로그램은 nginx를 사용해보자.
FROM nginx
COPY ./ /usr/share/nginx/html=> 컨테이너 디렉터리 경로는 도커허브 nginx에서 확인한 것
4. 빌드
docker build -t my-web-server .
5. 실행
docker run -d -p 80:80 nginx
nginx는 80 포트에서 실행된다.
6. 확인해보자.
=> nginx를 활용해서 정적 페이지 호스팅에 성공했다.
7. 컨테이너에 들어가서 확인해보자 .
docker exec -it 08aa bash
* Inflearn(인프런) ‘비전공자도 이해할 수 있는 Docker 입문/실전’ 강의 참고
'DevOps > Docker' 카테고리의 다른 글
| [Docker 실습] Docker Compose를 이용해 Nginx 설치 및 실행시키기 (0) | 2024.07.04 |
|---|---|
| [Docker 기본] Docker Compose를 활용해 컨테이너 관리하기 (0) | 2024.07.04 |
| [Docker 실습] 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기 (0) | 2024.07.04 |
| [Docker 실습] 백엔드 프로젝트(Nest.js)를 Docker로 실행시키기 (0) | 2024.07.03 |
| [Docker 기본] EXPOSE: 컨테이너 내부에서 사용 중인 포트를 문서화하기 (0) | 2024.07.03 |
