☰

通过目录使用 nginx 提供 ReactJS 应用

tag-icon • tag-icon nginx
通过目录使用 nginx 提供 ReactJS 应用

我有一个 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;
  }
}

当以这种方式使用它时，我收到一个未捕获的语法错误：意外的令牌<，它试图从根目录而不是目录提供样式表和可能的.js。

该应用程序使用 webpack 构建，在子目录中运行良好。谢谢大家！

答案1

我也遇到了同样的问题。最后，我使用官方文档和以下答案解决了这个问题：

假设：

  • 您的 React App 基于create-react-app包（您正在使用react-router-dom）。
  • 您正在使用 Nginx，并且根路径正在被另一项服务（或者甚至是另一个 React/Gatsby 应用程序，这是我的情况）使用。
  • 您想要在子目录中部署 React App，并能够从该子目录提供 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;
}

答案2

对于自定义路径：

在配置 nginx 服务器之前，你需要在应用程序的包文件.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 | Andro Babu 博客

相关内容