Docker部署React应用访问报ERR_EMPTY_RESPONSE错误求助

出现ERR_EMPTY_RESPONSE是两个核心配置错误叠加导致，附带一个Dockerfile语法错误：

• 核心原因1：React官方脚手架create-react-app的yarn start开发服务默认仅监听容器内部环回地址127.0.0.1，不对外暴露端口，宿主机的映射请求无法触达服务。
• 核心原因2：Dockerfile中ENV指令语法错误，等号两侧加了空格，导致配置的所有环境变量都没有被正确注入。
• 附加问题：Dockerfile复制文件顺序不合理，浪费构建缓存，同时复制yarn和npm的锁文件会导致依赖安装逻辑冲突。

1. 替换Dockerfile配置 #

FROM node:16

# ENV赋值等号两侧不要加空格
ENV REACT_APP_baseUrl=https://localhost:44377/api
ENV REACT_APP_baseUrlFile=https://localhost:3000/files
ENV REACT_APP_baseUrlFileMetadata=https://localhost:3000/files/metaData
ENV REACT_APP_FILESTORAGE_KEY=./fileStorage.key
ENV REACT_APP_FILESTORAGE_PEM=./fileStorage.pem
ENV REACT_APP_ROOT_CA=./rootCA.pem
ENV REACT_APP_baseUrlReact=http://localhost:8080
# 强制React开发服务监听所有网卡地址，允许外部访问
ENV HOST=0.0.0.0

WORKDIR /app-ui

# 优先复制依赖声明文件，复用Docker构建缓存，依赖未变更时不重复安装
COPY package.json yarn.lock ./
# 若使用npm作为包管理器，替换为复制package-lock.json，不要同时复制两个锁文件
# COPY package.json package-lock.json ./

RUN yarn install
# npm用户替换为 RUN npm install

# 依赖安装完成后再复制业务代码，修改业务代码无需重新安装依赖
COPY . .

EXPOSE 8080
CMD ["yarn", "start"]
# npm用户替换为 CMD ["npm", "start"]

2. 重新构建并启动容器 #

执行以下命令清理旧资源后重新部署：

# 删除之前创建的异常容器
docker rm -f client
# 重新构建镜像
docker build -f Dockerfile -t client .
# 启动容器
docker run -it -p 8080:8080 client

容器启动后日志出现Compiled successfully提示时，直接访问http://localhost:8080即可正常加载页面。

当前配置启动的是React开发服务，仅适合本地调试使用，性能、稳定性、安全性都达不到生产要求。生产环境建议执行yarn build打包生成静态资源，使用Nginx等Web服务器托管资源。

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