-
Docker로 Nginx 정적 파일 서빙 & 리버스 프록시 설정MSA & 쿠버네티스(Kubernetes) - k8s 2023. 3. 4. 12:43
개요
도커가 설치되어 있다고 가정되고 진행됩니다.
도커에 대한 전반적인 지식이 조금 있다고 가정되고 진행됩니다.
Docker Nginx 이미지 받기
docker pull nginx정적파일 준비하기
echo "<html><body>Hello, Local Index.html</body></html>" >> index.html파일이 저장된 경로 /Desktop/docker
볼륨 옵션 주어 nginx 이미지 컨테이너로 생성
docker run -d --name my_nginx -p 80:80 -v [your_computer_user_path]\Desktop\docker:/mycustome/path -it nginx볼륨 기능을 통해 컨테이너와 독립하여 데이터를 관리할 수 있습니다.
컨테이너와 독립되는 호스트 PC(로컬 PC)의 저장공간에서 볼륨에 연결시켜 데이터 쓰기 작업을 진행합니다.
이제 컨테이너를 삭제해도 호스트에 기록한 볼륨은 계속 남이 있을 수 있습니다.
-v 옵션을 통하여 [나의 로컬PC 경로:연결할 도커 컨테이너의 경로]를 지정합니다
볼륨이 매핑되었는지 확인
docker exec -it my_nginx bash cd /mycustome/path/ ls Dockerfile docker-compose.yml index.html- my_nginx 컨테이너의 bash에 접속합니다.
- /mycustome/path/로 이동합니다.
- ls 명령어로 해당 path에 파일들을 탐색합니다.
- local pc에 존재했던 파일들이 잘 매핑된 것을 볼 수 있습니다.
localhost로 접속
이제 나의 index.html파일이 보일까요?
그렇지 않습니다.
nginx 컨테이너에 /mycustome/path 에 존재하는 index.html을 서빙하라고 알려주어야 합니다.
Nginx Config 설정
apt update apt install vim -y우선 my_nginx 컨테이너에 vi를 설치합니다. (설정 파일을 수정하기 위해서)
nginx를 설치하면 기본적으로 /etc/nginx/confd./deafult.conf 파일이 존재하며 해당 파일에서 설정이 이루어집니다.
rm /etc/nginx/conf.d/default.conf vi /etc/nginx/conf.d/default.conf파일 삭제후 다시 생성하는 명령어입니다.
새롭게 생성한 /etc/nginx/conf.d/default/conf 파일
server { listen 80; location / { root /home/jscode; index index.html; try_files $uri /index.html; } }- server가상 호스트 server_name의 url이 온다면 server 블록으로 이동
- listen nginx 데몬 포트 정의
- location 특정 url로 접근하면 어떤 rule를 따를 건지에 대한 구체적인 동작 정의
- root nginx가 정적 서비스를 하는데 필요한 파일들이 어느 위치에 있는지 알려주는 지시자
- index root 위치에서 어떤 파일을 기본 파일로 할껀지에 대한 지시자
- try_files request에 대해서 어느 순서대로 처리해야할지에 대한 지시자
명령어를 통하여 설정파일이 잘 동작하는지 확인
nginx -t //결과 nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful명령어를 통하여 nginx reload
nginx -s reload //결과 2023/03/03 17:35:42 [notice] 443#443: signal process started이제 localhost가 정상적으로 바뀌어서 적용됩니다.
심지어 Local PC의 index.html 파일을 수정하면 my_nginx 컨테이너에 바로 적용되어 문구가 바뀌는 것을 확인할 수 있습니다.
리버스 프록시로 front , backend 컨테이너 띄우기
react(front), node(back) 프로젝트를 사용하여 해당 git repo를 참고하였습니다.
https://github.com/wlsf82/frontend-and-backend
GitHub - wlsf82/frontend-and-backend: Sample project with basic "backend" and frontend, running Cypress tests on GitHub Actions.
Sample project with basic "backend" and frontend, running Cypress tests on GitHub Actions. - GitHub - wlsf82/frontend-and-backend: Sample project with basic "backend" and fronte...
github.com
다행히 노드가 설치되어 있음을 확인하였습니다.. 없으면 깔아야 합니다. (npm 명령어를 위해)
node -v의존성 설치 후 build
npm i //의존성 설치 npm run build //react 빌드 -> 정적파일 떨어짐frontend 경로에 build파일이 생기고 static폴더가 생긴것을 확인할 수 있습니다.
node 이미지 생성
app-test.dockerfile
FROM node:16-alpine WORKDIR /home/jscode COPY source/backend . ENTRYPOINT [ "npm", "run", "start" ]이미지 생성
docker build -t app_test:prod -f app_test.dockerfile .nginx 프록시 설정을 위한 default.conf 내용 정의
upstream app { //app으로 이름 정의 server app_test:3001; //app_test는 컨테이너 이름이지만 실제는 IP(192.xxx.xxx.xxx) } server { listen 80; location /v1 { //v1 경로일경우 다음 url으로 매핑시킨다 proxy_pass http://app; //app은 upstream에서 정의한 이름 proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { root /home/jscode; index index.html; try_files $uri /index.html; } }경로는 ./docker/source/nginx 에 만들어둡니다. (이후 볼륨매핑을 위해)
docker-compose.yml 내용 정의
version: "3.5" services: app: container_name: app_test image: app_test:prod ports: - 3001:3001 nginx: container_name: nginx_test image: nginx:1.23-alpine volumes: - ./docker/source/frontend/build:/home/jscode - ./docker/source/nginx:/etc/nginx/conf.d command: sh -c "nginx && tail -f /dev/null" ports: - 80:80nginx 컨테이너를 띄울때는 build 된 정적파일과 정의한 nginx deafult.conf를 매핑시키고 실행시킵니다.
docker-compose 명령어로 컨테이너 실행
docker-compose up -dlocalhost:80으로 접속해도 잘 나오고, localhost/v1으로 접속해도 잘 나옴을 확인할 수 있습니다.
'MSA & 쿠버네티스(Kubernetes) - k8s' 카테고리의 다른 글
Window 10 Pro Docker 설치하기 (0) 2024.01.02 다양한 배포전략을 이해해보자 (0) 2023.08.16 rancher desktop 으로 docker desktop 대체하기 (0) 2023.01.30 서킷 브레이커란? (0) 2022.12.03 Docker compose 사용하기 (0) 2022.09.04