웹 서비스 아키텍처
Stage 1
HTML (내용) + HTTP (전송)
서버에서 저장된 페이지를 전송하는 것.
정적: 저장된 파일을 보냄
동적: 클라이언트에서의 입력을 실행한 결과를 보냄 (ex. DB 유저정보)
→ SSR(Server-Side-Rendering): 서버가 페이지를 만들어서 브라우저(클라이언트)에게 전달한다.
클라이언트에서는 전송받은 파일을 해석해서 결과를 표시한다.
→ HTML이 주, JS는 보조역할
→ 동기식: 하나 바뀔때마다 계속 업데이트
Stage 2 (주류)
AJAX/Web 2.0
JSON(내용) + HTTP(전송)
웹서버에서 HTML 대신 JSON으로 된 문서를 보내고, 클라이언트를 전송받은 JSON을 해석해서 결과를 표시한다.
→ JS가 주, HTML이 보조
JSON/XML을 DOM 형태로 받아서 처리한다.
DOM(Document Object Model)을 사용해서 처리한다.
→ 비동기: 부분 업데이트 허용
→ DOM업데이트 오버헤드가 커서 Virtual-DOM 개념 등장
MVC 패턴의 등장
- Model-View-Controller
- 멀티뷰 시스템(웹뷰, 모바일뷰, 앱뷰)
JSON/XML 형태로 서버에서 데이터를 전달하고, 각 view(클라이언트)에서 HTML로 재구성한다.
Stage 3
JSON(내용) + HTTP(전송)
양방향 통신 (웹소켓)
실시간 API (Node.js 활용) (ex. 동시편집)
→ 동적 컨텐츠의 부하 → 캐싱기능 도입
Javascript
- 파편화/단편화로 브라우저간 지원 수준이 다름
- jQuery: 브라우저간 독립성 제공 가능
- 브라우저를 통해서만 실행 가능
- Node.js를 통한 서버나 스탠드얼론 타입으로 동작
- 비동기 실행 - 요청 후 결과를 기다리지 않음
- 웹표준 (ECMAscript:ES)로 채택
HTML5 = HTML5+CSS3+ECMAscript+SVG+WebGL
Static vs Dynamic 컨텐츠
-
Static
저장된 페이지를 그대로 전달한다.
apache, nginx (localhost:80/hello.html) -
Dynamic
클라이언트 요청에 따라 다른 내용을 전달한다.
주로 DB같은 프로그램을 실행한 결과를 전달한다.
tomcat (localhost:8080/hello.jsp)
ex. CGI, ASP, JSP, PHP -
Static+Dynamic
localhost:80/hello.jsp
하지만 Dynamic 컨텐츠가 클라이언트 요청마다 서버에 접근한다면 오버헤드가 크다. 따라서 Dynamic 컨텐츠를 Static화 하여 전달한다. (캐싱 기능)
캐싱
- 브라우저 캐시
이미 해당 브라우저를 통해 방문한 페이지인지 확인
-
프록시(캐시서버)
클라이언트 네트워크단에서 페이지를 캐싱, 없다면 프록시가 액세스하여 저장 후 업데이트
방화벽과 같이 사용한다. -
리버스 프록시
캐싱되지 않은 컨텐츠를 요청하는 경우에만 이를 직접 실행한다.
프로그램을 실행해 결과페이지를 캐싱해서 전달한다.
서버단 캐시: 서버 앞에서 서버의 응답을 캐싱
nginx (웹서비스 겸 리버스 프록시 역할)
클라이언트의 요청 → 브라우저 캐시 → 프록시 서버 → 리버스 프록시 → 네이버 순으로 요청된다.
브라우저에 없다면 프록시로 접근하고, 프록시에도 없다면 리버스 프록시가 네이버에 직접 요청하여 페이지를 가져오는 방식이다.
네이버같이 다수가 사용하는 플랫폼은 네이버에 직접 요청까지 가기에(남들이 접근하지 않은 페이지로 접근하기) 쉽지 않다.
웹서비스 아키텍처의 구성
웹 아키텍처
0티어: 스탠드얼론 프로그램
1티어: 웹 브라우저(HTTP 클라이언트)-웹 서버(HTTP 서버)
2티어: HTTP 클라이언트-HTTP 서버/DB 클라이언트-DB 서버
3티어: HTTP 클라이언트-HTTP 서버/WAS 클라이언트 - WAS 서버/DB클라이언트 - DB 서버
n티어: 서버-클라이언트 구조가 추가됨
WAS
Web Application Service
WAS 예시: 분산 트랜잭션, 로드밸런싱, 이중화, 동시성 제어
이러한 WAS를 HTTP 클라이언트-DB서버 사이에 넣어 거쳐가도록 만든다.
로드밸런서
- 동일한 내용을 여러 개의 시스템에 복제(이중화)하여 구성한다.
- 외부에서 요청이 들어오면 여러 대의 시스템 중 하나에 라우팅하여 서비스한다. → 장애대응 가능
- L4 스위치: TCP/UDP+포트 정보를 인식하여 라우팅/로드밸런싱
- L7 스위치: GET/POST+컨텐츠(텍스트/이미지/동영상)을 구별하여 라우팅/로드밸런싱
AWS의 경우에도 NLB(Network Load Balancer)가 L4 계층에 해당하고, ALB(Application Load Balanver)가 L7 계층에 해당한다.
UDP 통신을 NLB에서만 처리할 수 있는 이유도 이와 같은 계층레벨구조 때문이다.
방화벽/웹 방화벽/IDS/IPS
- 서버가 방화벽 안에 존재한다.
- 방화벽 외부에 있는 것은 DMZ
- 방화벽 내부에서는 사설 IP를 할당받기 때문에 외부에서 들어오거나 나갈 때는 포트포워딩 및 공인 IP 주소로 변환한다.
- 방화벽: IP/포트를 보고 인/아웃 트래픽 필터링 (Whitelist, Blacklist)
- 웹 방화벽은 웹 컨텐츠에 특화된 방화벽
- IDS: 침임 감지, IPS: IDS+차단
CDN (Content Delivery Network)
해외간 서버 동기화
한국 서비스와 해외 서비스를 모두 사용할 때 국가별 latency(delay) 문제가 발생한다.
= 한국에 있는 서버를 외국에서 접속하려고 하면 많은 딜레이가 발생한다
-> CDN: 현지에 서버를 증설하여 국가별 서버간 동기화를 도와준다.
