728x90
들어가며
현재 AWS 클라우드 스쿨 3기에서 교육을 받고 있습니다. 최근에는 도커에 대해서 교육 받고 있는데, 수업 중 nginx 이미지를 컨테이너로 띄워서 접속하는 예제를 진행했었습니다. 간단히 진행하고 넘어가서, 좀 더 알아볼까라는 생각으로 토이 프로젝트 진행했습니다. 아래 프로세스는 도커 공식 기술 블로그를 참고하여 진행했습니다. 해당 링크는 https://www.docker.com/blog/how-to-use-the-official-nginx-docker-image/ 입니다.
01 _ 로컬에서 스태틱 웹 서버 실행
01 _ 01 _ Docker Hub 에서 official NGINX image 가져온 후, RUN
- 터미널 창에 다음 명령어 실행
- 참고로 필자는 Pycharm이 익숙해서, Pycharm 터미널을 사용한다.
- 공식 문서는 VScode를 추천한다.
$ docker run -it --rm -d -p 8000:80 --name web nginx- 명령어를 실행 하면 다음과 같은 출력을 확인할 수 있다.
더보기
필자는 공식 문서와 다른 명령어를 실행시켰다. 공식 문서에서는 다음과 같은 명령어를 실행시킨다.
$ docker run -it --rm -d -p 8080:80 --name web nginx하지만 필자는 다음과 같은 에러가 발생하여 포트를 8000으로 변경하였다.
에러가 발생한 이유는, 현재 8080 포트로 띄어놓은 것이 있기 때문에 사용할 수 없어서 이다.
따라서 사용 가능한 포트로 재설정한 것이다.
01 _ 02 _ 띄운 웹 페이지 확인
- http://localhost:8000 접속
- NGINX 웹 페이지를 확인 수 있다.
01 _ 03 _ 컨테이너 종료
- 현재 상황은 NGINX 컨테이너가 띄워진 상태이다.
- 참고로, 01 _ 02 에서 실행한 명령어에 의해 컨테이너 이름이 web 이다.
- 이 외에 다른 컨테이너들은 필자가 이전에 띄어놓은 컨테이너들이다.
- 다음 명령어를 실행하여, 실행 중인 컨테이너를 종료시킨다.
$ docker stop web
02 _ NGINX 웹 페이지 커스터마이징
02 _ 01 _ NGINX 웹 페이지 현재 상황
- 아래 페이지가 보이는 상황
- 현재 페이지에 대한 html 코드
- /usr/share/nginx/html/index.html 에 위치해 있으며, 다음과 같이 확인할 수 있다.
02 _ 02 _ bind mount volume을 통해, html 웹 페이지 커스터마이징
- 로컬 디렉토리에 다음 파일을 작성 및 저장
- 디렉토리 명: site-content
- html 파일 명: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Docker Nginx</title>
</head>
<body>
<h2>Hello from Nginx container</h2>
</body>
</html>
- 로컬 디렉토리를 마운트하여, 웹 페이지 수정
- 참고로, 로컬 디렉토리를 마운트하는 것이 bind mount 이며 마운트 된 디렉토리는 docker에서 volume로 사용된다.
- 아래 명령어 실행
$ docker run -it --rm -d -p 8000:80 --name web -v /Users/dayoungjung/PycharmProjects/docker_nginx/site-content:/usr/share/nginx/html nginx02 _ 03 _ 웹 페이지 확인
- http://localhost:8000 접속하면, 다음과 같이 수정된 화면을 확인할 수 있다.
03 _ NGINX Image 커스텀 후, Build
03 _ 01 _ Dockerfile 생성
- 아래를 참고하여, Dockerfile 생성
# Dockerflie
FROM nginx:latest
COPY ./site-content/index.html /usr/share/nginx/html/index.html
03 _ 02 _ Image Build
- 다음 명령어 실행
$ docker build -t webserver .- 실행 후 확인할 수 있는 터미널 출력
- 참고로, (7/7) FINISHED는 이미지의 레이어 총 7개 중 7개가 실행되었다는 의미
03 _ 03 _ Container Run
- 빌드된 이미지를 통해, 컨테이너를 띄우기 위해 다음 명령어 실행
$ docker run -it --rm -d -p 8000:80 --name web webserver
03 _ 04 _ 웹 페이지 확인
- localhost:8000 접속하여, 다음과 같은 화면을 확인한다.
04 _ Reverse Proxy Server 설정
04 _ 01 _ front-end application 과 backend API 오픈소스 가져오기
- 다음 명령어를 실행하여, 깃허브로부터 오픈소스 가져오기
$ git clone https://github.com/pmckeetx/docker-nginx.git
- 클론한 레포를 확인할 수 있다.
- 생성된 폴더 명: docker-nginx
04 _ 02 _ nginx.conf 수정 ( 선택 사항 )
- 만약 8080 포트를 사용하지 못한다면, 포트 변경하기
- 파일 경로: frontend/nginx/nginx.conf
- 수정한 부분: 이미지에서 그래그한 부분 (예시는 8000으로 변경함)
04 _ 03 _ 웹 서버 컨테이너 띄운후, 확인
- 아래 명령어 실행하여, 컨테이너 띄우기
- 명령어 실행 전, docker-compose.yml 파일이 있는 경로로 이동하는 것은 필수
$ docker-compose up더보기
에 러 발 생 해 결 중
패키지 패치가 이렇게 오래 걸리는 거 보면 예제가 옛날거라 버전 충돌인가
라는 생각 중
버전 에러 맞네
04 _ 04 _ node.js 버전 변경
- docker-compose up을 통해, 컨테이너 띄었지만 에러 발생
- 참고로, backend는 layer 6개 모두 성공적으로 build
- frontend building 에서 에러 발생했으므로, frontend 만 수정할 예정
- 에러 로그 살펴보니, 버전 문제
- 현재 dokcer hub 에서 가져온 node.js의 버전은 12.18.2
- 하지만 요구된 버전은 14 이상
- 따라서, 버전 수정 진행
- 파일 경로: docker-nginx/frontend/Dockerfile
# 기존 코드
FROM node:12.18.2 as build
# 수정 후 코드
FROM node:14 as build
04 _ 05 _ 다시 웹 서버 컨테이너 띄우기
- 아래 명령어 실행하여, 컨테이너 띄우기
$ docker-compose up
- 성공적으로 실행된 로그 확인
- frontend의 worker process & backend port 확인
04 _ 06 _ 띄운 웹 페이지 확인
- http://localhost 접속
- 유저가 엔티티 입력했을 때, 입력값이 Results 를 통해 자동으로 화면에 출력되는 것을 확인할 수 있다.
- 실제로, 로그를 확인해보면 backend 에서 GET 하고 frontend 를 통해 출력되는 것을 확인할 수 있다.
04 _ 07 _ 개발자 도구로, 네트워크 살펴보기
- 입력한 엔티티 요청에 대한 로그를 확인할 수 있다.
- HTTP 상태코드가 표시된 것을 확인할 수 있다.
- 하나의 엔티티에 대한 헤더를 확인해 보면,
- 이는 frontend/nginx/nginx.conf 에서 설정한 프록시 헤더와 같은 것을 확인할 수 있다.
끝 :) !
'Cloud > Docker' 카테고리의 다른 글
| 컨테이너화 (Containerization) (0) | 2023.04.10 |
|---|
