手摸手教你如何部署 fuxiaochen 博客网站

教你怎么部署 fuxiaochen 博客网站

发布于  星期四，三月 28 2024

前置准备

  • 一台 Linux 服务器（这里我使用 Rocky Linux8.6 系统来演示整个部署流程）

  • 一个已经备案的域名

需要的知识

如果你对以下几项一点都不了解，赶快去学习吧

  • Linux：因为网站是使用 Linux 系统部署的，Linux 知识是必需的，至少需要知道怎么登录服务器和怎么安装各种依赖包

  • Git：git clone 总会用吧

  • Next.js + React + TypeScript：本项目就是使用这些技术栈开发的，会这些遇到问题好排查

  • Vim：至少会使用 Vim 创建、编辑和保存文件

配置服务器环境

为了方便操作，这里默认以 root 用户登录服务器做演示，请根据实际情况调整，（非root用户）部分命令可能需要在前面加上 sudo 才能执行

配置国内软件源

如果你用的是阿里云的服务器，一般都默认配置好了国内的软件源，则可以跳过这一步
参考链接：【阿里云镜像】全新图文安装 Rocky Linux 系统 💖 并切换阿里巴巴 Rocky Linux 镜像源 💝

  1. 登录到服务器

  2. 执行以下命令替换默认源：

sed -e 's|^mirrorlist=|#mirrorlist=|g' \
    -e 's|^#baseurl=http://dl.rockylinux.org/$contentdir|baseurl=https://mirrors.aliyun.com/rockylinux|g' \
    -i.bak \
    /etc/yum.repos.d/Rocky-*.repo
  1. 执行以下命令构建缓存：
dnf makecache

安装必备依赖包

执行以下命令安装我们需要的依赖包

dnf install wget zsh git vim unzip procps make sudo mysql-server redis -y

  • -y 参数：表示自动确认安装过程中的提示，可以避免手动输入y或其他确认信息，使安装过程更加自动化

  • mysql-server：在服务器上需要安装 MySQL 时，安装的是 mysql-server 而不是 mysql，这个需要特别注意一下

  • procps：安装 ps 命令

安装 Oh My Zsh + 配置插件

Oh My Zsh 配合插件使用体验非常好，可以实现以下几个功能：

  • 终端可切换不同配置主题，不再是黑乎乎的窗口

  • 自动命令提示：针对已经敲过的命令，再次输入时会有提示

  • 命令高亮：已有的命令显示绿色，没有的命令显示红色

效果展示：

oh-my-zsh-showcase.gif

以下是安装步骤：

  1. 切换到当前用户的 home 目录
# 切换到当前用户的 home 目录
cd ~

# 查看当前所在目录
pwd

image.png

  1. 使用 wget 获取国内安装脚本

执行这条命令后，你会在当前目录下得到一个 install.sh 文件

wget https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh

image.png

  1. 编辑 install.sh 修改 REPO 和 REMOTE 字段，设置为国内源（Gitee）
vim install.sh

找到

REPO=${REPO:-ohmyzsh/ohmyzsh}
REMOTE=${REMOTE:-https://github.com/${REPO}.git}

修改为

REPO=${REPO:-mirrors/oh-my-zsh}
REMOTE=${REMOTE:-https://gitee.com/${REPO}.git}

修改好后保存文件并退出

  1. 给 install.sh 添加可执行权限

可以使用 ls -al 命令，查看当前文件夹下所有文件的具体信息

image.png

使用以下命令给 install.sh 文件添加可执行权限

chmod +x install.sh
  1. 执行 install.sh
./install.sh

Kapture 2024-03-29 at 01.04.06.gif

可以看到执行完 install.sh 后终端是不是花里胡哨的，比之前黑乎乎的好看点

  1. 安装 Oh My Zsh 插件并配置

安装两个插件：

  • zsh-autosuggestions：输入命令显示提示用的

  • zsh-syntax-highlighting：高亮命令用的

# 安装 zsh-autosuggestions
git clone https://gitee.com/aifuxi/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

# 安装 zsh-syntax-highlighting
git clone https://gitee.com/aifuxi/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

使用 sed 命令编辑 ~/.zshrc，配置启用的插件

sed  -i 's/plugins=(git)/plugins=(git zsh-syntax-highlighting zsh-autosuggestions)/g'  ~/.zshrc

重载配置文件，使配置生效

source ~/.zshrc
  1. （可选）设置 Oh My Zsh 主题为 random

可以设置主题为 random，这样每次打开终端窗口会随机启用一个主题，可以体验更多主题配置

vim ~/.zshrc

# 修改 ZSH_THEME 为 random
# ZSH_THEME="random"

# 重载配置文件，使配置生效
source ~/.zshrc

random-theme.gif

安装前端运行环境

  1. 安装 nvm 和 Node.js v20.12.0
# 使用国内源（nvm-cn）安装 nvm，更多信息请访问：https://gitee.com/RubyMetric/nvm-cn
bash -c "$(curl -fsSL https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh)"

# 列出所有本地已安装版本
nvm ls

# 列出所有可安装版本（远程）
nvm ls-remote

# 安装
nvm install v20.12.0
  1. Npm/Pnpm 配置淘宝源
# 安装 nrm
npm i -g nrm --registry=https://registry.npmmirror.com

# nrm ls 查看可用源
nrm ls

# 使用淘宝源
nrm use taobao

# 再次 nrm ls 查看是否已选中
nrm ls

# 全局安装 Pnpm
npm i -g pnpm
  1. Pnpm 初始化配置
# 初始化
pnpm setup

# 让配置生效
source ~/.zshrc
  1. 安装 pm2
pnpm i -g pm2

配置 MySQL

  1. 启动 MySQL 服务
systemctl start mysqld
  1. 查看 MySQL 服务运行状态
systemctl status mysqld

image.png

  1. 设置 MySQL 服务开机自启
systemctl enable mysqld
  1. 初始化 root 用户密码并允许远程登录
mysql_secure_installation

image.png

image.png

  1. 登录 MySQL 创建数据库
# 输入下面命令然后回车，之后会让你输入密码
mysql -uroot -p

已经进入 MySQL 的交互模式后，创建数据库

CREATE DATABASE IF NOT EXISTS `fuxiaochen` DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci;

image.png

  1. 退出 MySQL 交互模式，有两种方法
# 1. 输入 quit
quit

# 2. 输入 exit
exit
  1. 一些你可能会用到的文件

  • /etc/my.cnf：MySQL 配置文件路径

  • /var/log/mysql/mysqld.log：MySQL 启动日志文件路径

配置 Redis

  1. 启动 Redis 服务
systemctl start redis
  1. 查看 Redis 服务运行状态
systemctl status redis
  1. 设置 Redis 服务开机自启
systemctl enable redis

安装 Caddy

Caddy 是一个使用 Go 开发的开源的 Web 服务器，它具有简单、易用和现代的特点。配置文件是 Caddyfile，编写简单。Caddy 官网

根据 Install — Caddy Documentation 进行安装

# Fedora or RHEL/CentOS 8:

dnf install 'dnf-command(copr)' -y
dnf copr enable @caddy/caddy -y
dnf install caddy -y

启动项目

拉取代码

为了方便组织项目，我们新建一个 workspace 文件夹，把代码当到这里

# 1. 创建 workspace 文件夹并进入
mkdir ~/workspace && cd ~/workspace

# 2. 拉取代码， 自行替换为自己的仓库地址
git clone https://github.com/aifuxi/fuxiaochen.git --depth 1

安装依赖

pnpm i

配置 .env 文件

# 创建 .env 文件
vim .env

填写以下信息

# Prisma 连接数据库配置，根据实际情况修改
# "mysql://用户名:密码@主机:端口/数据库"
DATABASE_URL="mysql://root:123456@127.0.0.1:3306/fuxiaochen"

# Redis 主机
REDIS_HOST="127.0.0.1"
# Redis 端口
REDIS_PORT="6379"

配置 .env.production 文件

# 1. 以 .env.example 为模版创建 .env.production 文件
cp .env.example .env.production

# 2. 编辑 .env.production 文件，修改为自己的配置
vim .env.production

下面是一个示例：

# ******************** 阿里云OSS ********************
# 阿里云OSS ACCESS_KEY
# 必填（线上）
OSS_ACCESS_KEY_ID="your-oss-access-key-id"

# 必填（线上）
# 阿里云OSS ACCESS_KEY_SECRET
OSS_ACCESS_KEY_SECRET="your-oss-access-key-secret"

# 进入某个bucket后的浏览器的地址：https://oss.console.aliyun.com/bucket/oss-cn-shanghai/aifuxi/object
# 可以从url里看到是哪个区域和bucket
# 阿里云OSS REGION 这个不能随便写，有具体的值，看自己的oss是在哪个区域
# 必填（线上）
OSS_REGION="oss-cn-shanghai"

# 阿里云OSS BUCKET
# 必填（线上）
OSS_BUCKET="your-bucket"

# 阿里云OSS 上传文件后所在目录
# 必填（线上）
OSS_UPLOAD_DIR="your-upload-dir"


# ******************** 网站 ********************
# 网站的预览地址（根据实际情况设置），站点地图的生成也是用这个当做域名前缀
# 必填（线上）
SITE_URL="https://fuxiaochen.com"

# ******************** next-auth ********************
# 必填
AUTH_GITHUB_ID="your-github-id"

# 必填
AUTH_GITHUB_SECRET="your-github-secret"

# 如果是线上，AUTH_SECRET必须设置
# 必填（线上）
AUTH_SECRET="your-next-auth-secret"

# 设置的值为你网站的域名+/api/auth，eg: https://fuxiaochen.com/api/auth
# 必填（线上）本地可忽略
# AUTH_URL="https://fuxiaochen.com/api/auth"

# ******************** ADMIN ********************
# ADMIN 邮箱列表，多个邮箱用英文逗号分隔开（不要加空格）
# 因为这个变量客户端也可能访问，所以必须以NEXT_PUBLIC_开头
# 必填
NEXT_PUBLIC_ADMIN_EMAILS="example@example.com,aifuxi.js@gmail.com"

根据 prisma.schema 自动创建表

在项目目录下执行

pnpm db:push

生成 PrismaClient 文件

pnpm db:gen

编译项目

在项目目录下执行

pnpm build

使用 pm2 启动项目

# 启动
pm2 start npm --name "next" -- start

# 重新加载
pm2 reload next

# 停止
pm2 stop next

云服务器防火墙放行端口

根据自己实际情况修改

  • TCP 80：HTTP 协议端口

  • TCP 443：HTTPS 用到的端口

  • UDP 443：开启 HTTP3 需要

  • TCP 3000：Next.js 项目默认运行的端口

  • TCP 3306：MySQL 默认运行端口，放行后可以使用软件远程连接到数据库

  • TCP 6379：Redis 默认运行端口，放行后可以使用软件远程连接到 Redis

预览

这个时候应该可以使用 服务器公网 IP + 端口号访问了，比如：123.456.789:3000

使用 Caddy 进行反向代理

实际项目肯定不应该让用户输入IP + 端口号访问的，现在都是通过域名进行访问的，比如：https://fuxiaochen.com

修改 Caddyfile 文件，在项目目录下已经有一个 Caddyfile，以这个作为模版自定义自己的配置

vim Caddyfile

Caddyfile 示例

Caddy 会自动配置 HTTPS，开启 HTTP2、HTTP3，自动将 HTTP 请求重定向到 HTTPS

fuxiaochen.com {
    # 开启 gzip 和 zstd 压缩
    gzip zstd
    reverse_proxy * localhost:3000
}

编辑好后保存并退出，使用下面命令启动 Caddy

caddy start --config ./Caddyfile

然后就可以使用域名访问了，比如：https://fuxiaochen.com

  • 关于本站
  • Next.js
  • Rocky Linux