reactjs - Nginx 404 静态文件( react 应用程序)

Question

我尝试在 nginx 上设置 React 应用程序，但在从子目录提供静态文件时遇到问题

我的文件树是这样的:

/var/www/
  antoinedeveyrac.io/
    ...
  react/
    ...
    build/
      index.html
      static/
        js
          *.js
        css
          *.css

我的配置文件是:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    include snippets/ssl-antoinedeveyrac.io.conf;
    include snippets/ssl-params.conf;

    root /var/www/antoinedeveyrac.io/html;
    index index.html index.htm index.nginx-debian.html;

    server_name antoinedeveyrac.io www.antoinedeveyrac.io;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

    location ~ /.well-known {
        allow all;
    }

    location /react {
        alias /var/www/react/build;
        try_files $uri $uri/ =404;
        autoindex off;
        index index.html;
    }
}

所以当我点击 https://antoinedeveyrac.io/react 时，我有那些 404 错误，这意味着 nginx 不明白我想从 https://antoinedeveyrac.io/react/static/... 而不是 https 提供文件://antoinedeveyrac.io/static/...

如何修复我的配置文件以匹配子目录中的静态文件？非常感谢:)

Answer 1

您是否在/var/www/react/build/index.html 中引用的 Assets 或 index.html 页面本身上获得 404？我会在评论中提出这个问题，但代表还不够高。

根据您发布的目录输出，您的 nginx 根配置指向一个似乎不存在的 html 目录。

root /var/www/antoinedeveyrac.io/html;

尝试将根配置更改为...

root /var/www/antoinedeveyrac.io/

在您的 index.html 中，您应该像这样引用 Assets (如果您还没有这样做的话)

<link href="scripts/somefile.css" rel="stylesheet">