Next.js应用无法连接同Hostinger VPS上的Express后端求助

我用Express后端构建Next.js应用，将前后端部署在Hostinger的Ubuntu VPS上，采用Nginx配置。启动服务后前端可正常运行，但无法连接同服务器的后端（当前使用VPS IP访问）。把AWS EC2实例的后端IP填入前端NEXT_PUBLIC_API_BASE_URL变量时能正常连接，但希望前后端同服务器部署，避免分离部署。尝试用localhost和VPS IP加8000端口连接，均出现连接超时或拒绝连接的情况。

当前配置 #

Nginx sites-available/default.conf #

server {
     listen 80;
     server_name my_ip_address;
     location / {
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
     }
}

server/server.js #

import express from "express";
import bodyParser from "body-parser";
import cookieParser from "cookie-parser";
import cors from "cors";
import connectDB from "./config/db.js";
import path from "path";
// ROUTES
import userRoutes from "./routes/userRoutes.js";
import dotenv from "dotenv";

dotenv.config();

const port = process.env.PORT || 8000;

connectDB();

const app = express();
app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(cors());

// USE ROUTES
app.use("/api/users", userRoutes);

const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, "/client/public")));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "/client/public/index.html"));
});

app.listen(port, "0.0.0.0", () => {
  console.log(`Server running on port ${port}`);
});

1. 修改Nginx配置，添加API路由代理 #

当前Nginx仅代理了前端3000端口的请求，后端API请求未被转发。需要在server块中新增location /api规则，将API请求转发到后端的8000端口：

server {
     listen 80;
     server_name my_ip_address;
     # 前端请求代理
     location / {
          proxy_pass http://localhost:3000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;
     }
     # API请求代理到后端8000端口
     location /api {
          proxy_pass http://localhost:8000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
}

修改完成后重启Nginx：

sudo systemctl restart nginx

2. 调整前端.env变量 #

将NEXT_PUBLIC_API_BASE_URL设置为VPS的IP地址（无需加端口，因为Nginx监听80端口）：

NEXT_PUBLIC_API_BASE_URL=http://your_vps_ip

此时前端发起的/api/users请求会被Nginx自动转发到后端8000端口，无需直接访问8000端口。

3. 验证后端服务状态 #

确认后端服务正常运行在8000端口：

sudo lsof -i :8000
# 或使用netstat
sudo netstat -tulpn | grep :8000

如果服务未运行，可使用pm2等进程管理器启动并守护后端服务：

# 安装pm2
npm install -g pm2
# 启动后端服务并命名为backend
pm2 start server/server.js --name backend
# 设置开机自启
pm2 startup
pm2 save

4. 检查防火墙设置 #

确保VPS防火墙允许本地访问8000端口（不建议开放8000端口给外部，仅保留本地访问即可）：

# 允许本地IP访问8000端口
sudo ufw allow from 127.0.0.1 to any port 8000
# 重启防火墙生效
sudo ufw reload

如果之前开放过8000端口给外部，可关闭以提升安全性：

sudo ufw delete allow 8000

5. 优化CORS配置（可选） #

为提升安全性，可限定CORS仅允许前端的域名/IP访问，修改server.js中的cors配置：

app.use(cors({
  origin: "http://your_vps_ip", // 前端访问地址
  credentials: true // 需要传递cookie时开启
}));

内容的提问来源于stack exchange，提问作者Stephen Scott Moore