使用 Nginx 部署 React 加载资源失败答案

【问题标题】：Deploy React with Nginx failed to load resources使用 Nginx 部署 React 加载资源失败
【发布时间】：2019-06-01 05:51:11
【问题描述】：

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

我的服务器配置块（/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 的反应应用程序。我尝试使用 curl 来查看它是否有效。 curl 命令按预期工作。

curl http://localhost:3001

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

加载资源失败：服务器响应状态为 404 (Not Found) 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）文件。有人知道如何解决这个问题吗？

【问题讨论】：

你的nginx服务器和上游服务器的请求url是什么
我们是否在前端使用 express 服务器？
您能否发布浏览器尝试获取的 css 文件的完整 URL？您可以尝试 curl 这些请求并查看响应。

标签： reactjs nginx

【解决方案1】：

请查看https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/

您必须根据为静态文件请求的 url 指定提供静态文件的方式。

希望对你有帮助！

【讨论】：

【解决方案2】：

尝试使用此配置来构建 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/

【讨论】：

【解决方案3】：

我认为这是 nginx 反向代理配置的优雅解决方案。

/etc/nginx/sites-available/app2.conf

server {
    listen 80;
    listen [::]:80;

    server_name example.com www.example.com;

    location / {
            proxy_pass http://localhost:3001;

            # recommended settings
            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;
    }
}

不要忘记符号链接：

sudo ln -s /etc/nginx/sites-available/app2.conf /etc/nginx/sites-enabled/

【讨论】：