如何从NodeJS服务器B加载托管服务器A上的React SPA静态文件？

以下是几种可行的实现方案，可根据你的部署环境选择：

方案1：NodeJS 反向代理静态请求 #

在NodeJS服务中配置反向代理，将静态资源请求转发到服务器A。以Express框架为例，使用http-proxy-middleware实现：

1. 安装依赖：

npm install http-proxy-middleware

2. 在Express应用中添加代理配置：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理静态资源请求到服务器A
app.use('/', createProxyMiddleware({
  target: 'http://服务器A的IP或域名', // 例如 http://192.168.1.100
  changeOrigin: true,
  // 过滤需要代理的静态文件类型，避免代理API请求
  pathFilter: ['/*.html', '/*.js', '/*.css', '/*.png', '/*.jpg', '/static/**']
}));

// 保留NodeJS自身的API路由
app.use('/api', require('./routes/api'));

app.listen(3000);

注意：服务器A需确保能接收服务器B的请求，无需配置CORS（因为是服务器端转发），可根据需求添加缓存策略减少重复请求。

方案2：Nginx 反向代理（推荐高并发场景） #

如果NodeJS服务使用Nginx作为前置服务器，直接在Nginx配置中转发静态资源请求到服务器A，性能比NodeJS代理更优：

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

  # 匹配静态文件后缀，转发到服务器A
  location ~* \.(html|js|css|png|jpg|gif|svg)$ {
    proxy_pass http://服务器A的IP或域名;
    proxy_set_header Host $host;
    proxy_cache_valid 200 1d; # 配置缓存，提升性能
  }

  # API请求转发到本地NodeJS服务
  location /api {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

方案3：内网挂载静态资源目录（适合同内网服务器） #

若两台服务器处于同一内网，可通过NFS/SMB将服务器A的静态资源目录挂载到服务器B，NodeJS直接读取本地挂载路径：

服务器A配置NFS共享： #

# Ubuntu系统安装NFS服务
sudo apt install nfs-kernel-server
# 添加共享目录配置，替换为React构建产物路径
echo "/path/to/react/build *(rw,sync,no_subtree_check)" | sudo tee -a /etc/exports
# 重启NFS服务
sudo systemctl restart nfs-kernel-server

服务器B挂载目录： #

sudo apt install nfs-common
# 创建挂载目录
sudo mkdir /mnt/react-static
# 挂载服务器A的共享目录
sudo mount 服务器A的IP:/path/to/react/build /mnt/react-static

NodeJS配置静态目录： #

app.use(express.static('/mnt/react-static'));

注意：需确保内网连通性，可配置开机自动挂载避免服务器重启后挂载失效。

方案4：CDN中转（适合公网部署） #

将React构建产物上传到CDN，服务器B的NodeJS或Nginx直接指向CDN地址提供静态资源，同时服务器A可作为CDN的源站。这种方式能大幅提升用户访问速度，减轻服务器压力：

示例Nginx配置：

location ~* \.(html|js|css|png)$ {
  proxy_pass https://your-cdn-domain.com;
}

或者在NodeJS中代理到CDN，逻辑同方案1，仅需将target替换为CDN地址。

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