静态文件上的 Nginx 404（反应应用程序）答案

【问题标题】：Nginx 404 on static files (react application)静态文件上的 Nginx 404（反应应用程序）
【发布时间】：2017-02-24 00:56:08
【问题描述】：

我尝试在 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/... 提供文件

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

【问题讨论】：

标签： reactjs ubuntu nginx

【解决方案1】：

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

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

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

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

root /var/www/antoinedeveyrac.io/

在你的 index.html 中，你应该像这样引用资产（如果你还没有这样做的话）

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

【讨论】：