Loading...
墨滴

可爱猪猪

2021/08/25  阅读:25  主题:兰青

我的网站优化记实

腾讯云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,每年还是要续费的。 而一手购买的域名价格一般为几十块钱/年。

当然,购买一个域名后,并不能直接使用。还需要走以下几步:

  1. 实名认证,也就是让域名要实名到某个人身上。
  2. 网站备案,腾讯云小程序即可办理。
  3. 网站底部一般备注备案号,同时链接到工信部的网站。比如腾讯云网站下方展示如下:

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和关注的二维码。后台统计数据分析,发现点击了链接,没有去扫描二维码关注下载的用户比较多。 客观原因主要有二:
  1. 跳转到百度网盘,却找不到提取码
  2. 跳转到百度网盘,需要回到原页面找二维码,不方便导致放弃。 改版以后如下图:
  • 引入图片预览插件,提升资源预览体验 资源详情页,图片无法放大,或者翻页查看。我们引入Viewer.js提升了对图片的预览体验。该插件强大、简洁,力荐:
  • 利用百度统计分析我们的数据 百度统计的接入很简单,可以通过官方快速接入。只需要在页面head标签中嵌入一段代码即可。 百度统计让我们更了解网站的各项指标,比如:
  • pv
  • uv
  • 实时访问监控
  • 搜索引擎关键词访问监控
  • 外链来源监控
  • 来客的地域分布
  • 来客年龄分布
  • 新客、旧客统计
  • 访问页面排行 ... 等等,通过百度统计会发现很多有趣并且有价值的数据。

今天就分享到这里了,我是公众号「面试怪圈」的Yesterday,喜欢技术、喜欢研究,今天的文章如果您感兴趣,可以关注下方公众号,一起交流技术:

下面是面试怪圈交流群,里面有很多一线大厂大佬,可为大家答疑解惑,欢迎加入,如果过期,可关注公众号添加我个人微信,我拉大家入群:

可爱猪猪

2021/08/25  阅读:25  主题:兰青

作者介绍

可爱猪猪