Docker部署code-server代理访问Nuxt.js项目静态资源404问题求解

问题诱因 #

该问题是Nuxt开发模式的默认路径配置和code-server反向代理的路径规则不匹配导致的，和Nginx配置无直接关联：

1. Nuxt universal模式默认将静态资源、热重载相关资源的访问路径基于根路径/生成，不会自动识别code-server反向代理添加的/proxy/3000/前缀。你之前仅修改router配置未生效，是因为*router.base仅控制页面路由的路径前缀，不控制静态资源、webpack构建产物、热重载websocket的路径生成规则*。
2. code-server的proxy机制会将请求路径中的/proxy/3000/前缀剥离后转发给后端的Nuxt开发服务，因此Nuxt服务本身无法感知该前缀的存在，生成的前端资源路径自然不会携带该前缀，导致浏览器直接从根路径请求资源出现404。

修复方案 #

优先选择修改Nuxt配置的方案，无需调整反向代理层，适配性更强：

方案1：修改nuxt.config.js配置（推荐） #

在你的项目nuxt.config.js中添加/修改以下三个配置项，重启yarn dev即可生效：

export default {
  // 保留你的原有配置不变，新增/修改以下内容
  // 控制页面路由前缀
  router: {
    base: '/proxy/3000/'
  },
  build: {
    // 控制webpack构建产物（_nuxt目录下的js、css等资源）的访问路径前缀
    publicPath: '/proxy/3000/_nuxt/'
  },
  devServer: {
    // 控制热重载websocket的连接地址
    public: 'https://mysub.mydomain.com/proxy/3000',
    // 关闭host校验，避免反向代理场景下的host不匹配报错
    disableHostCheck: true
  }
}

如果需要经常切换开发端口，可以将端口改为环境变量动态获取，避免每次修改配置：

const PORT = process.env.PORT || 3000
export default {
  router: {
    base: `/proxy/${PORT}/`
  },
  build: {
    publicPath: `/proxy/${PORT}/_nuxt/`
  },
  devServer: {
    public: `https://mysub.mydomain.com/proxy/${PORT}`,
    disableHostCheck: true
  }
}

启动时指定端口即可：PORT=3001 yarn dev

方案2：修改Nginx配置（不推荐，仅适配固定端口场景） #

如果你不想修改Nuxt配置，可以在Nginx的code-server对应server块中添加重写规则，自动补全路径前缀：

server {
  listen 443 ssl;
  server_name mysub.mydomain.com;
  # 你的原有ssl、反向代理配置保留
  # 新增以下重写规则
  location ~ ^/_nuxt/(.*)$ {
    if ($http_referer ~* ^https://mysub\.mydomain\.com/proxy/3000/) {
      rewrite ^/_nuxt/(.*)$ /proxy/3000/_nuxt/$1 last;
    }
  }
  location ~ ^/__webpack_hmr(.*)$ {
    if ($http_referer ~* ^https://mysub\.mydomain\.com/proxy/3000/) {
      rewrite ^/__webpack_hmr(.*)$ /proxy/3000/__webpack_hmr$1 last;
    }
  }
}

该方案仅适配固定3000端口的开发场景，切换端口需要同步修改Nginx规则。

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