Next.js与Express同端口部署方案咨询（解决HTTP下Cookie存储问题）

以下是三种可行的同端口部署方案，解决HTTP环境下Cookie无法存储的问题：

方案1：将Next.js作为Express中间件统一托管 #

把前端和后端服务合并到一个Express进程中，由Express统一处理所有请求，天然实现同端口访问。

实现步骤： #

1. 调整项目依赖与结构
   • 在Express根目录安装Next.js相关依赖：npm install next react react-dom
   • 将Next.js项目的pages、public等核心目录迁移到Express项目根目录下
2. 配置Express服务逻辑
   在Express入口文件（如server.js）中添加Next.js托管代码：

   const express = require('express');
   const next = require('next');
   
   const dev = process.env.NODE_ENV !== 'production';
   const nextApp = next({ dev });
   const nextHandler = nextApp.getRequestHandler();
   
   // 导入你的后端API路由模块
   const apiRoutes = require('./routes/api');
   
   nextApp.prepare().then(() => {
     const app = express();
   
     // 优先处理/api前缀的后端请求
     app.use('/api', apiRoutes);
   
     // 所有非API请求交给Next.js处理
     app.all('*', (req, res) => nextHandler(req, res));
   
     const PORT = process.env.PORT || 3000;
     app.listen(PORT, () => {
       console.log(`Server running on port ${PORT}`);
     });
   });
   

3. 打包部署到Azure
   • 在package.json中配置启动命令："start": "node server.js"
   • 本地测试通过后，将整个项目打包上传到Azure App Service，设置启动命令为npm run start

方案2：用Next.js内置路由转发代理请求 #

借助Next.js的rewrites配置或API路由，将前端的API请求转发到后端服务，实现前端与代理服务同端口。

实现步骤： #

1. 配置Next.js转发规则
   在Next.js项目的next.config.js中添加rewrites配置：

   const nextConfig = {
     async rewrites() {
       return [
         {
           source: '/api/:path*',
           destination: 'http://localhost:8080/api/:path*' // 指向Express后端服务地址
         }
       ];
     }
   };
   
   module.exports = nextConfig;
   

2. 在Azure中启动双服务
   • 使用PM2管理多进程，创建ecosystem.config.json配置文件：

     {
       "apps": [
         {
           "name": "express-api",
           "script": "./server.js",
           "env": {
             "NODE_ENV": "production",
             "PORT": 8080
           }
         },
         {
           "name": "next-frontend",
           "script": "./node_modules/next/dist/bin/next",
           "args": "start -p 3000",
           "env": {
             "NODE_ENV": "production"
           }
         }
       ]
     }
     

   • 设置Azure App Service的启动命令为pm2 start ecosystem.config.json

方案3：Azure App Service配置反向代理（无需修改代码） #

直接在Azure平台层配置反向代理，将特定路径的请求转发到后端服务，保持前端与代理端口一致。

实现步骤： #

1. Linux环境（Nginx配置）
   • 在项目根目录创建nginx.conf文件：

     server {
       listen 80;
       server_name your-domain.com;
     
       # 转发前端请求到Next.js服务
       location / {
         proxy_pass http://localhost:3000;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
       }
     
       # 转发API请求到Express服务
       location /api {
         proxy_pass http://localhost:8080;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
       }
     }
     

   • 将文件上传到Azure App Service，平台会自动加载Nginx配置
2. Windows环境（IIS配置）
   • 在项目根目录创建web.config文件，配置URL重写规则，将/api路径转发到http://localhost:8080/api
3. 启动双服务
   • 用PM2同时启动Next.js和Express进程，确保二者在同一个Azure实例上运行

额外注意事项 #

• 确保Cookie的domain属性设置为你的绑定域名（或留空使用当前域），secure属性设为false（当前HTTP环境下）
• 部署后测试时，检查请求的Host头是否正确，避免跨域问题

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