通过目录使用 nginx 为 ReactJS 应用程序提供服务

Question

我有一个 ReactJS 应用程序，如果使用以下代码从子目录的根目录提供，它可以正常工作：

server {

   listen  80;

   server_name sub.domain.net;

   root /var/www/vhosts/sub.domain.net/httpdocs;

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

但是，我想从主服务器提供此服务domain.net，并在之前的所有尝试中都出错。这是我所拥有的，它绝对不起作用，相同的 ReactJS 文件位于根目录外：

server {
  listen  80;
  server_name domain.net;

  root /var/www/vhosts/domain.net/httpdocs;

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

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

当以这种方式使用它时，我得到一个 Uncaught SyntaxError: Unexpected token < 并且它试图从根而不是目录提供样式表和 .js 。

该应用程序是使用 webpack 构建的，并且可以在子目录之外完美运行。谢谢大家！

Answer 1

我正在努力解决同样的问题。最后，我能够使用官方文档和答案组合解决它：

假设：

• 您的 React 应用程序基于create-react-app包（您正在使用react-router-dom）。
• 您正在使用 Nginx 并且根路径正被另一个服务（甚至是另一个 React/Gatsby 应用程序，这是我的情况）使用。
• 您希望在子目录中部署 React App，并能够从该子目录提供 React App 的所有静态数据。

反应应用程序更改：

基于官方文档。

1. 更新您BrowserRouter的加入basename。例子：<BrowserRouter history={history} basename="/webapp">。
2. 指定homepage你的package.json。例子："homepage": "/webapp"。
3. 如果您通过相对路径引用静态文件，则应将子目录添加到该引用中。例子：src="/static/logo/logo.png"变成src="/webapp/static/logo/logo.png".

Nginx 变化：

location ^~ /webapp {
   alias /var/www/myapp/build;
   try_files $uri $uri/ /webapp/index.html;
}

Answer 2

对于自定义路径：

在配置 nginx 服务器之前，您需要在应用程序的package.json中指定目标路径为"homepage": "/reactapp"

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

对于根路径：

如果您想托管在域的根目录中，请确保您没有为 key 提供任何内容"homepage": ""，最好将其从 package.json 中删除并按如下所示配置 nginx

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

注意： 您可以使用任一路径，但不能同时配置两个不同的路径。您的应用程序将适用于您在 package.json 中配置的内容

来源： Apache Nginx 重写配置 - React.js | 安德罗·巴布博客