博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
个人网站架构设计(二)
阅读量:5865 次
发布时间:2019-06-19

本文共 4181 字,大约阅读时间需要 13 分钟。

网站地址:

昨天对网站的架构做了一个简要的分析,有些人不太理解,有了 NodeJS 还要 php 干啥?我推荐了几篇文章给这位童鞋看了:

如果是一个很小的网站,是用那么多层来处理请求和响应,确实是冗余的,不过我打算将这个网站设计成一个实时平台,这个平台中包含了很多很多的通信模块,所有后端选用 NodeJS 作为 I/O 处理器,这是可以理解的。php 用于通信,连接消耗大,而且不方便并行处理,效率很低。在网络通信和I/O处理上,NodeJS是很优秀的工具。

1. 小小网站,为啥我要如此看重后端

其实最主要的原因是,我买的主机配置很低。呵呵,是的,昨天很多朋友在留言里都提到了购买云主机/VPS相关的东西。今天我也是花了不少时间在各个群里请教,并且也访问、对比了一些云主机供应商的网站。之前在 V2ex 上看到了不少相关的帖子,今天进去翻,没翻到之前点过赞的贴。过程就不多说了,开始打算买个国外的主机,不用备案~ 后来嫌麻烦,买了个阿里云服务器:

CPU: 1核    内存: 512MB数据盘: 40G    带宽: 1Mbps

买一年省俩月的钱,总共是七百多。选用的 Ubuntu 12.04, 64位系统。不过呢,我并没有一次性买一年的,先花几十块钱买了一个月,试用,反正以后续费还是原价(不像域名那样坑爹,续费就涨价)。域名我是一次性买的十年的,55/年,这东西不贵,多买几年,省事儿。然后进入阿里云的流程,正在备案中...

回到重点,为啥看重后端,看到上面的配置,相比大家也知道了,搞一个实时通信的网站,每个连接后端都需要内存来处理,而且这个内存在链接断开之前是不会释放的(socket连接),目测同时在线超过30个人,系统就要卡住了。内存是一个很大的瓶颈,然后就是带宽了,1M真的很低。其实买个配置高点的主机,一年也就一两千,这次故意买个最低配置是为了让自己培养珍惜流量意识,希望编程可以考虑到每个 byte 的消耗,等这种意识(或者技术)养成了,再提高主机的配置。

第二个原因就是熟悉后端,数据库方面的处理一直是自己的弱项,如果不试着提高下,以后工作中遇到坎就会很难受了。这段时间在阿里实习,经常会感觉有些知识不够用了,希望返校继续加强学习。

2. 前端也是重点

前端有一个很大胆的尝试,“数据在前端”。

打开一个网页,浏览器发送请求到服务器,服务器从数据库里获取数据,经过后台脚本的拼装处理,然后输出到前端,这是最常见的方式。这种方式的缺点就是,频繁的读取数据库,然后还有一大堆经过HTML标签包装过的数据传到前端,期间的冗余消耗是特别大的。于是有人就想到了,后端的数据全部使用JSON方式输出,到了前端再渲染数据,这种方式获得了一定的优化效果,前端端的分离似乎也很明显,但是前端负担就太重了,数据的处理和渲染都是前台,也就是承担了Controller和Views的角色,前台很累,他累了也会发脾气,比如:数据到了,要半天之后才解析完毕,再花半天将其渲染出来。同时这种处理方式也不利于SEO。

现在的尝试是,前端就是一个数据库,每个用户都有数据库数据的一个备份。

+----------+                    |          |                    | Database |                    |          |                    +-----|----+                          |                +---------|----------+               /|                    |\              / |       Server       | \              /  |                    |  \            /   +----|----------|----+   \           /         |          |         \  +---------/+  +------|---+  +---|------+  +\---------+|          |  |          |  |          |  |          ||  Client  |..|  Client  |..|  Client  |..|  Client  ||          |  |          |  |          |  |          |+-----|----+  +-----|----+  +-----|----+  +-----|----+      |             |             |             |     +-----|----+  +-----|----+  +-----|----+  +-----|----+|          |  |          |  |          |  |          ||  Local   |  |  Local   |  |  Local   |  |  Local   || Storage  |  | Storage  |  | Storage  |  | Storage  ||          |  |          |  |          |  |          |+----------+  +----------+  +----------+  +----------+

 

浏览器每次连接到服务器,都会将服务器的数据同步到本地,打开页面,第一件事是呈现当前LocalStorage的数据,然后发送一个请求询问服务器,“是否有数据更新啊?”,每次只拉去更新的数据。

有人会觉得这种方式不可取,本地存不了这么多东西啊。当然存不了这么多,一篇文章有作者、标题、日期、概要还有内容,我们可以在本地储存除内容之外的所有东西,就算有100篇文章,其缓存的量也不过几百KB,试想你加载个 JQ 是不是也得上百KB啊~那么每次我们从后端拉取的数据量就十分小了。

至于本地储存的实现方式,这个好处理,LocalStorage、IndexDB、UserData等等,方式很多,还有一些其他比较 hack 的方式,我以后再介绍。

3. 前后端之间的屏障

后端会有很多的服务,比如邮件、HTTP、HTTPS、socket等等,再比如:A域名、B域名、A子域名、B子域名的处理等等。为了处理伪静态,安全,缓存,动静页面分离等多个问题,决定在昨天考虑的架构上再加一层 Nginx。

+------------------+     +------------------+    | Front-End        |     | Browser          |    |     前端处理      |     +--------------+   |    |                  |←---→| LocalStorage |   |    +--↑-----↑-----↑---+     +--------------+---+       |     |     |                                    |     |     |                                    |     |     |                                 +------------------+     | Nginx            | +----     请求/代理    ---------------------------+|   |                  |                         |  |   +------------------+                         ||      |     |     |                             ||      |     |     |                             ||   +--↓-----↓-----↓---+                         ||   | NodeJS           |     +-------------+     |  +-->|     处理I/O       |     | Database    |     |  |   |                  |←-+-→|             |     |  |   +-----|-----↑------+  |  |             |     |  |         |     |         |  |             |     ||   +-----↓-----|------+  |  +----------+  |     ||   | PHP              |  |  |          |  |     |+-->|     处理数据      |←-+-→|   cache  |  |     ||   |                  |     |          |  |     ||   +------------------+     +----------+--+     | |                                                | +------------------------------------------------+

 

东西越多,维护成本越高,不过我竟然觉得添加一层会有更多的乐趣...

后续会继续记录建站过程。

 

转载地址:http://xvynx.baihongyu.com/

你可能感兴趣的文章
sklearn的train_test_split,果然很好用啊!
查看>>
一个程序员的自白书:“对不起,我做错了”
查看>>
Linq EF 根据字符列表排序或List根据列表排序以及Linq查询类型转换
查看>>
PHP的json函数
查看>>
va_list、va_start、va_arg、va_end的原理与使用
查看>>
Convertion of grey code and binary 格雷码和二进制数之间的转换
查看>>
如何培养说话的逻辑性
查看>>
js之form表单的获取
查看>>
在 Linux 中永久修改 USB 设备权限
查看>>
H5+app前端后台ajax交互总结
查看>>
重写 Ext.form.field 扩展功能
查看>>
SQL 查询数据库中所有表信息
查看>>
js中的getAttribute方法使用示例
查看>>
Linux下的搜索查找命令的详解(locate)
查看>>
[AngularJS] Isolate State Mutations in Angular Components
查看>>
回调函数的使用
查看>>
Struts2 中Parameters是如何获取值的
查看>>
C# Httpclient编程
查看>>
[TypeScript] Distinguishing between types of Strings in TypeScript
查看>>
【挖财工作笔记】idea使用指南
查看>>