배포 - Multi App을 만들기위한 Dockerfile (Nginx)

Nginx를 위한 도커 파일 만들기

클라이언트에서 Request를 보낼 때 Nginx를 이용해서 프론트와 서버에 나눠서 보내 줄 수 있다. 어떤 형태로 URL을 보내는지에 따라 나눠 보내진다.

 

Nginx 프록시 기능

Nginx는 어떤식으로 프록시 기능을 제공할까?

클라이언트에 요청을 보낼때 정적 파일을 원하는 경우 Nginx 설정에 따라 자동적으로 ReactJS를 통해 응답을 보내주고, API 요청일 경우에는 NodeJS를 통해 응답을 보내준다.

 

Nginx가 요청을 나눠서 보내주는 기준을 URL로 location이 /로 시작하는지, /api로 시작하는지에 따라서 나뉜다.

 

Proxy기능을 위한 Nginx설정

전체 프로젝트를 위한 root 폴더에 프록시를 위한 nginx 폴더를 생성해주고 그안에 nginx 설정 내용을 넣는다.

 

nginx.conf

upstream frontend{
    server frontend:3000;
}

upstream backend{
  server backend:5000;
}

  server{
    listen 80;

    location / {
      proxy_pass http://frontend;
    }

    location /api{
      proxy_pass http://backend;
    }

    location /sockjs-node{
      proxy_pass http://frontend;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
    }
  }

upstream블록

upstream frontend{
    server frontend:3000;
}

3000번 포트에서 frontend가 돌아가고 있다는 것을 명시해준다. server 뒤에 frontend라는 명칭은 docker-compose.yml에 service(컨테이너) 명과 매칭된다.

 

upstream backend{
  server backend:5000;
}

5000번 포트에서 backend가 돌아가고 있다는 것을 명시해준다.

 

server 블록

  server{
    listen 80;
    ...
    }

Nginx 서버 포트 80번으로 열어준다.

 

location /

  server{
    ...
    location / {
      proxy_pass http://frontend;
    }
    ...
}

location에는 우선순위가 존재하는데 그냥 "/" 의 경우 우선순위가 가장 낮다. 그래서 여기서 "/api" 로 시작하는 것이 먼저 찾아지고 그게 없다면 다음으로 "/"을 찾으므로 해당 요청은 http://frontend로 보내진다.

 

http://frontend 에서 frontend 역시 upstream 블록과 마찬가지로 docker-compose.yml 파일의 service(컨테이너)명과 매칭된다.

 

Docker 환경이 아닐경우 실제 ip나 도메인 주소를 적어주어야 한다.

 

 

[출처 -  https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%8F%84%EC%BB%A4-ci/dashboard]