RavelloH's Blog

LOADing...



RThemeV4部署完全指南

rthemev4-deployment-complete-guide

技术/文档 3209

rthemenextjs


RThemeV4相较于V3版本,外观差别不是很大。主要的更改来自其架构,目前为止RThemeV4更像是一个独立的博客系统而不只是一个静态页面的主题,这是因为V4中整体进行了React化,搭配Nextjs即可动态的从数据库中获取数据并在服务器端渲染页面。因此,部署V4版本就不像之前的版本那样简单——之前的版本只要托管静态资源即可,而现在更需要的是服务器与数据库。

不过,此博客系统因为使用了 Hybrid Applications(混合应用程序)架构,即大量不会经常改变的内容(如文稿等)会在构建通过请求数据库进行渲染,随后作为静态资源分发给用户,以便减少对数据库和服务器的需求,部分经常改变的内容(如用户资料、动态等)则会使用SSR技术,在请求时再渲染,这样的架构使得博客对数据库和服务器的使用强度又远小于纯动态站点,仅仅使用Serverless函数和小型数据库即可完美运行,如此我们就可以使用Vercel这样的提供Serverless服务与Postgresql数据库的平台来托管此站点。当然,也可使用VPS等直接部署。下文介绍几种部署方式:

Vercel部署

vercel开发了nextjs,并且免费提供了Postgresql数据库,可以快速部署RThemeV4. 美中不足的一点是,因为vercel免费提供的vercel.app域名在大陆地区访问异常,你需要一个自有域名来防止你的服务无法正常访问。

准备

你需要:

  • 一个Github账号
  • 一个Vercel账号
  • 你的头像照片(正方形,jpg格式)
  • 一个分辨率至少512*512的png格式正方形照片,作为站点的图标(也可与头像重复)

流程

  1. 首先Fork或CloneRavelloH/RTheme仓库。这里推荐Fork,Fork后后续有更新即可一键同步上游代码,直接更新。 fork
  2. 在vercel的Storage页面中新建一个postgresql数据库 create-vercel-db 注意:为了使部署站点的访问延时尽量低,请选择Singapore地区创建 select-vercel-db
  3. 在你创建的数据库的详情页面,点击Show secret,再复制引号中的数据库url(如果Show secret了,url里不会有星号隐藏) find-db-url
  4. 在vercel中新建项目,选择你Github上面刚刚Fork或clone的仓库 vercel-create
  5. 设置环境变量 在新建页面中,点击Environment Variables栏目,展开填写以下键值对:(下面冒号左边的填在Key栏中,冒号右边的填在Value栏中)
  • DATABASE_URL: 你刚刚复制的数据库url
  • BUFFER: 一串10个字符的英文,不加空格,用以加密你的数据库
  • PEPPER: 一串10个字符的英文,不加空格,用以加密你的数据库(不要与上面重复了)
  • JWT_KEY: 生成的RS512密钥,见后文
  • JWT_PUB_KEY: 生成的RS512公钥,见后文

在这里我们使用了曾获密码算法大赛冠军的argon2id算法,在使用RS512算法加密校验JWT的同时也用了一套自研的加密算法,用以保护你的服务器。

你需要生成一个RS512密钥。以下是生成方法:

  • 如果你的计算机安装有openssl,你可以在终端中生成:
openssl genrsa -out private_key.pem 2048
  1. 开始部署 点击develop即可部署。

  2. 优化函数地区 前往你的vercel项目的Settings,找到function,将运行地区改为靠近你的数据库的地区(如新加坡) vercel-function

  3. 添加你的自定义域名 在Vercel项目的Settings>Domains页面添加你的自定义域名。你可能需要根据你的域名注册地址,修改域名的cname记录和A记录。 domain

  4. 自定义你的站点 前往你的Github存储库,完成以下操作: github-repo

    1. 将public文件夹下的avatar.jpg与icon.png替换为你的头像与图标(注意,名称需要与之前相同,即avatar.jpg与icon.jpg)
    2. 修改origin/about文件夹下的about.mdx文件,此文件对应博客中的关于页面,可使用markdown语法。(此操作在以后的更新后也会简化,在站点中即可操作)
    3. 重要:修改根目录下的config.js文件,按照注释修改即可。注意遵从“看不懂就不改”原则,之后我会再补充每一项的详细设置。
  5. 当你修改完成后,Vercel将会自动更新站点。你可能需要3-5分钟等待Vercel部署完成。随后,即可打开你的站点,进行用户初始化。

  6. 打开你部署的站点,点击左上角头像图片,选择注册,并登录: userbar signup 作为第一个用户,你会被授予管理员权限。之后,你可以随时点击左上角头像,进行文章的增删改查操作

  7. 注意:当你编辑完文章并发布后,你会被转到此文章的页面。但是此时,站点并未更新,所以这个新的文章就不会显示在列表页。 因此,你需要在每次发布新文章后,转到你的vercel项目,点击Deployments,选择redeploy,等待博客重新构建才会完成。(在随后更新的版本中也会添加一键构建的功能,在博客内操作即可。) republish

(未完待续...)

INFO

00:00


无正在播放的音乐
00:00/00:00

账号
User avatar
未登录未设置描述...