使用 Nginx 部署 React 无法加载资源

Question

我正在尝试使用 nginx 反向代理部署一个 React 应用程序。

我的服务器配置块（/etc/nginx/sites-available/app2.conf）如下：

server {
  listen 80;
  listen[::]:80;
  root/srv/app2/build;
  index index.html index.html;
  server_name _;

  location / {
    proxy_pass http://localhost:3001/;
    try_files $uri $uri/ =404;
  }
}

我正在使用 docker 来运行暴露了端口 3001 的 react 应用程序。我尝试使用 curl 来查看它是否有效。curl 命令按预期工作。

curl http://localhost:3001

但是，当我尝试在 Web 浏览器中运行时，出现以下错误：

加载资源失败：服务器响应状态为 404（未找到）main.8ea061ea.chunk.css

加载资源失败：服务器响应状态为 404（未找到）main.dcd07bc1.chunk.js

加载资源失败：服务器响应状态为 404（未找到）1.a6f3a221.chunk.js

加载资源失败：服务器响应状态为 404（未找到）main.dcd07bc1.chunk.js

加载资源失败：服务器响应状态为 404（未找到）main.8ea061ea.chunk.css

似乎无法加载所有静态文件（.css 和 .js）文件。有谁知道如何解决这个问题？

Answer 1

尝试使用此配置来构建 docker

# build environment
FROM node:9.6.1 as builder
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@1.1.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

使用这个脚本从来没有遇到任何问题。你可能会错过一些 nginx 配置或者忘记递归复制，谁知道你是否没有发布 Dockerfile

*注意：我没有将其
归功于：https://mherman.org/blog/dockerizing-a-react-app/