如何使用Nginx部署Next.js前端+Laravel8后端的前后端分离项目

• 前后端当前配置存在端口冲突 + 跨域根源：前端代码里硬编码了API地址为http://localhost:8000，用户浏览器访问前端页面时，会从用户本地发起对8000端口的请求，你的后端服务只部署在服务器本地的8000端口，用户本地没有对应服务，自然请求失败触发跨域报错
• Nginx配置冲突：两个配置都监听80端口，前端配置设为了default_server，直接访问域名会匹配到后端配置，访问IP才会匹配前端配置，逻辑混乱

不用拆分两个域名，统一用同一个域名，通过路径前缀区分前后端请求，从根源避免跨域问题，步骤如下：

1. 修正Next.js的API请求配置 #

所有前端代码里的API请求地址去掉域名端口，改为相对路径，比如原来的http://localhost:8000/api/index改为/api/index，开发环境可以在Next.js里配置dev代理转发到本地8000端口。
重新执行npm run build后用pm2重启前端服务。

2. 合并调整Nginx配置 #

删掉原来的两个conf文件，新建/etc/nginx/conf.d/domain.conf，内容如下：

# 前端上游
upstream frontend_upstream {
    server localhost:3000 keepalive=64;
}

server {
    listen 80 default_server;
    server_name domain.com www.domain.com;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;

    # 所有/api前缀的请求走Laravel后端
    location /api {
        root /var/www/domain/backend/public;
        try_files $uri $uri/ /index.php?$query_string;

        add_header X-Frame-Options "SAMEORIGIN";
        add_header X-XSS-Protection "1; mode=block";
        add_header X-Content-Type-Options "nosniff";

        location ~ \.php$ {
            fastcgi_pass unix:/run/php/php8.0-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
            include fastcgi_params;
            fastcgi_read_timeout 300;
        }
    }

    # 前端静态资源缓存
    location /_next/static {
        proxy_cache STATIC;
        proxy_pass http://frontend_upstream;
    }

    location /static {
        proxy_cache STATIC;
        proxy_ignore_headers Cache-Control;
        proxy_cache_valid 60m;
        proxy_pass http://frontend_upstream;
    }

    # 其他请求走Next.js前端
    location / {
        proxy_pass http://frontend_upstream;
    }

    location ~ /\.ht {
        deny all;
    }
}

注意：你原来的backend配置里index index.php index.html行末尾缺少分号，会导致Nginx启动报错，新配置里已经修复。

配置修改完成后执行nginx -t检查配置语法，没问题就执行systemctl reload nginx重载配置。

3. Laravel配置调整（可选，同域名场景可省略） #

如果后续需要开放跨域请求，可以安装Laravel官方的fruitcake/laravel-cors扩展包，在config/cors.php里配置允许的源、请求方式等，不需要手动在Nginx里加CORS头。

4. PM2配置优化 #

执行pm2 startup设置pm2开机自启，Next.js启动建议使用pm2配置文件，在frontend目录下新建ecosystem.config.js：

module.exports = {
  apps : [{
    name: "next-frontend",
    script: "npm",
    args: "start",
    cwd: "/var/www/domain/frontend",
    instances: "max",
    exec_mode: "cluster",
    env: {
      NODE_ENV: "production",
    }
  }]
}

之后就可以用pm2 start ecosystem.config.js启动，pm2 save保存当前启动列表，服务器重启后pm2会自动拉起前端服务。

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