Strapi+React前后端部署：分服务器还是同服务器？实操疑问

API 探路者

2026-8-4

同一服务器部署Strapi+React方案可行性及问题解决

方案可行性结论

将Strapi后端与React前端部署在同一服务器、同一Git仓库的方案完全可行，既能降低服务器成本，也能通过环境变量统一管理不同环境的配置差异，同时解决数据库和API地址的适配问题。

1. 环境变量配置（解决API地址与数据库适配）

前端（React）API地址适配

React支持通过环境变量区分开发/生产环境，无需手动修改代码：

在前端项目根目录创建两个环境文件：
- .env.development（开发环境）：
```
REACT_APP_API_URL=http://localhost:1337/api
```
- .env.production（生产环境）：
```
REACT_APP_API_URL=https://your-domain.com/api
```

前端代码中调用API时，直接使用环境变量：

fetch(`${process.env.REACT_APP_API_URL}/somequery`)
  .then(res => res.json())
  .then(data => console.log(data));

开发时执行npm start会自动加载.env.development，生产打包npm run build会自动替换为.env.production的变量值。

后端（Strapi）数据库适配

Strapi原生支持通过环境变量配置数据库，轻松切换SQLite（开发）与PostgreSQL（生产）：

在Strapi项目根目录创建两个环境文件：

.env.development：

DATABASE_CLIENT=sqlite
DATABASE_FILENAME=./data.db

.env.production：

DATABASE_CLIENT=postgres
DATABASE_HOST=localhost
DATABASE_PORT=5432
DATABASE_NAME=strapi_prod
DATABASE_USER=your_db_user
DATABASE_PASSWORD=your_db_password

Strapi的config/database.js中读取环境变量配置：

module.exports = ({ env }) => ({
  connection: {
    client: env('DATABASE_CLIENT', 'sqlite'),
    connection: {
      filename: env('DATABASE_FILENAME', './data.db'),
      host: env('DATABASE_HOST'),
      port: env.int('DATABASE_PORT'),
      database: env('DATABASE_NAME'),
      user: env('DATABASE_USER'),
      password: env('DATABASE_PASSWORD'),
    },
  },
});

开发时启动Strapi自动加载开发环境配置，生产启动时指定NODE_ENV=production即可加载生产数据库配置。

2. 前端静态文件托管方案

推荐两种托管方式，根据需求选择：

方式1：用Strapi自带Express托管

适合小型项目，无需额外配置Nginx：

将React打包后的build文件夹复制到Strapi项目的public目录下；

修改Strapi的config/middlewares.js，添加静态文件服务：

module.exports = [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
  {
    name: 'strapi::static',
    config: {
      prefix: '/',
      dir: './public/build', // 指向React打包后的静态文件目录
    },
  },
];

启动Strapi后，访问服务器域名即可直接打开前端页面，API请求自动走同一域名下的/api路径。

方式2：用Nginx反向代理（推荐）

适合中大型项目，性能更优，支持HTTPS、域名路由等：

Nginx配置示例：

server {
  listen 80;
  server_name your-domain.com;

  # 托管前端静态文件
  location / {
    root /path/to/your/react/build;
    try_files $uri $uri/ /index.html; # 支持React路由的SPA模式
  }

  # 反向代理Strapi API
  location /api {
    proxy_pass http://localhost:1337;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # 反向代理Strapi管理后台
  location /admin {
    proxy_pass http://localhost:1337;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

这种方式下，前端请求API直接用/api/somequery即可，无需配置完整域名，避免跨域问题。

3. 同一Git仓库的自动部署流程

项目目录结构

your-project/
├── .gitignore
├── backend/          # Strapi项目
├── frontend/         # React项目
└── deploy.sh         # 部署脚本

自动部署配置

在服务器上创建Git裸仓库：

mkdir /var/repos/your-project.git && cd /var/repos/your-project.git
git init --bare

在裸仓库的hooks目录下创建post-receive钩子脚本：
```
cd hooks
touch post-receive && chmod +x post-receive
```

编辑post-receive脚本，实现自动拉取代码、构建前端、启动服务：

#!/bin/bash
TARGET_DIR=/var/www/your-project
GIT_DIR=/var/repos/your-project.git
BRANCH=main

git --work-tree=$TARGET_DIR --git-dir=$GIT_DIR checkout -f $BRANCH

# 安装后端依赖并启动Strapi（用PM2管理进程）
cd $TARGET_DIR/backend
npm install
pm2 restart strapi-prod || pm2 start npm --name strapi-prod -- run start:prod

# 构建前端
cd $TARGET_DIR/frontend
npm install
npm run build
# 将build文件夹复制到Nginx托管目录或Strapi的public目录
cp -r build /var/www/react-static # 对应Nginx配置的root路径

本地项目添加服务器Git远程地址：

git remote add production ssh://your-server-user@your-server-ip/var/repos/your-project.git

推送代码即可触发自动部署：
```
git push production main
```

通用注意事项

生产环境需用PM2或systemd管理Strapi进程，避免服务器重启后服务中断；
PostgreSQL需提前在服务器上安装并创建好对应的数据库和用户；
确保服务器开放对应端口（80/443用于Nginx，1337用于Strapi本地访问）；
环境文件需添加到.gitignore，避免敏感信息（如数据库密码）提交到Git仓库。

内容的提问来源于stack exchange，提问作者Confuze

Strapi+React前后端部署：分服务器还是同服务器？实操疑问

方案可行性结论 #

1. 环境变量配置（解决API地址与数据库适配） #

前端（React）API地址适配 #

后端（Strapi）数据库适配 #

2. 前端静态文件托管方案 #

方式1：用Strapi自带Express托管 #

方式2：用Nginx反向代理（推荐） #

3. 同一Git仓库的自动部署流程 #

项目目录结构 #

自动部署配置 #

通用注意事项 #