发布于 星期四,三月 28 2024
351 人浏览过
手摸手教你如何部署 fuxiaochen 博客网站
教你怎么部署 fuxiaochen 博客网站
前置准备
-
一台 Linux 服务器(这里我使用 Rocky Linux8.6 系统来演示整个部署流程)
-
一个已经备案的域名
需要的知识
如果你对以下几项一点都不了解,赶快去学习吧
-
Linux:因为网站是使用 Linux 系统部署的,Linux 知识是必需的,至少需要知道怎么登录服务器和怎么安装各种依赖包
-
Git:
git clone
总会用吧 -
Next.js + React + TypeScript:本项目就是使用这些技术栈开发的,会这些遇到问题好排查
-
Vim:至少会使用 Vim 创建、编辑和保存文件
配置服务器环境
为了方便操作,这里默认以 root 用户登录服务器做演示,请根据实际情况调整,(非root用户)部分命令可能需要在前面加上 sudo 才能执行
配置国内软件源
如果你用的是阿里云的服务器,一般都默认配置好了国内的软件源,则可以跳过这一步
参考链接:【阿里云镜像】全新图文安装 Rocky Linux 系统 💖 并切换阿里巴巴 Rocky Linux 镜像源 💝
-
登录到服务器
-
执行以下命令替换默认源:
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
- 执行以下命令构建缓存:
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 配合插件使用体验非常好,可以实现以下几个功能:
-
终端可切换不同配置主题,不再是黑乎乎的窗口
-
自动命令提示:针对已经敲过的命令,再次输入时会有提示
-
命令高亮:已有的命令显示绿色,没有的命令显示红色
效果展示:
以下是安装步骤:
- 切换到当前用户的 home 目录
# 切换到当前用户的 home 目录
cd ~
# 查看当前所在目录
pwd
- 使用
wget
获取国内安装脚本
执行这条命令后,你会在当前目录下得到一个 install.sh 文件
wget https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh
- 编辑
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}
修改好后保存文件并退出
- 给
install.sh
添加可执行权限
可以使用 ls -al
命令,查看当前文件夹下所有文件的具体信息
使用以下命令给 install.sh
文件添加可执行权限
chmod +x install.sh
- 执行
install.sh
./install.sh
可以看到执行完 install.sh
后终端是不是花里胡哨的,比之前黑乎乎的好看点
- 安装 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
- (可选)设置 Oh My Zsh 主题为 random
可以设置主题为 random,这样每次打开终端窗口会随机启用一个主题,可以体验更多主题配置
vim ~/.zshrc
# 修改 ZSH_THEME 为 random
# ZSH_THEME="random"
# 重载配置文件,使配置生效
source ~/.zshrc
安装前端运行环境
- 安装 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
- 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
- Pnpm 初始化配置
# 初始化
pnpm setup
# 让配置生效
source ~/.zshrc
- 安装 pm2
pnpm i -g pm2
配置 MySQL
- 启动 MySQL 服务
systemctl start mysqld
- 查看 MySQL 服务运行状态
systemctl status mysqld
- 设置 MySQL 服务开机自启
systemctl enable mysqld
- 初始化 root 用户密码并允许远程登录
mysql_secure_installation
- 登录 MySQL 创建数据库
# 输入下面命令然后回车,之后会让你输入密码
mysql -uroot -p
已经进入 MySQL 的交互模式后,创建数据库
CREATE DATABASE IF NOT EXISTS `fuxiaochen` DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci;
- 退出 MySQL 交互模式,有两种方法
# 1. 输入 quit
quit
# 2. 输入 exit
exit
- 一些你可能会用到的文件
-
/etc/my.cnf:MySQL 配置文件路径
-
/var/log/mysql/mysqld.log:MySQL 启动日志文件路径
配置 Redis
- 启动 Redis 服务
systemctl start redis
- 查看 Redis 服务运行状态
systemctl status redis
- 设置 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"
-
AUTH_GITHUB_ID
和AUTH_GITHUB_SECRET
怎么获取可以参考:基于Next14+Auth5实现Github、Google、Gitee平台授权登录和邮箱密码登录 -
阿里云
AccessKey ID
和AccessKey Secret
怎么获取可参考:创建阿里云AccessKey_访问控制(RAM)-阿里云帮助中心
根据 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