Docker部署Vite React应用：Nginx无法加载App.tsx内容问题

我用Vite构建React+TypeScript应用，尝试通过Docker镜像部署，已配置nginx.conf、default.conf和Dockerfile，但Nginx无法正确加载App.tsx内容，浏览器显示空白。以下是相关配置文件、运行日志、容器内文件结构及index.html内容：

相关配置文件 #

nginx.conf #

events {
    # Event-driven configuration
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # Include server configurations
    include /etc/nginx/conf.d/*.conf;

    # Further http configurations
}

default.conf #

server {
    # Listen on port 80 for incoming connections
    listen 80;

    # Define the root directory where your files are located
    # This should be the path to your built React application
    root /usr/share/nginx/html;

    # Specify the file to serve as index
    index index.html;

    # Handle Single Page Application (SPA) routing:
    # Attempt to serve any requested file or route, fall back to index.html if not found
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Custom error pages (optional)
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

Dockerfile相关片段 #

FROM nginx:alpine

# Step 6: Copy build artifacts from the 'build' stage to the Nginx directory
COPY --from=build /app/build /usr/share/nginx/html/build
COPY nginx.conf /etc/nginx/nginx.conf
COPY default.conf /etc/nginx/conf.d/default.conf

# Step 7: Expose port 80 for Nginx
EXPOSE 80

# Step 8: Start Nginx
CMD ["nginx", "-g", "daemon off;"]

运行日志 #

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: info: /etc/nginx/conf.d/default.conf differs from the packaged version
/docker-entrypoint.sh: Sourcing /docker-entrypoint.d/15-local-resolvers.envsh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
172.17.0.1 - - [06/Jan/2024:13:47:46 +0000] "GET /index.html HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
172.17.0.1 - - [06/Jan/2024:13:47:47 +0000] "GET /index.html HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
172.17.0.1 - - [06/Jan/2024:13:47:47 +0000] "GET /index.html HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
172.17.0.1 - - [06/Jan/2024:13:47:48 +0000] "GET /index.html HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
172.17.0.1 - - [06/Jan/2024:13:48:19 +0000] "GET /index.html HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"

容器内文件结构 #

/ # ls -ltr /etc/nginx/
total 36
-rw-r--r--    1 root     root           664 Oct 24 16:48 uwsgi_params
-rw-r--r--    1 root     root           636 Oct 24 16:48 scgi_params
-rw-r--r--    1 root     root          5349 Oct 24 16:48 mime.types
-rw-r--r--    1 root     root          1007 Oct 24 16:48 fastcgi_params
-rw-r--r--    1 root     root          1077 Oct 24 16:48 fastcgi.conf
lrwxrwxrwx    1 root     root            22 Dec 20 20:13 modules -> /usr/lib/nginx/modules
-rwxr-xr-x    1 root     root           262 Jan  6 13:46 nginx.conf
drwxr-xr-x    1 root     root          4096 Jan  6 13:47 conf.d
/ # ls -ltr /etc/nginx/conf.d/
total 4
-rwxr-xr-x    1 root     root           655 Jan  6 13:53 default.conf
/ # ls -ltr /usr/share/nginx/html/build/*index*
-rwxr-xr-x    1 root     root           398 Jan  6 13:37 /usr/share/nginx/html/build/index.html
/ #

index.html内容 #

<!DOCTYPE html>^M
<html lang="en">^M
  <head>^M
    <meta name="monetag" content="5a02f84c329734f784dc0af09b7ae775">^M
    <meta charset="UTF-8" />^M
    <link rel="icon" type="image/png" href="../favicon192.png" />^M
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />^M
    <title>Vite + React + TS 2</title>^M
  </head>^M
  <body>^M
    <div id="root"></div>^M
  </body>^M
</html>^M

解决方案 #

1. 修正Nginx根目录与构建文件路径不匹配 #

从容器文件结构可见，构建产物被复制到/usr/share/nginx/html/build，但Nginx的root配置指向/usr/share/nginx/html，导致访问/index.html时加载的是Nginx默认空白页面，而非你的应用页面。

两种修复方式二选一：

• 修改Dockerfile，将构建产物直接复制到Nginx根目录：

  COPY --from=build /app/build /usr/share/nginx/html
  

• 或修改default.conf的root配置：

  root /usr/share/nginx/html/build;
  

2. 修复index.html的格式与资源引用问题 #

当前index.html存在两个关键问题：

• 包含^M（Windows换行符），会导致Nginx解析异常，需将文件转为Unix换行格式。
• 缺少Vite构建生成的JS/CSS资源引用，这是页面空白的核心原因——正常Vite构建后的index.html会自动添加<script>和<link>标签加载应用资源。

检查并修复构建流程：

• 确保本地执行了正确的构建命令：npm run build或yarn build。
• 查看本地build（或dist，取决于Vite配置）目录下的index.html，确认包含类似以下的资源引用：

  <script type="module" src="/assets/index.xxxx.js"></script>
  <link rel="stylesheet" href="/assets/index.xxxx.css" />
  

• 补充Dockerfile的完整构建阶段（你提供的片段缺少该部分）：

  # 构建阶段
  FROM node:alpine AS build
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN npm run build
  
  # Nginx阶段
  FROM nginx:alpine
  COPY --from=build /app/build /usr/share/nginx/html
  COPY nginx.conf /etc/nginx/nginx.conf
  COPY default.conf /etc/nginx/conf.d/default.conf
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

3. 验证配置与资源加载 #

修改后重新构建镜像并运行容器：

• 启动容器时映射端口：docker run -p 8080:80 your-image-name
• 访问http://localhost:8080，打开浏览器开发者工具的网络标签，检查JS/CSS资源是否以200状态码加载成功。
• 若仍有404错误，查看Nginx日志：docker logs <container-id>，定位资源请求路径问题。

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