历时一个月，独立开发一个从零到部署上线的个人博客全栈项目

这篇文章本该是在22年底就开始写的，因为准备校招和后续公司的事情一拖再拖，终于前段时间在腾讯云服务器到期之后，我又买了一年的阿里云服务器，重新把项目的自动部署搭建在阿里云服务器上让项目重新上线后，我决定写这篇文章来记录一下这个项目的整体开发。

在22年底的时候，那时候还是大四的寒假，为了校招的项目经历，也是为了锻炼自己独立从项目搭建到项目部署优化的开发能力，我决定着手开发一个集后台与前台一体的个人博客项目，之所以选择开发博客项目，一是因为博客项目确实是作为独立开发最合适的项目选择，在技术选型上更能提升自己，二是开发了博客项目后能将自己的笔记和知识点记录下来，所以当时有了这个想法后就开始着手准备开发。既然选择了开发满大街的个人博客项目，就得有自己的项目亮点，所以我决定把重心放在项目的技术选型和后续优化部署上。

开发前期

项目从零开始开发的第一步就是技术选型以及项目结构和整体样式以及项目大体逻辑的设计

首先是项目的技术选型，博客项目有前台以及后台系统两部分，后台管理系统使用vue3+ts+vite开发，而前台网站由于面向用户，展示文章，需要考虑到后续的优化以及浏览器的seo，所以当时考虑决定使用vue对应的服务端渲染框架nuxt来进行开发，nuxt开发的一大特点是服务端直接返回完整的html供浏览器直接渲染，这样带来的好处有两个，一是不需要浏览器解析从而能够很大程度上减少白屏时间，二是直接返回html有利于浏览器的seo搜索引擎搜索。在决定使用nuxt开发前台网站后，当时尝试过使用nuxt3开发，但是当时nuxt3还处于rc测试版本，有很多坑，所以后面还是使用了更为稳定的nuxt2进行开发。

这样前端的技术选型基本确定下来了，至于后端，作为一名前端开发，自然是使用node来开发后端，当时选择了express框架结合mysql数据库来开发后端。这样项目的技术选型就确定下来了，接下来是项目的结构和逻辑的设计，我参考了网上很多的个人博客网站的案例，初步设计了前后台的结构以及大体的内容逻辑后，就着手开始了开发阶段。

开发阶段

在技术以及项目结构逻辑确定下来之后就是重要且漫长的开发阶段了

首先是mysql的表结构设计，在大致确定了项目的结构后，我就着手创建了几张数据库的表结构，并在后续开发中逐渐修改和完善。

mysql表结构：

项目的开发顺序是先开发了后端以及后台系统，然后基于后台系统的功能开发出了前台网站，前台文章用于文章的阅读，自然不能少了移动端，所以用vw+pxtorem+媒体查询实现了pc端、平板端以及移动端三端适配。

详细的适配方法看这篇文章：vw+pxtorem+媒体查询实现移动端适配

pc端：

平板端：

移动端：

项目整体通过token进行了鉴权，后端express在app.js文件统一接收请求判断token是否过期。其他的码代码的过程就不说了，枯燥且乏味。。。在项目大体开发完之后，就来到了重要且个人很感兴趣的项目优化和项目部署的阶段

项目优化及自动部署搭建

在项目开发完之后就开始了同样重要的项目优化以及项目部署上线阶段

首先是项目的优化，主要是对项目的渲染速度等进行优化，项目优化分为了两个阶段。

一是在项目开发过程中就对项目进行了有意识的优化，比如后台管理系统尽量减少请求的发送，富文本编辑器以及头像等上传图片到后端，后端存储到本地/服务器时也进行了处理，重复或者被覆盖的图片都会被删除，减少项目部署上线后对内存的占用。

二是项目开发完成后通过配置对项目进行整体优化，前台使用nuxt开发后性能已经很不错了，所以主要对后台系统进行优化，在开发阶段对后台项目使用vite配置gzip、压缩图片、按需引入第三方依赖、路由懒加载、keep-alive缓存组件、移除console.log等，同时使用骨架屏提升用户体验。在项目部署之后对前后台项目通过nginx开启gzip、开启https、开启http2、配置静态资源缓存等手段来提升项目的首屏加载速度。

在优化后可以通过浏览器的lighthouse来对项目的性能进行评分以及获取优化建议，优化完成后我的前台网站可以达到100分，性能可以说是很不错了，后台也可以有86分。

前台lighthouse：

后台lighthouse：

在项目优化告一段落后，就需要将项目部署上线（此处省略服务器和域名的购买还有网站备案、证书申请、创建docker镜像仓库等繁琐的操作。。。），由于我的项目重心放在了优化和部署上，所以优化和部署都要做的尽可能的好，所以部署我决定自己搭建自动部署，以实现在git提交了代码后执行配置流程自动将项目部署上。

之前自己有研究过通过guthub-webhook来实现自动部署，需要自己搭建中间服务器来监听github代码提交操作，再去通知服务器执行sh脚本命令实现代码更新重启，最开始也是打算通过这种方式实现自动部署，但是发现这种方式有一个弊端在于服务器执行sh脚本命令重新pull代码并install安装依赖这个阶段放在了服务器内执行，很耗费服务器的性能并且速度较慢，所以我决定使用github-action来实现自动部署；

github-action是github来搭建中间服务器，只需要配置workflow工作流文件就能实现自动部署，且项目的pull和install阶段都是放在github来进行的，不会放在服务器，相较于github-webhook来说不会浪费服务器性能，部署速度也更快。

详细的github-webhook操作可以看这篇文章：github-webhook+docker实现项目自动部署，github-action看这篇文章：github-action+docker实现项目自动部署，这两篇文章也介绍了自动部署的整体流程。

在决定使用github-action来实现自动部署后，我也决定在部署阶段加入docker技术，docker能实现容器化，使服务器中能独立运行多个不同版本不同配置的项目且互不影响，在我的项目中对前台、后台、后端以及mysql都单独启动了各自的容器来独立运行在服务器中，在配合nginx进行端口代理映射就可以让加入了docker的项目上线，使用docker需要去服务器创建镜像仓库用于保存镜像以及服务器拉取镜像并启动，还需要配置dokerfile文件，也是用于流程控制的配置，和workflow作用类似。具体的dokerfile配置代码以及workflow配置代码可以去我的github或者上面两篇介绍自动部署的文章中看。

服务器启动docker：

此外项目部署后我去申请了ssl证书，通过nginx配置开启了项目的https，同时也开启了http2，http2有着多路复用和头部信息压缩的特性，也是项目优化的一种方式，部署开启https及http2的详细介绍可以看我的另一篇文章：网站使用nginx部署ssl证书开启https（开启http2）

至此介绍了我的项目从零到部署上线的完整流程，项目地址：

前台：https://haixtx.cn/

后台：https://admin.haixtx.cn/

由于是个人博客项目，所以后台没有设置注册功能，也就只能给你们看看效果图：后台系统效果图

github地址：

前台：https://github.com/minus778/blog-nuxt2

后台：https://github.com/minus778/blog-vue3

后端：https://github.com/minus778/blog-express4

好啦，完整的项目开发流程就介绍完咯，需要代码的可以去我的github拉取，喜欢的可以点个star哦~