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/

Answer 2

请选中此https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/

您必须指定静态文件的投放方式，具体取决于为静态文件请求的网址。

希望有帮助！

Answer 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/

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

3 个答案: