使用 react-app-rewired nginx 进行反应生产

【问题标题】：React production using react-app-rewired nginx使用 react-app-rewired nginx 进行反应生产
【发布时间】：2023-03-11 09:32:01
【问题描述】：

我尝试在 heroku 上部署我的应用程序，它可以正常工作。但是当我使用 react-app-rewired 脚本构建我的应用程序并使用 nginx 将其部署到我的服务器时。访问我的应用程序时，它仍然可以正常工作，但是如果我使用 contextPath:http://35.240.229.243/products 重新加载页面，它会引发 404 错误。您可以在http://35.240.229.243 访问我的应用程序进行测试。我正在使用带有历史记录的反应路由器。帮帮我谢谢

【问题讨论】：

你能显示你的 nginx 配置文件吗
我不使用任何配置文件。我只是将构建文件夹扔到 /usr/share/nginx/html
你必须使用 .htaccess 文件
@Asifvora 你能告诉我这个文件吗？非常感谢
请参考这里htaccess-guide.com

标签： reactjs nginx react-router react-router-v4 antd

【解决方案1】：

首先你需要找到默认的nginx conf文件并禁用它，默认它会在/etc/nginx/sites-enabled/default下

sudo rm -rf /etc/nginx/sites-enabled/default

并在/etc/nginx/sites-available/下创建新文件

sudo touch /etc/nginx/sites-enabled/default/redbox

并使用 vim 或 nano 将此文本放入新的 conf 文件 redbox，

server {
        listen 80;

        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
}

并启用它

sudo ln -s /etc/nginx/sites-available/redbox /etc/nginx/sites-enabled/redbox

接下来，确保Nginx文件中没有语法错误，

sudo nginx -t

如果没有发现问题，重启Nginx。

sudo systemctl restart nginx

【讨论】：

谢谢。我已经使它与location / { try_files $uri /index.html; } 一起正常工作