Docker中Code-Server代理Vite React应用模块加载失败问题

我在Docker容器中通过Code-Server运行基于Vite的React项目，应用通过Code-Server代理到http://localhost:8080/proxy/5173/，但浏览器加载应用时遇到模块加载错误。

环境配置 #

Dockerfile #

FROM node:latest
ENV DEBIAN_FRONTEND=noninteractive
RUN apt update
RUN apt install -y curl
WORKDIR /workspace
RUN curl -fsSL https://code-server.dev/install.sh | sh
COPY ./init.sh .
CMD ["bash", "init.sh"]

init.sh 初始化脚本 #

#!/bin/bash

# Check if FRAMEWORK is set
if [ -z "$FRAMEWORK" ]; then
    echo "FRAMEWORK is not set"
    exit 1
fi

# Check if PROJECT is set
if [ -z "$PROJECT" ]; then
    echo "PROJECT is not set"
    exit 1
fi

# Create project based on FRAMEWORK
if [ "$FRAMEWORK" = "react" ]; then
    npm create vite@latest "$PROJECT" -- --template react --yes
elif [ "$FRAMEWORK" = "vue" ]; then
    npm create vite@latest "$PROJECT" -- --template vue --yes
else 
    echo "Unknown framework: $FRAMEWORK"
    exit 1
fi

# Install dependencies
cd "$PROJECT" && npm install

# Start Code-Server
code-server --host 0.0.0.0

容器运行命令 #

docker run -p 8080:8080 -e FRAMEWORK="react" -e PROJECT="my-app" -e PASSWORD="codepwd" vite-node-portos

问题演变 #

1. 初始Vite配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

运行后出现错误：connect ECONNREFUSED 0.0.0.0:5172

2. 修改绑定地址后的配置
   为解决连接拒绝错误，修改Vite配置绑定到0.0.0.0：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
  },
})

此时浏览器控制台出现模块加载错误：

Loading failed for the module with source "http://localhost:8080/proxy/5173/src/main.jsx".
Loading failed for the module with source "http://localhost:8080/proxy/5173/@react-refresh".
Loading failed for the module with source "http://localhost:8080/proxy/5173/@vite/client".

3. 添加base路径后的配置
   尝试添加base配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
  },
  base: '/proxy/5173/',
})

但仍出现相同的模块加载错误。

疑问 #

如何解决模块加载错误，让Vite应用通过Code-Server代理正常运行？有没有类似Project IDX或GitHub Codespaces的方法，无需修改Vite配置就能处理代理路径？

方法一：正确配置Vite适配Code-Server代理 #

Code-Server的代理会在请求路径前加上/proxy/{port}/，但Vite的开发服务器需要正确识别这个前缀，同时要处理WebSocket连接（HMR热更新依赖）。修改vite.config.js如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 5173,
    // 配置反向代理路径重写，适配Code-Server前缀
    proxy: {
      '/proxy/5173/': {
        target: 'http://localhost:5173/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy\/5173/, '')
      }
    },
    // 配置HMR的WebSocket路径，适配代理前缀
    hmr: {
      path: '/proxy/5173/hmr',
    }
  },
  // 设置base路径为代理前缀
  base: '/proxy/5173/'
})

修改后重启Vite开发服务器，模块加载和热更新即可正常工作。

方法二：无需修改Vite配置，利用Code-Server自动端口转发 #

Code-Server支持自动检测并转发端口，不需要手动拼接/proxy/{port}/路径：

1. 在Code-Server终端进入项目目录：cd my-app
2. 运行npm run dev启动Vite开发服务器
3. Code-Server会自动检测到5173端口，在界面右上角弹出端口转发提示，点击"Open in Browser"
4. 此时会打开Code-Server自动生成的转发地址（类似http://localhost:8080/xxxxxx），无需修改Vite配置即可正常访问应用

补充说明 #

Project IDX和GitHub Codespaces无需修改Vite配置，是因为它们的环境自动注入了适配代理的环境变量或自动配置反向代理规则。Code-Server的自动端口转发功能也能实现类似效果，只要触发它的自动检测机制，而非手动使用/proxy/{port}/路径即可。

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