宝塔配置前后端分离项目

服务器 + 宝塔面板配置前后端分离项目

在搭建前后端分离项目时，我们通常会遇到一些挑战，尤其是在配置和部署过程中。作为前后端分离架构的实现者，如何将前端和后端分开部署、通过 Nginx 配置反向代理来保证两者的无缝衔接是必须掌握的一项技能。在本文中，我将分享一些在宝塔面板环境下配置前后端分离项目的经验和实践。

从前端打包的配置、后端部署到 Nginx 配置的反向代理，每一步都充满了坑，但也正是通过这些步骤，我们确保了项目在生产环境中的高效、稳定运行。希望这篇文章能帮助你少走弯路，节省一些调试时间，避免踩到我曾经踩过的那些雷。

前端和后端分离的架构让项目的可扩展性和维护性得到了很大提升，但也带来了诸如跨域请求、安全性、反向代理等一系列问题。希望通过这篇分享，大家能够更加顺利地完成部署，并获得更加顺畅的开发体验。

在进行前后端分离的项目部署时，涉及到前端打包、后端配置、以及反向代理等步骤。这里我将以一个 React 框架的前端项目为例，分享如何在宝塔面板下配置前后端分离项目。

一、前端打包与配置

1.1 打包准备

在 React 项目中，默认情况下，使用 BrowserRouter 来处理路由，但是在部署到生产环境时，使用 BrowserRouter 会出现一些问题，尤其是在服务器没有配置路由重定向时。因此，建议在生产环境中使用 HashRouter，这样可以避免前端路由路径刷新时，导致的 404 错误。

1.2 修改 React 路由

如果你使用的是 BrowserRouter，请将其更改为 HashRouter，修改方式如下：

// 修改前：
import { BrowserRouter } from 'react-router-dom';

// 修改后：
import { HashRouter } from 'react-router-dom';

1.3 修改 package.json

为了让 React 应用在根目录下正确部署，需要在 package.json 中添加 homepage 字段：

{
  "homepage": "."
}

1.4 打包前端

运行以下命令进行打包：

npm run build

此时，React 会生成一个 build/ 文件夹，里面包含了所有的打包文件，包括 index.html、CSS、JavaScript 等。

1.5 上传前端文件

将 build/ 文件夹中的所有文件上传到服务器。默认情况下，前端项目会部署在网站的根目录(你自己在宝塔面板里配置的)，通常是 /www/wwwroot/ 下的一个子目录。

• 例如，将 build/ 中的文件上传到 /www/wwwroot/history.nuyoahming.xyz/ 目录。
• 重点：确保设置里默认文件中有一个 index.html 文件，这是网站的入口文件。

一旦文件上传并覆盖到服务器根目录下，你可以访问配置的域名，看看前端是否正常工作。

---

二、后端配置与部署

2.1 上传后端代码

在宝塔面板中，创建一个新的目录用于存放后端代码。你可以通过以下步骤来上传和解压后端代码：

1. 将后端代码上传到服务器指定目录（比如 /www/wwwroot/backend/）。
2. 上传 node_modules 文件夹时，可以将它压缩成 .tar.gz 或 .zip 文件，上传完成后再解压。因为文件夹中可能有超过 1000 个文件，直接上传可能会导致上传失败。

2.2 安装 Node.js 和 NPM

1. 登录到服务器，通过 SSH 安装 Node.js 和 NPM：

# 安装 Node.js (以安装 Node.js 14.x 版本为例)
curl -sL https://deb.nodesource.com/setup_14.x | bash -
sudo apt-get install -y nodejs

2. 安装完 Node.js 后，使用以下命令验证是否安装成功：

node -v
npm -v

2.3 安装 PM2

为了确保后端能够一直运行，建议使用 PM2 来管理 Node.js 应用。PM2 是一个进程管理工具，它可以保持应用在后台运行，并且自动重启应用。

npm install -g pm2

2.4 启动后端服务

进入到后端项目的根目录，启动后端应用：

pm2 start app.js

此时，后端服务已经通过 PM2 启动并运行，可以通过 pm2 list 查看所有管理的进程。

2.5 配置后端端口

通常，后端应用会运行在 3001 或类似的端口上。确保后端服务监听正确的端口。

---

三、配置 Nginx 反向代理

前后端分离应用通常是将前端和后端部署在同一服务器的不同端口上。为了使用户可以通过统一的域名访问 API，我们需要使用 Nginx 配置反向代理。

3.1 配置反向代理

假设前端应用通过 https://域名 访问，而后端服务在 localhost:3001 上运行，下面是 Nginx 配置文件的例子：

server {
    # 将 /api/ 请求转发到后端服务
    location /api/ {
        proxy_pass http://localhost:3001;  # 后端 HTTP 服务
        proxy_set_header Host $host;  # 保留客户端的请求主机
        proxy_set_header X-Real-IP $remote_addr;  # 保留客户端真实 IP
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 保留转发的地址
        proxy_set_header X-Forwarded-Proto $scheme;  # 保留协议（http 或 https）
    }
}

3.2 解释配置：

1. SSL 配置：配置了 SSL 证书，使得网站支持 HTTPS 协议，保证前后端通信的安全性。
2. 反向代理：
   • location /api/ { proxy_pass http://localhost:3001; }：将所有请求 /api/ 的路径转发到 localhost:3001，也就是后端服务。
   • proxy_set_header：这些指令确保将正确的请求头传递到后端。
3. 静态文件配置：如果需要支持 PHP 或其他后端技术，Nginx 可以代理到相应的进程。
4. 敏感文件禁止访问：为了提高安全性，禁止访问 .env、.git 等敏感文件。

3.3 重载 Nginx 配置

配置完 Nginx 后，记得重载 Nginx 使其生效：

sudo nginx -s reload

---

四、总结

1. 前端打包与部署：

   • 使用 HashRouter 避免刷新页面时出现 404 错误。
   • 在 package.json 中添加 "homepage": "."，然后进行打包并上传到服务器。

2. 后端部署：

   • 使用 PM2 来启动后端，确保后端服务一直运行。
   • 后端服务运行在本地（如 localhost:3001），不需要暴露公网 IP。

3. Nginx 反向代理：

   • 配置 Nginx 将 /api/ 路径的请求转发到后端服务，前端可以通过 HTTPS 安全访问 API。
   • 配置 SSL 证书保证通信的安全性。

通过这种方式，前端和后端可以通过同一个域名进行通信，且不会遇到混合内容问题。同时，后端仍然可以在内网运行，提高了安全性。