도커 입문 28강 - 도커컴포즈 Nginx로 html 실행해보기

[실습목표]

React를 npm start로 실행하는 것은 NodeJs를 이용한 방법이고, 이번 강의에서는 해당 방법을 이용하지 않고, Nginx로 실행하는 방법을 알아보자.

 

React를 어렵게 생각하지 말고 JS로 화면을 그리는 라이브러리로 생각하자.

React -> build -> html로 만들고,

웹서버(Nginx)를 이용해서 해당 html을 전달하게 하는 것이 최종 목적이다.

 

 

[실습 하기 전]

예전 16강에서 ex03에 Dockerfile을 이용한 Nginx구축을 한 적이 있다. 해당 강의가 기억나지 않으면 한번 리마인드 하고 오자.

https://ilikecoding.tistory.com/98

도커 입문 16강 - docker file step4 - nginx 내부구성 알아보기

 

실습 디렉토리 : ~/ex09 (27강에서 이미 생성하였다.)

생성 디렉토리 : ex09$ mkdir -p nginx/webapp (nginx -> webapp 디렉토리를 생성해준다.)

 

1. index.html 생성 (ex09 -> nginx -> webapp)

> ~/ex09/nginx/webapp$ vi index.html

#vi 에디터에서 아래와 같이 작성 후 저장해준다.
<h1>My nginx</h1>

 

2. Dockerfile 생성 (ex09 -> nginx)

ex09/nginx$ touch Dockerfile

16강 때와 다르게 현재 시점에서 설정파일은 별로 중요하지 않다.

 

Dockerfile

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

ENTRYPOINT ["nginx","-g", "daemon off;"]

 

3. Dockerfile 빌드 및 nginx 컨테이너 실행

docker build -t nginx-app ./

빌드하기

docker run -d -p 9011:80 --name=nginx-test nginx-test

이미지 실행하기

 

4. 접속해보기

[서버IP]:9011 로 접속해보면 설정한 index.html이 제대로 전달되는지 확인하면 된다.

 

설정한 index가 제대로 나오는 것을 확인할 수 있다.