Web应用架构入门之11个基本要素
译者： 读完这篇博客，你就可以回答一个经典的面试题：当你访问google时，到底发生了什么？
- 原文：web architecture 101
- 译者：fundebug
为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。
当我还是小白的时候，如果知道web应用架构就好了！
上图展示了我们storyblocks的架构，对于初学者来说，似乎有些复杂。
下面我通过用户访问strong beautiful fog and sunbeams in the forest页面的处理过程来简单说明各个架构要素的作用：
- 当用户点击strong beautiful fog and sunbeams in the forest访问我们的图片服务时，浏览器会先给dns(域名解析服务)服务器发送请求，获取ip地址，然后再给storyblocks服务器发送请求。
- 用户的请求会到达我们的load balancer(负载均衡服务)，load balancer会随机选择我们10个web application server(网页应用服务)中的一个来处理这个请求。
- web application server会先在caching service(缓存服务)读取图片信息，然后再从database(数据库)中读取其他数据。
- 当web application server发现图片的color profile(颜色分析)还没有计算时，会给job queue(任务队列)发送一个color profile任务。
- job server(任务服务)会从job queue中获取corlor profile任务进行异步计算，计算结束之后再更新数据库。
- web application server会给search service(搜索服务)发送搜索请求，以图片的名字作为关键词，来查找类似的图片。
- 如果用户恰好是登录状态，web application server会去访问account service(账号服务器)来获取账号信息。
- web application server会给data firehose(数据加载服务)发送一个page view(网页浏览)事件，并把它记录到我们的cloud storage system(存储云)，最终加载到我们的data warehouse(数据仓库)中。数据分析师会通过data warehouse中的数据来分析我们的运行情况，辅助我们的商业决策。
- web application server会渲染出html，并把它通过load balancer发送给用户的浏览器。页面中的javascript和css文件存储在我们的cloud storage system(存储云)中，并通过cdn进行分发。因此，用户的浏览器会直接访问cdn来获取javascript和css文件。
- 最后，浏览器再渲染整个页面给用户看。
我们的strong beautiful fog and sunbeams in the forest页面有一张非常漂亮的森林图片，网页截图如下：
接下来，我会依次介绍每一个要素。
1. dns
dns全称为domain name server，即域名解析服务，它是互联网的基础。提供域名(比如google.com)，dns可以返回其ip地址(比如85.129.83.120)。有了ip地址，用户的计算机才知道应该访问哪个服务器。这一点类似于手机号码，域名与ip的区别等价于"给马云打电话"和"给201-867–5309打电话"。以前你需要通过电话本查找马云的手机号码，那dns就类似于互联网的电话本，你需要它来查询某个域名的ip。
2. load balancer
load balancer(负载均衡服务器)是我们对应用进行横向扩展的关键。它会把请求分发到多个web application server(网页应用服务)中的一个，这些application server运行的程序是一样的，对同一个请求的处理方式完全相同，它们会把请求返回给客户端。load balancer的作用就是分发请求，这样，当某个服务器宕机时，仍然可以保证服务。
目前，业界最受欢迎的load balancer是nginx，fundebug用的也是nginx。
3. web application servers
web application server，即网页应用服务，理解起来相对简单一些。它们负责执行核心的业务逻辑，处理用户的请求，并返回html给用户浏览器。为了完成工作，它们通常需要访问多种后端服务，比如数据库、缓存、任务队列、搜索服务等。在load balancer中提到过了，web application server通常有多个副本，它们从load balancer获取用户请求。
web application server需要使用特定的编程语言(java, node.js, ruby, php, scala, java, c# .net等) 和mvc框架(node.js有express, ruby有rails, scala有play, php有laravel等)来实现。fundebug后端语言用的是node.js，框架用的是express。
4. database
现代应用基本上都需要使用1个或者多个dabase(数据库)来存储数据。利用数据库，我们可以方便地对数据进行各种处理，比如定义数据结构、插入数据、查找数据、更新数据、删除数据、对数据进行计算等。一般来说，web application servers会直接访问数据库，job server也一样。另外，每一种后端服务都有可能会需要独立的数据库。
目前，业界最受欢迎的开源数据库技术有mysql、mongodb等。fundebug用的是mongodb。
5. caching service
caching service，即缓存服务，提供简单的键值对存储和读取服务，它可以让数据的存储和读取的时间复杂度接近于o(1)。对于复杂的计算，我们会将计算结果存储到缓存中，这样下次需要结果时，就不需要重新计算了，可以从缓存中直接读取结果。web application servers会将数据库查询、外部调用结果、某个url对应的html文件等存储到缓存中。
下面是一些真实的缓存实例：
- google会缓存常见查询的结果，比如"dog"或者"taylor swift"，而不是每次去重新计算。
- facebook会缓存你登陆时看到的数据，比如动态、朋友等，细节可以阅读scaling memcache at facebook。
- 我们storyblocks会缓存react服务端渲染的html，搜索结果等。
目前，业界最受欢迎的缓存技术是redis和memcache。fundebug用的是redis。
如何你希望实时监控线上应用的bug，欢迎免费试用fundebug!
6. job queue & servers
大多数网页应用都需要在后台进行一些异步计算，这些计算并非直接与响应用户请求有关。比如，google需要爬取整个互联网的网页，并为其建立索引，这个计算不是在你搜索的时候进行，而是异步进行，他们一直在更新网页索引。
异步计算有多种不同的方式，最普遍的方式就是job queue，即任务队列。它由两部分组成，一个保存任务的队列，以及一个或者多个运行任务的服务。
job queue中保存了需要进行异步计算的任务。最简单的任务队列是first-in-first-out (fifo)，即先进先出，而更为复杂的队列会有优先级机制。对于 web application servers来说，当需要计算某个任务时，将这个任务加入队列就可以了。
在storyblocks，我们利用job queue运行非常多的后台任务，比如编码视频和图片、为csv加标签、统计用户数据、发送密码重置的邮件等。刚开始我们用的是fifo队列，后来我们增加了优先级机制来保证响应时间要求高的任务(比如发送密码重置邮件)可以尽快处理。
job server(任务服务)负责运行任务，它们不断从队列中获取任务然后执行。job server也可以使用各种后端语言编写，fundebug用的是node.js。
目前，业界流行的job queue技术有rabbitmq、activemq、kafka等，fundebug用的是rabbitmq。
7. full-text search service
大多web应用都会支持搜索功能，用户输入关键词，应用返回相关结果。搜索技术也被称作full-text search，即全文检索，是通过inverted index(倒排索引)来是的。如下图所示：
事实上，数据库比如mysql会支持全文检索功能，但是一般来说我们会采用独立的search service(搜索服务)来计算和保存倒排索引，并提供搜索接口。目前最受欢迎的全文检索技术是elasticsearch，当然还有其他选择，比如 sphinx和apache solr，fundebug用的是elasticsearch。
8. services
当应用规模足够大时，很可能需要将一些服务拆分出来。这些服务并不向外部提供，而是提供给web application servers以及其他内部服务。在storyblocks，我们有很多这样的服务：
- account service(账号服务)：管理我们所有站点的用户账号数据，提供统一的账号系统。
- content service(内容服务)：管理我们所有视频、音频和图片的元数据，它会提供下载内容和查看历史的接口。
- payment service(支付服务)：提供接口来结算用户的信用卡。
- html → pdf service(html转pdf服务)：提供html转pdf的接口。
services也可以使用各种后端语言编写，fundebug用的是node.js。
9. data
ai时代，一个公司的成败取决于它如何利用数据。一个典型的数据处理处理流程有3个主要步骤：
- web application servers负责收集数据，通常是一些用户行为记录，将数据发送给data firhose(数据加载服务)，data firhose负责将流数据可靠地加载到数据存储和分析工具。aws kinesis和kafka可以作为data firhose。
- data firhose将收集的原始数据以及初步处理过的数据存储到数据云中。aws kinesis data firehose可以方便地将数据存储到aws 云存储(s3)中。
- 初步处理过的数据可以加载到data warehouse(数据仓库)进行处理。我们使用的是aws redshift，大型公司有些使用oracle的data warehouse。如果数据非常大的话，可能需要使用hadoop。
还有，我们storyblocks会每天晚上将web application servers和各种services的运行数据加载到redshift中。这样，我们的数据分析师可以结合所有数据进行综合分析。
fundebug使用kafka作为data firhose，使用阿里云的对象存储 oss作为数据仓库，使用hadoop进行离线数据分析。
10. cloud storage
cloud storage即数据存储云，可以通过安全、可扩展的数据存储服务，可以存储任意数据，并可以通过http接口进行操作和管理。亚马逊的aws 云存储(s3)是当前最受欢迎的数据存储云，我们storyblocks依赖它来存储视频、音频、图片、javascript、css以及前文提到过的用户行为数据等。
fundebug使用阿里云的对象存储 oss以及腾讯云的对象存储 cos作为数据存储云。
11. cdn
cdn，全称为content delivery network，即内容分发网络，它可以利用更靠近用户的服务器分发html、css、javascript和图片等静态资源，有效降低页面加载时间。不再使用单个源服务器提供服务，而是利用全球各地的服务器作为缓存服务器分发静态资源，用户可以直接从更加靠近他们的缓存服务器下载资源，而不需要去访问源服务器。
如下图所示，当西班牙的用户给纽约的网站请求某个页面时，静态资源可以从英国的缓存服务器直接下载，而不再需要进行速度很慢的跨大西洋访问：
详细介绍了cdn技术。一般来说，网页应用会使用cdn来分发css，javascript，图片以及视频等静态资源。fundebug使用腾讯云以及七牛云的cdn服务。
参考
关于fundebug
fundebug专注于javascript、微信小程序、微信小游戏、支付宝小程序、react native、node.js和java实时bug监控。 自从2016年双十一正式上线，fundebug累计处理了6亿+错误事件，得到了google、360、金山软件等众多知名用户的认可。欢迎免费试用！
版权声明:
转载时请注明作者fundebug以及本文地址：