使用 React 的 Vite 应用程序无法通过代码服务器代理加载：“模块加载失败”错误

问题描述 投票：0回答：1

我正在尝试在带有 Code-Server 的 Docker 容器内使用 Vite 运行 React 项目。该应用程序通过 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

Vite配置

最初，我使用的是这个vite.config.js：

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

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

为了解决错误

connect ECONNREFUSED 0.0.0.0:5172
，我修改了配置以显式绑定到
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”.

然后我更新了 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,
  },
  base: '/proxy/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”.

错误图片

如何解决模块加载错误并通过Code-Server代理正确服务我的Vite应用程序？

在 Project IDX 或 GitHub Codespaces 等工具中，Vite 项目无需编辑 vite.config.js 文件即可处理代理路径。有没有类似的方法可以解决Code-Server的代理问题，这样我就不需要直接修改Vite配置了？

docker proxy vite code-server
1个回答
0
投票

当我使用 Code-Server 在 Docker 容器中运行 React 应用程序时，我用 Vite 修复了这个问题，并通过在容器内设置反向代理并使用 

npm run dev -- --host 0.0.0.0
解决了这些问题。这是我解决问题的方法。

Dockerfile

FROM node:18

# Install necessary packages
RUN apt-get update && apt-get install -y \
    curl \
    git \
    nginx \
    nano \
    supervisor \
    && rm -rf /var/lib/apt/lists/*

# Install openvscode-server
ENV VSCODE_VERSION=1.84.2
ENV ARCH=x64
RUN curl -L "https://github.com/gitpod-io/openvscode-server/releases/download/openvscode-server-v${VSCODE_VERSION}/openvscode-server-v${VSCODE_VERSION}-linux-${ARCH}.tar.gz" | tar -xz -C /opt/
RUN ln -s /opt/openvscode-server-v${VSCODE_VERSION}-linux-${ARCH} /opt/openvscode-server

# Set working directory
WORKDIR /workspace

# Copy configuration files
COPY ./supervisord.conf /etc/supervisor/conf.d/supervisord.conf
COPY ./init.sh .
COPY ./generate-nginx-conf.sh /generate-nginx-conf.sh
RUN chmod +x /generate-nginx-conf.sh
RUN chmod +x init.sh

# Expose only the main port
EXPOSE 80

CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

init.sh

该脚本初始化React项目并启动Vite开发服务器。

#!/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

cd $PROJECT
npm install
npm run dev -- --host 0.0.0.0

生成-nginx-conf.sh

此脚本为 Vite 应用程序和代码服务器动态生成 

nginx
配置。

#!/bin/bash

# Set default values if not provided
VSCODE_DOMAIN=${VSCODE_DOMAIN:-"reactapp.localhost"}
APP_DOMAIN=${APP_DOMAIN:-"reactapp-port-5173.localhost"}
APP_PROXY_PASS=${APP_PROXY_PASS:-"http://localhost:5173"}

# Generate nginx configuration
cat > /etc/nginx/nginx.conf << EOL
user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    
    map \$http_upgrade \$connection_upgrade {
        default upgrade;
        '' close;
    }
    
    server {
        listen 80;
        server_name ${VSCODE_DOMAIN};
        access_log /var/log/nginx/vscode.access.log;
        
        location / {
            proxy_pass http://127.0.0.1:3001;
            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_set_header Upgrade \$http_upgrade;
            proxy_set_header Connection \$connection_upgrade;
            proxy_buffering off;
            proxy_http_version 1.1;
            proxy_connect_timeout 300s;
            proxy_send_timeout 300s;
            proxy_read_timeout 300s;
        }
    }
    
    server {
        listen 80;
        server_name ${APP_DOMAIN};
        
        location / {
            proxy_pass ${APP_PROXY_PASS};
            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;
            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;
        }
    }
}
EOL

# Test nginx configuration
nginx -t

supervisord.conf

此supervisord配置确保Nginx和Code-Server在容器内运行。

[supervisord]
nodaemon=true

[program:nginx]
command=/usr/sbin/nginx -g 'daemon off;'
autostart=true
autorestart=true

[program:code-server]
command=/opt/openvscode-server/bin/openvscode-server --host 0.0.0.0
autostart=true
autorestart=true

运行容器

运行容器：

docker build -t react-app-container .
docker run -p 80:80 \
    -e FRAMEWORK="react" \
    -e PROJECT="my-app" \
    -e VSCODE_DOMAIN="reactapp.localhost" \
    -e APP_DOMAIN="reactapp-port-5173.localhost" \
    react-app-container
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.