基于Docker的React应用JavaScript失效问题排查求助

问题现象 #

• 网站可正常访问，但React默认图标无法旋转
• 浏览器控制台持续提示“您需要启用JavaScript才能运行此应用”，但浏览器JS功能未禁用
• 核心差异：使用了非特权Nginx镜像

环境信息 #

容器内静态文件目录列表 #

执行 ls -la /usr/share/nginx/html 输出：

drwxr-xr-x 1 root root 4096 Jul 26 18:29 .
drwxr-xr-x 1 root root 4096 Jul 24 00:08 ..
-rw-r--r-- 1 root root  605 Jul 26 18:29 asset-manifest.json
-rw-r--r-- 1 root root 3870 Jul 26 18:29 favicon.ico
-rw-r--r-- 1 root root  644 Jul 26 18:29 index.html
-rw-r--r-- 1 root root 5347 Jul 26 18:29 logo192.png
-rw-r--r-- 1 root root 9664 Jul 26 18:29 logo512.png
-rw-r--r-- 1 root root  492 Jul 26 18:29 manifest.json
-rw-r--r-- 1 root root   67 Jul 26 18:29 robots.txt
drwxr-xr-x 5 root root 4096 Jul 26 18:29 static

Nginx配置文件（nginx.conf） #

pid /tmp/nginx.pid;

events {}

http {
    include /etc/nginx/mime.types;
    server {
        listen 8080 ssl;
        ssl_certificate /etc/nginx/tls/tls.crt;
        ssl_certificate_key /etc/nginx/tls/tls.key;

        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
            try_files $uri /index.html =404;
        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
          root   /usr/share/nginx/html;
        }
    }
}

Dockerfile内容 #

# syntax=docker/dockerfile:1.4

# 1. For build React app
FROM node:20.2.0-bullseye-slim AS development

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json to container
COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json

# Same as npm install
RUN npm ci && npm cache clean --force

COPY . /app

ENV CI=true
ENV PORT=3000

CMD [ "npm", "start" ]


FROM development AS build

RUN npm run build


FROM development as dev-envs

ENV PATH /app/node_modules/.bin:$PATH
ENV NODE_ENV=development

RUN apt-get update && apt-get install -y --no-install-recommends git

RUN useradd -s /bin/bash -m vscode && \
groupadd docker && \
usermod -aG docker vscode

# Install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /

RUN npm install && npm cache clean --force
RUN npm install -g nodemon

CMD [ "nodemon", "--inspect=0.0.0.0:9229"]


## Nginx unprivileged debian image
FROM nginxinc/nginx-unprivileged:1.25

## Switch to root user for setup
USER root

## Update apk and add curl
RUN apt-get update; \
    apt-get install -y curl; \
    apt-get install -y npm;

# Copy config nginx
COPY --from=build /app/.nginx/nginx.conf /etc/nginx/nginx.conf

# Copy mime.types from nginx image
COPY --from=nginx:alpine /etc/nginx/mime.types /etc/nginx/mime.types

WORKDIR /usr/share/nginx/html

# Remove default nginx static assets
RUN rm -rf ./*

# Copy static assets from builder stage
COPY --from=build /app/build .

# Copy the /app dir from builder stage in order to be able to do the unit tests
COPY --from=build /app /test-app

## Expose port 8080
EXPOSE 8080

## Switch to non-root user
USER nginx

## Healthchecks
# TODO Later, when you move from the self-signed certificates delete "-k" flag
HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
    CMD curl -k -f https://localhost:8080 || exit 1

排查与解决步骤 #

1. 修复文件权限 #

非特权Nginx以nginx用户运行，但当前静态文件所有者是root，会导致JS资源无法读取，触发noscript提示。在Dockerfile中复制静态文件后添加权限修复：

# Copy static assets from builder stage
COPY --from=build /app/build .

# 修复非root用户权限
RUN chown -R nginx:nginx /usr/share/nginx/html

# Copy the /app dir from builder stage in order to be able to do the unit tests
COPY --from=build /app /test-app

2. 验证JS资源加载 #

检查浏览器网络面板，确认static/js/下的bundle文件返回200状态码。若加载失败，需确认：

• Nginx是否正确映射静态文件路径
• MIME类型配置是否生效（确保application/javascript对应JS文件）

3. 确认构建产物完整性 #

进入build阶段容器，检查/app/build/static/js目录是否存在完整的JS bundle文件：

docker run --rm <build-stage-image> ls -la /app/build/static/js

4. 图标旋转问题修复 #

图标不旋转是JS未正常执行导致的副作用，当JS资源加载并运行后，React默认动画会自动生效。

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