第一期:服务器搭建部署AnHeYu博客框架

碎碎念🧩

哈喽,大家好,我是蔚蓝👋🏻 为了更好的维护和发展AnHeYu的生态,让更多的小伙伴都能感受到自己搭建博客的乐趣,我后续会出一系列博客搭建的教程,这将会是一个系列。对我来说,成功的道路不可完全复制,但失败的路径完全可以规避,实践本身就是一个波浪式前进螺旋式上升的过程,希望我失败的经验能够帮助到大家,并引发你自己的独立思考,这就是你阅读这篇博客最大的意义!

:::tabs

== tab AnHeYu博客框架搭建部署教程

:::btns cols=1

:::

:::

今天是我们AnHeYu博客搭建的第一期教程 「服务器搭建部署AnHeYu博客框架」 后续的篇章也会陆续更新。废话少说我们正式开始。

本地搭建部署💻

如果你像我一样只是喜欢AnHeYu的UI,并且只是想拥有一个博客写作的平台的话,本地搭建AnHeYu框架其实是一个非常合适的选择。

本地搭建有如下的好处:

  • 搭建简单:只需安装一个 Docker ,无需像服务器那样折腾
  • 数据安全:所有数据全部保存在本地,外部无法访问
  • 无网写作:随时随地写博客,只要你想 (手动滑稽)
本地搭建的域名 本地博客写作

第一步:安装 Docker

对于从未接触过计算机的小白,这里我只推荐 Docker 部署。可以将 Docker 想象成一个独立的虚拟计算机,它有自己独立的环境,完全与外界隔离,并且能够屏蔽不同操作系统底层架构带来的差异。它的搭建部署非常的简单,只需简单几行命令即可部署运行。

Docker 简单介绍

  • Docker: Docker 是一个容器化平台,基于镜像和容器管理应用
  • Docker Compose: Dcoekr Compose 是用于编排多个 Docker 容器的一项技术。

AnHeYu包含了 前端、后端、数据库 三个核心容器,所以采用的是 Docker Compose 进行编排部署

Windows安装 Docker

由于我是 macOS 系统,无法显示 Windows 系统,这里给大家找了一篇博客,可以参照这篇博客安装。 {linkcard url=https://blog.csdn.net/HYP_Coder/article/details/141753300 title=Windows安装Docker详细教程 sitename=CSDN}{/linkcard}

macOS安装 Docker

1. 安装 Docker Desktop

Docker Desktop 是 Docker 的可视化界面管理软件,可以直接通过界面点击设置 Docker,无需输入复杂的指令,开箱即用📦。macOS基于UNIX系统,所以安装 Docker 非常的简单 首先来到 「Docker官网https://www.Docker.com/products/Docker-desktop/」 选择适配自己电脑的版本进行安装

具体如何查看自己的芯片架构请参照 「末尾附录:Mac用户如何查看自己的芯片架构」

2. 启动Docker Desktop

  1. 确保自己的 Docker 处于启动状态

  2. 打开终端并确保自己的Dcoeker环境正常

  • 点击Terminal打开控制台
  • 输入Docker --version命令查看Docker版本
  • 检验环境是否正常

✅正确示例如下: 查看Docker环境

这里我暂时还没遇到过问题,如果在查看环境这一步出现了问题请自行百度,这个问题应该很好解决的。

第二步:安装AnHeYu博客框架

第二步我们正式安装AnHeYu框架,我们是基于 Docker Compose 来搭建框架,所以需要编写 docker-compose.yml文件,这里我们需要先安装一个称手的代码编辑器,这里比较推荐 VSCode 和字节的 Trae。推荐 Trae 的原因是他本身就基于 VSCode 而且集成了很多AI的功能,遇到不会的问题可以直接问AI。

2.1 安装代码编辑器

来到「Trea https://www.trea.ai」官网选择对应的版本进行安装

2.2 创建空白文件夹

2.3 编写Docker-compose.yml文件

首先在当前的文件夹内创建一个名为Docker-compose.yml的新文件,然后将下面这段代码粘贴复制进刚创建的文件中并保存(别忘了保存😅)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
services:
AnHeYu :
image: AnHeYu / AnHeYu -backend:latest
container_name: AnHeYu -backend
depends_on:
- AnHeYu _postgresql
# Redis 是可选的,如果不需要可以注释掉下面这行
- AnHeYu _redis
restart: always
ports:
- 8091:8091
environment:
- ANHEYU_DATABASE_TYPE=postgres
- ANHEYU_DATABASE_HOST= AnHeYu _postgresql
- ANHEYU_DATABASE_USER= AnHeYu
- ANHEYU_DATABASE_NAME= AnHeYu
- ANHEYU_DATABASE_PORT=5432
- ANHEYU_DATABASE_PASSWORD= AnHeYu _password
# Redis 配置(可选)
# 如果想使用 Redis,保持下面这行;如果不想使用,注释掉即可
# 不配置时应用会自动降级到内存缓存
- ANHEYU_REDIS_ADDR= AnHeYu _redis:6379
volumes:
- ./data:/ AnHeYu /data
- ./themes:/ AnHeYu /themes
- ./static:/ AnHeYu /static
- ./backup:/ AnHeYu /backup

AnHeYu _postgresql:
# Best practice: Pin to major version.
# NOTE: For major version jumps:
# backup & consult https://www.postgresql.org/docs/current/pgupgrade.html
image: postgres:18
container_name: AnHeYu _postgresql
environment:
- POSTGRES_USER= AnHeYu
- POSTGRES_DB= AnHeYu
- POSTGRES_PASSWORD= AnHeYu _password
volumes:
- database_postgres:/var/lib/postgresql

# Redis 服务(可选)
# 如果不需要 Redis,可以注释掉整个 AnHeYu _redis 服务
AnHeYu _redis:
image: redis:latest
container_name: AnHeYu _redis
volumes:
- redis_data:/data

volumes:
database_postgres:
redis_data:

粘贴并保存完对应的代码之后需要修改对应的 账户名、密码、端口 等配置信息。当然不修改也没关系,因为是本地运行部署,无需担心被攻击,保持默认也完全没有问题。

2.4 运行 docker-compose 文件

打开 Trea 自带的终端,这里有几点需要注意

  • 确保终端的路径是你刚刚创建的文件夹的路径
  • 确保你的Docker-compose文件已经成功编辑并保存

在终端输入如下指令:docker compose up -d

1
Docker compose up -d

可能遇到的问题

  • 遇到Error错误:这大概率是由于网络原因导致的,因为Docker服务器在国外,国内访问有一定限制
  • 解决方案:1.科学上网(本篇博客不教学)2.多试几次(大概率可以解决)

如果你没有遇到上述的问题,那么恭喜你💐 你已经成功在本地部署了 AnHeYu 框架,具体的运行状态可以通过 Docker Desktop 查看,具体细节如下图所示。 容器运行状态

在 Docker Desktop 中你可以通过点击左侧的 Containers 选项来查看正在运行的容器。 AnHeYu 会显示在列表中,你可以点击进入查看具体的详情。通过日志也可以看到我们确实已经成功运行了,并且当前容器正在监听8091端口,这也是我们本地的访问端口。 接下来可以通过在浏览器输入:http://localhost:8091 来访问我们的博客,具体的效果如下:

注意点: 1.创建的容器名称和你的文件夹名称一致 2.监听的端口名和你的 docker-compose 中配置的端口一致

服务器搭建部署☁️

如果你想和我一样既想要本地部署又想要云端访问,那我们需要接着进行服务器端搭建部署,整体的流程如下图所示:

第一步:购买云服务器

云服务器的厂商有很多,著名的像阿里云、腾讯云、华为云、京东云等等。并且各家厂商的操作界面和方法基本一致,无需太担心。并且如果你是新用户,一个 2C2G 的服务器的价格也就几十块钱,完全可以开销的起。这里我比较推荐使用腾讯云,一来它的价格比较便宜,二来我们后续会使用到腾讯云的 EdgeOne 进行网站加速。 「腾讯云https://cloud.tencent.com/act/pro/double12-2025?from=29181」

第二步:安装bt面板

购买完云服务后,来到后台的控制管理界面,由于腾讯云的界面比较复杂,建议将 「服务器管理」 收藏起来方便后续查找使用。

点击进入到 「云服务」 ,你购买的也可能是 「轻量应用服务器」 这二者基本没什么差别,操作方式完全一样。你在购买云服务器的时候可能已经装过操作系统了,这里为了连贯性,我从重装操作系统开始演示。

这边建议直接使用 「应用模板」 进行安装,然后选择对应的 「宝塔Linux面板」 ,接着输入自己的密码。由于是新建的服务器所以无需备份,直接重装即可。

重装完系统之后,我们需要点击防火墙,开放一下对应的端口服务 那么我们为什么需要开放防火墙呢? 因为我们的服务器是搭建在腾讯云平台上的,服务器本身有一层防火墙,为了安全,在最外层还有一层腾讯云的防火墙。这也就是为什么有些时候你明明已经打开了服务器防火墙但仍无法访问到对应的服务,有可能就是这个原因导致的。 点击防火墙,选择左侧的 「添加规则」 按钮,按照如下规则设置:

  • 来源:全部IPv4地址
  • 协议:TCP
  • 端口:8091
  • 策略:允许

设置完对应的防火墙规则之后,点击 「登录」 登录到控制端 在命令行输入:bt 14查看bt的默认信息,记住你的 网址、账户、密码

通过刚才的 网址、账户、密码 登录到bt面板

错误示例❌ 正确示例✅

第三步:安装 Docker

进入到bt面板之后,我们点击侧边栏的 「 Docker 」 选择 「立即安装」,安装方式直接默认即可。 等待一会儿即可安装完毕(美味是需要等待的😴)

第四步:安装 AnHeYu 框架

点击 Docker 进入到 Docker 管理界面。点击上方tab栏中的 「容器编排选项」 ,接着点击左侧的 「添加容器编排」 。在对应的弹窗上输入编排名称:AnHeYu,然后将上文中提到的 Docker-compose.yml 文件中的编排内容输入到当前的框中,最后点击确认选项 启动成功的示例如下图所示

错误示例❌ 正确示例✅

第五步:对外暴露端口

到这里 AnHeYu 框架已经成功在你的服务器上运行起来了,如果想要从外界访问,还需要对外暴露端口。我们需要同时对外暴露腾讯云的防火墙端口和服务器本身的防火墙端口。「腾讯云防火墙端口」如何暴露已经在上文提及,接下来演示如何暴露 「服务器防火墙端口」

如果到这一步也没什么问题,那么恭喜你💐 至此你的服务器搭建部署大功告成,你可以通过访问 http://服务器ip:8091 的方式访问你自己的博客。

有些小伙伴可能觉得这样通过ip的访问方式太蠢了而且也不优雅,那么欢迎你继续跟进我的博客搭建系列教程,我会继续在后续更新 如何申请并绑定自己的域名、如何添加SSL、使用对象存储保存图片、CDN加速以及其他一些有趣的小把戏😎

本期教程告一段落,我们下期再见👋🏻~

附录

Mac用户如何查看自己的芯片架构

1.点开Apple设置 2.查看自己的芯片