반응형

본 내용은 인프런의 데브위키님의 강의 "개발자를 위한 쉬운 도커" 내용을 바탕으로 정리한 내용입니다.

3 Tier 아키텍처란?

  • 3가지 종류의 서버가 유기적으로 상호작용하며 하나의 애플리케이션으로 구성되는 것
  1. 백엔드 애플리케이션이 외부에 노출되어 있을 경우 개발자가 의도하지 않은 API를 호출할 위험이 있다.

그림 1) 일반적인 엔터프라이즈 웹 애플리케이션 구조

  1. Nginx의 프록시 기술을 활용해 보안에 뛰어난 3Tier 아키텍처를 구성할 수 있다.
  2. Nginx는 특정 경로로 온 요청(/api로 시작하는 경로)를 지정한 서버로 전달한다.
  3. Nginx를 프록시 서버로 활용하여 보안향상, 부하 관리 및 API 응답캐싱을 활용할 수 있다.

그림 2) 보안성이 개선된 3 Tier 아키텍처

  • nginx의 프록시를 사용하여 특정 경로로 온 요청을 정해진 경로로 전달한다.
  • nginx 서버의 설정을 변경하여 /api/로 들어오는 요청을 http://leafy:8080; 으로 다시 전달한다.
  • 네트워크의 요청을 전달해주는 기술프록시라고 한다.

예시 1) leafy-frontend 도커파일 수정 및 캐싱 테스트

# 1. easydocker/leafy/leafy-frontend 디렉터리 이동 및 소스코드 상태 변경
cd ../leafy-frontend
git reset --hard HEAD && git clean -fd
## 소스코드 버전 변경
git switch 02-cache
# 또는 git switch 03-prox

 

예시 2) easydocker/leafy/leafy-frontend/src/api/api.js 파일 수정

import axios from 'axios';
const api = axios.create({
 // baseURL: process.env.VUE_APP_API_BASE_URL || 'http://localhost:8080'
/* 웹브라우저에서 백엔드 애플리케이션에 대한 요청을 http://localhost:8080으로 보내는 설정, 해당라인 제거 후 저장*/
});
export default api;

 

예시 3) easydocker/leafy/leafy-frontend/nginx.conf 파일 생성

server {
    listen 80;
    server_name _;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
    location /api/ {
        proxy_pass http://leafy:8080; --- 웹서버로 오는 요청 중 /api/로 시작하는 경로의 요청을 모두 http://leafy:8080으로 전달
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html { 
        root /usr/share/nginx/html;
    }
}

 

예시 4) easydocker/leafy/leafy-frontend/Dockerfile

FROM node:14 AS build
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:1.21.4-alpine

# 소스코드의 nginx.conf 파일을 이미지 빌드 시 nginx 설정으로 복사
COPY nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build  /app/dist /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx"]
CMD ["-g", "daemon off;"]

 

예시 5) leafy-frontend 이미지 빌드 및 애플리케이션 구동 테스트

# 1. 이미지 빌드
docker build -t leafy-front:3.0.0-proxy .

# 2. network가 제대로 생성되어 있는지 확인
# 기존에 생성되어 있으면 에러가 나오고 없으면 새로 생성한다.
docker network create leafy-network

# 3. 애플리케이션 구동 및 테스트, 백엔드 애플리케이션을 포트포워딩 하지 않고 내부 통신만 사용하도록 설정    
docker run -d --name leafy-postgres -v mydata://var/lib/postgresql/data --network leafy-network devwikirepo/leafy-postgres:1.0.0
docker run -d -e DB_URL=leafy-postgres --name leafy --network leafy-network devwikirepo/leafy-backend:1.0.0
docker run -d -p 80:80 --name leafy-front --network leafy-network  leafy-front:3.0.0-proxy

# 4. localhost:80 접속하여 정상 접속 확인, curl 명령으로 백엔드 접근 테스트(응답이 오지 않아야 정상)
curl http://localhost:8080/api/v1/users

# 5. 환경 정리
docker rm -f leafy-postgres leafy leafy-front
docker volume rm mydata

 

그림 3) 웹서버의 프록시를 통해 백엔드 서버로 접근하도 록하여 클라이언트의 직접 접근을 막았다.


 

그림 4) 개선된 3Tier 아키텍처의 네트워크 구조로 웹 서버만 포트포워딩 되어 있다.

반응형

+ Recent posts