如何在 reactjs 中提供静态文件？

Question

我有几个与显示 sitemap.xml、robot.txt 和一些 pdf 文件相关的任务。客户端最新的reactjs + webpack。我通过服务器上的 reactjs 和 Nginx 尝试了两种方法。在服务器上我添加了这些行位置 ~ ^/(sitemap.xml) { root /var/www/html/public; }我尝试在主要位置配置之前和之后添加它，但它不起作用第二个选项。我试图在 reactjs 中添加到主路由器的路由，但它也不起作用，我只是得到空页面。

Answer 1

.htaccess在站点根目录创建一个文件。在你的情况下 /html/public

将其添加到您的.htaccess文件中，这应该会处理 React 内部路由。

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
        RewriteRule ^ index.html [QSA,L]

关于您的 robots.txt、sitemap.xml 和 pdf 文件。绝对路径应该可以正常工作，否则发布更多详细信息。

Answer 2

我对 react js 有同样的问题，你可以试试这个：

server{

    listen 80;

    root /home/user/website/build; # the root document of my react website

    index index.html index.htm index.nginx-debian.html;

    server_name website.com;

    try_files $uri /index.html;

    location /robots.txt {

            alias /home/user/website/build/robots.txt;

    }

}

您可以像我在 /robots.txt 中那样添加链接并将它们链接到静态文件。

Answer 3

最简单的方法是安装一个名为serve的包

npm i -g serve

然后使用命令为它们提供服务（替换build/为具有静态文件的目录）

serve -s build/