320x100
320x100

웹 아키텍처 101 (https://medium.com/storyblocks-engineering/web-architecture-101-a3224e126947)

 

 

브라우저 요청 처리 과정

1. 사용자가 구글에서 Strong Beautiful Fog And Sunbeams In The Forest를 검색한다

 

2. 검색 결과에 Storyblocks 사이트의 stock 사진이 함께 노출된다

 

3. 사용자는 결과를 클릭하고 브라우저는 이미지 상세 페이지로 이동

 

4. 브라우저 내부에서는 DNS 서버에 story block 사이트에 접속하는 방법을 질의 후 사이트에 접속 시도

 

5. 브라우저의 요청이 story block 측 로드밸런서에 도착

 

6. 서비스 운영을 위해 동작중인 10개의 서버 중 하나를 랜덤하게 선택하여 요청을 처리

 

7. 처리를 담당한 웹 서버는 캐싱 서비스에서 필요한 이미지 정보를 가져온다

 

8. 더 필요한 정보는 데이터베이스에 요청하여 가져온다

 

9. 사용자에게 전달한 컬러 프로필이 만들어지지 않았음을 인지하고

 

10. 컬러프로필 job을 Job Queue에 보낸다

 

11. job 서버는 큐에 추가된 것들을 비동기적으로 처리한 뒤

 

12. 데이터베이스에 적절히 업데이트 한다

 

13. 다음 사용자는 전체 텍스트 서비스 (full-text-service)에 사진의 제목을 전달하여

     비슷한 사진을 찾고자 한다

 

14. 사용자가 story block의 멤버로 로그인 했다면 그의 계정 정보를 계정 서비스에서 가져온다

 

15. 일련의 작업들이 끝난 후 data firehose에 페이지 뷰 이벤트를 발생 시켜

     클라우드 스토리지 시스템에 기록하고 

 

16. 그 정보는 분석가들이 비즈니스와 관련된 질의에 답할 수 있도록 데이터 Ware House 에서 사용된다

 

17. 서버는 HTML 페이지를 렌더링하고 로드 밸런서를 통해 사용자의 브라우저로 보낸다

 

18. 페이지는 CDN에 연결된 클라우드 스토리지 시스템에서 가져오는 자바스크립트와 CSS 파일을 포함하고 있다

 

19. 브라우저는 받은 페이지를 사용자가 볼 수 있도록 렌더링 한다

 

 

 

 

웹 아키텍처의 개념들

DNS (Domain Name Server)

: WWW (World Wide Web)이 가능토록 만드는 기반 기술로 도메인 이름 (google.com)에서 IP 주소로의 키/값을 제공

: 문자로 된 도메인 주소에서 IP 주소를 얻기 위한 서버

 

 

로드밸런서

: 수평적 확장을 위해 복제된 서버

: 다른 서버가 다운 되더라도 서비스가 끊기지 않도록 역할

 

※ 수직적 확장

: 서버의 성능을 높이기 위해 CPU, 램, 스토리지 등의 장치 성능을 높이는 것 

 

※ 수평적 확장

: 서비스가 끊기는 것을 방지하기 위해 하나의 서버를 복제 및 미러링 하여 수를 늘리는 것

: 데이터베이스 서버, 웹 서버 등을 각기 다른 서버에서 가동하는 것도 포함

 

 

웹 애플리케이션 서버 (WAS)

: 비즈니스 로직을 실행하고 그 결과를 HTML에 담아 브라우저에 보내는 서버

: 네트워크 내 데이터베이스, 잡 큐, 캐시 서버, 검색 서비스, 마이크로 서비스 등과 통신하며

  요청을 처리

 

※ 대표적인 앱 서버 구현을 위한 언어 및 프레임워크

: Javascript (Node.JS)

: Ruby

: PHP

: Scala

: JAVA(Spring)

: C#

: .NET 등

 

※ 대표적인 웹 MVC 프레임워크

: Express for NodeJS

: Ruby on Rails

: Play for Scala

: Laravel for PHP 등

 

 

데이터베이스 서버

: 데이터 구조를 정의하고 새로운 데이터를 삽입하고 찾고 업데이트 하기 위한 서버

: 모던 웹 애플리케이션에서는 한 개 이상의 데이터베이스를 사용

: 대부분의 웹 앱 서버는 잡 서버 역할의 데이터베이스 서버와 직접 통신

: 백엔드 서비스는 애플리케이션의 다른 영역과 분리된 자신만의 데이터베이스를 가질 수 있음

 

※ SQL (Structure Query Language)

: 데이터 질의(Query)를 통해 테이블이라는 구조에 데이터를 CRUD (Create / Read / Update / Delete)

: 아직 NoSQL에서 조차 SQL의 인터페이스를 사용

 

※ NoSQL (Not Only SQL)

: 많은 양의 데이터를 처리하기 위해 등장한 DBMS (DataBase Management System)

: 수평적 확장이 어려운 SQL의 단점을 보완

 

 

캐싱 서버

: 자주 사용하는 데이터를 키/값 형태로 저장하여 DB연산을 줄여 과부하를 방지하는 서버

: 데이터베이스의 쿼리 결과, 외부 서비스 호출 결과, 주어진 URL의 HTML 등을 캐시에 저장

 

※ 대표적인 캐싱 서비스 기술

: Redis

: Memcache

 

 

잡 큐 서버

: 비동기적으로 실행될 작업들을 처리하는 서버

: 사용자의 요청과는 직접적인 관련이 없는 작업을 백그라운드에서 비동기적으로 실행

  (구글 검색 서버 기능을 위한 웹 크롤링 등)

: job으로 이루어진 Queue와 작업을 실행하는 Job 서버로 구성

: 정기적인 작업이나 사용자에 의해 작업이 발생할 경우 그에 맞는 job을 Queue에 추가하여 처리

 

 

전체 텍스트 검색 서비스 (Full Text Search Service)

: 사용자의 Query에 대한 검색을 수행하기 위한 서비스

: 역 index를 활용하여 빠르게 데이터를 검색

Reverse Index

※ 대표적인 텍스트 검색 플랫폼

: Elastic Search

: Sphinix

: Apache Solr

 

 

서비스

: 앱이 특정 규모에 도달하면 별도의 애플리케이션으로 운영하기 위한 서비스가 발생

: 외부에 노출되지는 않지만 앱과 다른 서비스와 연동

 

 

데이터

: 최근 거의 모든 앱은 특정 규모에 도달하면 데이터를 제어, 저장, 분석하기 위해 데이터 파이프라인을 사용

 

※ 데이터 파이프라인 3단계

1. 앱은 보통 상호작용을 통해 발생한 데이터를 fore hose로 전달

: fire hose는 데이터를 받아들이고 처리할 수 있는 스트리밍 인터페이스를 제공

: 가공 되지 않은 원시 데이터는 변형(Transformed) 되거나 

: 추가정보와 함께(Argumented) 다른 fire hose로 전달

=> AWS Kinesis와 Kafka가 이러한 작업을 담당

 

2. 원시 데이터와 최종 데이터는 데이터베이스에 저장

=> AWS Kinesis는 원시 데이터를 AWS의 S3에 저장할 수 있도록 firhose라는 서비스를 제공

 

3. 변형 / 추가된 데이터는 데이터 웨어하우스 (DW)에서 로드

=> AWS RedShift 및 Oracle DW 

=> 데이터가 충분히 축적 되었을 경우 hadoop과 같은 NoSQL Map Reduce 기술이 분석을 위해 필요

 

 

클라우드 스토리지

: 인터넷을 통해 데이터를 저장하고 접근, 공유할 수 있는 단순하고 확장성 있는 방법

: RESTful API를 이용하여 HTTP를 통해 클라우드에 접근할 수 있음

: AWS의 S3가 대표적인 클라우드 스토리지

 

 

CDN (Content Delevery Network)

: HTML / CSS / 자바스크립트 등으로 이루어진 정적인 콘텐츠를 빠르게 전송하기 위한 기술

: 콘텐츠를 전 세계의 엣지서버에 분산 저장

: 사용자는 가장 가까운 엣지 서버에서 콘텐츠를 수신

 

 

 

 

 

 

Refference

 

blog.rhostem.com

프론트엔드 웹 개발 기술 블로그

blog.rhostem.com

 

신입 웹 개발자일 때 알았더라면 좋았을 기본 웹 아키텍처 개념

이 글은 미디엄의 Web Archtecture 101(https://engineering.videoblocks.com/web-architecture-101-a3224e126947) 글을 보기 쉽게 번역한 글입니다. Storyblocks라는 웹 서비스의 구성을 통해 입문자 관점에서 모던 웹 아키텍

kschoi.github.io

 

300x250
728x90