可爱猪猪
2021/08/26阅读:69主题:兰青
我的网站优化记实
腾讯云1核2G支撑的面试怪圈服务是如何实现的?揭秘Ta的架构设计与黑科技!Nice!
很多程序员有自己的博客网站,拥有一个属于自己的网站是每个程序员的梦想,拥有一个高访问量的网站更是一个程序员的期许,做网站好玩、有趣、有成就感、可以忘我。因此没有理由程序员不拥有一个属于自己的小站,一个管理系统也好,一个博客也好,一个瞬间分享也好,每一次后台的访问数据+1,都有一点点小激动~
Cool,是不是打动你了,那么今天和大家闲聊一下拥有一个1核2GB的腾讯云服务器,我是如何搭建的网站及我的设计思路。
以下是我今天要分享的话题:
-
我的网站的简介与现状呢?(融合百度统计) -
如何快速搭建一个自己的网站?(腾讯云控制台操作) -
我的网站的架构设计是什么样?(最小服务器资源的架构设计) -
网站做了哪些优化呢?(干货多!)
网站的简介与现状
面试怪圈官网是一个程序员资源分享的平台,当然包含前端、后端、大数据、运维甚至还可以有产品的资料。
设计到上线周期为一周,面试怪圈官网的第一版本,在2021.7.2正式上线了,以下是当时发的朋友圈。

最初网站做的很简单,首页是一个卡片分页,展示全部的资源。点击进去查看资源详情,可以下载。
一个月过去了,面试怪圈过得好不好?答案是面试怪圈一直在前进的路上,从未止步!可以看下
百度统计
的数据。后面我会告诉大家如果将自己的网站的监控集成到百度统计。
-
PV统计

-
UV统计 -
新老用户数统计
其中跳出指的是用户打开第一个页面后关闭了页面。
如何快速搭建一个自己的网站?
第一步,首先购买一个云服务器。国内的云服务器有腾讯云、阿里云、华为云等,以下是几个云的比对(以下内容来自知乎,仅供参考):
-
阿里云:
适合人群:中小企业
优点:阿里云依托于阿里巴巴集团,通过对其丰富的网络资源进行整合,拥有自己的数据中心,是国内云服务器的大佬,品牌名气较大。阿里云的国际输出速度快。目前,有北京、青岛、杭州、香港机房可选,多线BGP接入;
缺点:价格相对较贵,硬盘I/O速度较差,硬盘不能直接扩容大小,必须新购买硬盘迁移数据。
-
腾讯云:
适合人群:游戏客户、开发者、APP用户等。
优点:腾讯云跟微信对接有天然优势,目前用户主要以游戏应用为主。腾讯云服务器使用公共平台操作系统,团队完全负责云主机的维护,并提供丰富配置类型虚拟机,用户可以便捷地进行数据缓存、数据库处理与搭建web服务器等工作。腾讯对游戏和移动应用类客户提供了较强的扶持政策,比较适合这类型的客户使用。
缺点:普通中小客户和中网站客户难以通过审批,腾讯提供的配套设备也不适合这部分客户使用。
-
华为云:
适合人群:政府、大中型企业、银行等大客户。
优点:华为企业云贯彻了华为公司"云、管、端"的战略方针,聚焦I层,使能P层,聚合S层,致力于为广大企业、政府和创新创业群体提供安全、中立、可靠的IT基础设施云服务。华为企业云依托业内的基础设施,在全国设置多个云服务区,部署多个云计算中心资源池,主要以安全性为卖点,采用了分层和纵深防御理念。
缺点:会出现不稳定的情况。
我选择的是腾讯云-轻量应用服务器,第一次购买,价格非常美丽也很友好300多大洋3年。
我选择的配置如下,但唯一的缺点是月流量有限制:500GB,因此节流才是王道:

第二步,给自己选择一个匹配的域名,如果能选择名称既贴切,并且6位以内的域名,那就赶紧下手吧。我咨询网站挂了msgq的com域名,转让费16400,每年还是要续费的。 而一手购买的域名价格一般为几十块钱/年。
当然,购买一个域名后,并不能直接使用。还需要走以下几步:
-
实名认证,也就是让域名要实名到某个人身上。 -
网站备案,腾讯云小程序即可办理。 -
网站底部一般备注备案号,同时链接到工信部的网站。比如腾讯云网站下方展示如下:
4. 域名解析,在腾讯云上可完成操作,在记录值填写你的服务器ip,其他默认即可:

当然,第三步肯定要开发一个自己的应用,部署上去。
我的网站的架构设计是什么样?
1核2G我是如何设计呢?性能高、带宽低、统计全,你可能也注意到了我的网站有很多图片,我是如何做到低带宽呢?这里我绘制了一张简单的架构图:

-
msgq-server负责门户展示服务,也就是进入面试怪圈官网的页面。 -
Cache层保证了低配下能够快速响应,减少存储直接访问。由于网站资源变动频率相对较低,缓存再合适不过了,这里由于服务器资源的限制,并没有使用分布式缓存,而直接使用JVM内存。
Cache层实现比较简单,使用Springboot的@Cacheable
注解。 -
msgq-manager是后台管理,负责资源的录入。 -
Mysql按照的8的版本,并且使用Docker安装。 -
百度统计将用户的行为数据记录下来,以便更好的分析网站的数据。 -
为什么是免费的图片存储服务?并没有购买对象存储服务,我想到了markdown云编辑器,复制图片后,会生成一个图片链接,经验证,图片不会失效,因此获取了一个免费、无容量限制的图片存储。黑科技,Very Nice! -
百度网盘比较大,特别适用存储大量资源,我的网盘TB以上的存储。 -
微信公众号服务提供了自动回复功能,提升关注转换率。 -
访腾讯安全或者360的半透明浮窗,近实时展示网站的流量数据,比如pv、uv、。 -
统计网关负责统一的统计出口,包括百度统计提供的pv、uv,微信公众号提供的关注数、网站服务自身的统计数据。但是这个网关需要做服务认证,防止内部数据外泄。
因此,上面的架构设计,通过浏览器浏览图片并没有占用服务器的带宽,而是通过浏览器直接到图片存储服务。我只需要关心文本传输,也就是json数据带来的带宽损耗。
网站做了哪些优化呢?
除了架构上说到的几点:
-
应用服务器无图片存储,节约带宽。防盗链破解 但是,markdown服务器也是做了防盗链的措施。我们只需在我们的页面 Head
标签中增加如下代码,就可以成功绕过:
<meta name="referrer" content="no-referrer" />
-
缓存提升查询性能
资源分享类的网站,更新频率较低,可以将数据缓存,减少对Mysql数据库的访问,提升页面的拉取数据的速度。 -
seo优化
搜索引擎会爬取我们的网站,因此我们需要做页面tdk优化,也就是我们网站head下的title、description、keywords。tdk设置的合理会在一定程度上满足爬虫的胃口,提升关键字的权重。但对于小网站来说,过热的词很难得到排行,第一页往往是广告位。
因此,我们选择的是长尾词,比如java面试资料。如何选择长尾词,可以借助百度的热搜提示,如图:

-
网站首页改造提升留存率 以下是网站访问的热点分布,从左到右,从上到下:
因此,要将网站的精华放置到最上边,菜单栏从左到右排布。同时,丰富首页的内容,更利于延迟访问者的停留时间,降低跳出率。
还有一点,合理的布局及丰富的内容有利于搜索引擎爬虫的深度和广度爬取。 我是这样布局的:
-
下载方式的改变,提升关注度
原有的设计方式,在资源详情页:有资源的url和关注的二维码。后台统计数据分析,发现点击了链接,没有去扫描二维码关注下载的用户比较多。 客观原因主要有二:
-
跳转到百度网盘,却找不到提取码 -
跳转到百度网盘,需要回到原页面找二维码,不方便导致放弃。 改版以后如下图:

-
引入图片预览插件,提升资源预览体验 资源详情页,图片无法放大,或者翻页查看。我们引入Viewer.js提升了对图片的预览体验。该插件强大、简洁,力荐:

-
利用百度统计分析我们的数据 百度统计的接入很简单,可以通过官方快速接入。只需要在页面head标签中嵌入一段代码即可。 百度统计让我们更了解网站的各项指标,比如: -
pv -
uv -
实时访问监控 -
搜索引擎关键词访问监控 -
外链来源监控 -
来客的地域分布 -
来客年龄分布 -
新客、旧客统计 -
访问页面排行 ... 等等,通过百度统计会发现很多有趣并且有价值的数据。
今天就分享到这里了,我是公众号「面试怪圈」的Yesterday,喜欢技术、喜欢研究,今天的文章如果您感兴趣,可以关注下方公众号,一起交流技术:
下面是面试怪圈交流群,里面有很多一线大厂大佬,可为大家答疑解惑,欢迎加入,如果过期,可关注公众号添加我个人微信,我拉大家入群:
作者介绍