博客搭建记录

简介 #

本文是针对搭建博客中用到的技术及采坑的记录。

写博客方便对自己技术的理解和在平时工作中遇到问题的笔记。从 18 年开始写个人网站的博客，用到的技术从 hexo 静态 githubio 到部署到阿里云服务器，从纯前端到服务端渲染(SEO)，从手动构建到自动部署(Docker)，前端框架的替换等(react->vue)。

技术栈 #

前端博客 #

前端技术栈为 Nextjs(这是一个用于 生产环境的 React 框架)，它轻量级的应用框架，主要用于构建静态网站和后端渲染网站。

TODO: Nextjs 搭建博客 #

https://blog.csdn.net/xgangzai/article/details/108544041

管理后台 #

管理后台功能: 文章管理、标签管理、分类管理、备份管理、每日一句管理。

管理系统有实现了vue3.0 和react 17.0.3。

TODO: 管理后台 #

后端服务 #

后端服务功能，文章、标签、分类、每日一局、用户等增加改查，数据库定时备份、七牛云存储、图片上传 cdn 等。

管理系统有采用 Typescript、Koa 和 Nestjs(Express)

TODO 后台服务链接 #

Nginx 服务 #

使用 nginx 集中处理所有请求来实现端口转发, 方便配置和部署新站点(https,http2)。

博客服务有使用 3 个服务。外网只能访问博客前端系统和管理系统。

考虑到管理系统中的 api 请求使用代理转发，所以直接把服务的访问放开了。(设置管理系统的 api 请求转发之后， 请求的路径变成 manage/api/xxx, 那么也可以通过其他的方式 manage/api/xxx 来访问 api 啦)。 所以干脆直接开发服务以供访问。 同时设置了 CORS 仅 Access-Control-Allow-Origin: ‘xxxxx’。仅允许同站点访问。

TODO Nginx 配置 #

部署架构图 CICD #

CICD 用来拉取镜像进行部署。