前后端在服务器上的部署

2025-03-06

背景 #

使用和风天气 api 搭建的前后端分别开发完成后，需要进行项目部署，放在公网上，让其他人使用。

服务器准备 #

服务器配置 #

我选购的是腾讯云一年 99 的轻量服务器，2 核 2G，适合用于学习 linux 操作系统，部署项目、游戏服务器。

环境准备 #

安装基础运行环境
- Node.js：确保服务器安装与开发环境一致的 Node.js 版本（推荐 LTS 版本），建议直接使用 nvm 工具管理 node 版本。
- Nginx：用于托管前端静态文件及反向代理后端服务（ubuntu 下执行 apt install nginx）。
- PM2（可选）：通过 npm install pm2 -g 安装，用于管理 Node.js 进程，保障服务稳定性。
配置防火墙与端口
- 开放必要端口（如前端 HTTP/HTTPS 的 80/443，后端服务的 3000 或其他自定义端口，这个直接在服务器的控制台直接操作即可）

后端（Koa）部署 #

代码适配生成环境，修改 listen 端口和 hostname
```
app.listen(3000, "0.0.0.0");
```
上传后端代码到服务器
- 通过 SFTP 传送文件或者 git 拉取代码，路径随意，例如~/project/backend
- 执行 npm install 安装生成依赖
启动服务
- 使用 pm2 管理进程:
```
 pm2 start app.js --name "koa-server"
```
- 验证服务状态：pm2 list 或者访问 http://服务器 ip:端口

使用这种工具管理的好处是，会帮助我们生成 log，同时提供命令方便停止、删除、重启服务，除此之外也可以使用最简单的方式node app.js

前端（React）部署 #

构建生产包
- 在本地运行 npm run build，生成 build 或 dist
上传静态文件
- 将构建之后的文件夹通过 scp 或者 sftp 的方式上传到服务器上，例如放在/var/www/html/projectname
配置 Nginx 托管前端 Nginx 的配置文件位于/etc/nginx

/etc/nginx/nginx.conf - 主配置文件

/etc/nginx/sites-available 和/etc/nginx/sites-enabled - 站点配置文件

通常我们将配置写在 sites-available 中，并通过软连接的方式在 sites-enabled 中启用

创建一个配置文件

sudo vim /etc/nginx/sites-available/projectname
# 添加以下内容
server {
  listen 80;
  server_name 你的域名或IP;
  location / {
      root /var/www/html/projectname/dist;
      try_files $uri $uri/ /index.html; # 支持前端路由
  }
  # 反向代理后端 API
  location /api {
      proxy_pass http://localhost:3000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
  }
}

创建软链接 sudo ln -s /etc/nginx/sites-available/projectname /etc/nginx/sites-enabled/
测试 nginx 配置有没有语法错误

sudo nginx -t

重新加载 nginx，让配置生效

sudo nginx -s reload

跨域与安全配置 #

后端跨域支持
- 使用 nginx 反向代理，请求在服务器内部流转
- 未使用 nginx 时，需要在 koa 中启用 cors 中间件
```
const cors = require("@koa/cors");
app.use(cors());
```
https
- 使用 Let’s Encrypt 申请免费 SSL 证书，配置 Nginx 的 HTTPS 监听。

验证与监控 #

访问测试
- 通过服务器 ip，访问前端页面，检查静态资源以及 api 调用
- 使用 curl 命令或者 postman 等工具验证后端接口
日志
- 后端日志：通过pm2 logs查看，但需要 koa 自己提供日志信息
```
import logger from "koa-logger";
// 日志记录
app.use(logger());
```
- 前端日志：Nginx 日志，一般放在/var/log/nginx/access.log 和/var/log/nginx/error.log

踩坑 #

nginx 的 root 路径要和 index.html 的目录保持一致
执行软链接时，路径要写完整