Reactjs 如何为反向代理nextjs服务器设置相对路径

我有两台服务器A和B，它们都托管在AWS上

A

有一条规则，规定

/v2/

或

/v2

发送到

B

。那很好。服务器

B

是一个使用nginx和express的NextJs应用程序

所有路由都以

/v2/

开始，因此

/v2/foo

显示一个页面。页面给出的响应为

200

，但不是资产。服务器

B

既有私有IP，也有公共IP，并且转到

B

的任一IP地址：

/v2/foo

，资产加载正常。从

A

转到那里：

/v2/foo

，资产没有加载，所以我假设存在相对路径问题

关于如何设置

setAssetPrefix

，我已找到：

//server.js
const express=require（'express'）
常量压缩=需要（“压缩”）；
const next=require（‘next’）
const bodyParser=require（'body-parser'）
const dev=process.env.NODE_env！='生产
const app=next（{dev}）
const handle=app.getRequestHandler（）
app.prepare（）
.然后（（）=>{
const server=express（）
//不知道这是干什么用的
app.setAssetPrefix（'/v2'）/？？
server.use（compression（））
use（bodyParser.json（））
use（bodyParser.urlencoded（{extended:true}））
get（'/v2/foo'，函数（req，res）{
app.render（req，res，'/v2/foo'，{}）
})
server.get（'*'，（req，res）=>{
返回句柄（req、res）
})
服务器。侦听（3000，（错误）=>{
如果（错误）抛出错误
console.log（`>Ready on${process.env.HOST}`）
})
})
.catch（（ex）=>{
控制台错误（例如堆栈）
进程。退出（1）
})

使用服务器

B

中的私有和公共ip地址可以很好地工作，但是当使用服务器

A

的url时，页面会点击，但没有样式。主页使用“js中的css”，工作正常，但不使用

import.././master.scss

next.config.js:

server {
        listen 80;
        listen [::]:80;

        root /var/www/v2/html/dist;
        #index index.html index.htm index.nginx-debian.html;

        server_name <public_IP> <private_IP> <server_A_domain>;

        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;
        }
}

const sass=require（“@zeit/next sass”）
const css=require（“@zeit/next css”）
constwithplugins=require（“下一个编写插件”）
常数nextConfig={
网页包（配置）{
config.module.rules.push({
测试：/\.svg$/,，
使用：['@svgr/webpack']，
});
返回配置；
}
}
//https://github.com/zeit/next-plugins/issues/266#issuecomment-474721942
module.exports=withPlugins([
[sass]，
[css，{cssModules:false，url:false}]
]，nextConfig）；

nginx:

server {
        listen 80;
        listen [::]:80;

        root /var/www/v2/html/dist;
        #index index.html index.htm index.nginx-debian.html;

        server_name <public_IP> <private_IP> <server_A_domain>;

        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;
        }
}

服务器{
听80；
听[：]：80；
root/var/www/v2/html/dist；
#index.html index.htm index.nginx-debian.html；
服务器名称；
地点/{
代理通行证http://localhost:3000;
proxy_http_版本1.1；
代理设置头升级$http\U升级；
代理集头连接“升级”；
代理设置头主机$Host；
代理缓存绕过$http\u升级；
}
}

通过添加

proxy\u pass\u request\u头，尝试传递所有头

到

位置

块

您可以创建自定义Express.js服务器：

server.js

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const env = process.env.NODE_ENV || 'development'
const dev = env !== 'production'
const app = next({
  dir: '.', // base directory where everything is, could move to src later
  dev,
})

const handle = app.getRequestHandler()

let server

app
  .prepare()
  .then(() => {
    server = express()

    // Set up the proxy.
    if (dev) {
      const { createProxyMiddleware } = require('http-proxy-middleware')
      server.use(
        '/api',
        createProxyMiddleware({
          target: 'https://api.staging.gocrypto.com/',
          changeOrigin: true,
          cookieDomainRewrite: 'localhost',
          logLevel: 'debug',
        })
      )
    }

    // Default catch-all handler to allow Next.js to handle all other routes
    server.all('*', (req, res) => handle(req, res))

    server.listen(port, err => {
      if (err) {
        throw err
      }
      console.log(`> Ready on port ${port} [${env}]`)
    })
  })
  .catch(err => {
    console.log('An error occurred, unable to start the server')
    console.log(err)
  })

不要忘记将cookie（如果您正在使用会话）重写为localhost，方法是：

cookieDomainRewrite: 'localhost'

然后将脚本添加到package.json：

"scripts": {
    "dev": "node devServer.js",
    "build": "next build",
    "start": "next start",
  },

---

谢谢不起作用。我需要能够更改资产路径/url/域，这应该可以做到。这为我解决了这个问题：