nginx - 如何在 NGINX 中为 React 应用程序设置不同的上下文路径

Question

我已将 React 应用程序部署(使用 Kubernetes/helm 图表)到 http://localhost:30111/使用嵌入式 NGINX。这个单页应用程序需要一些 NGINX 重写规则来深度链接静态源。有以下 NGINX 规则:

 server {
  server_name _;

  gzip on;
  gzip_static  on;

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

一切正常，应用程序正在监听 http://localhost:30111/正如预期的那样。

我需要做什么:我需要为此应用程序使用新的上下文路径，例如 http://localhost:30111/myapp而不是根上下文路径 http://localhost:30111/ .

我应该如何在 NGINX 中编写 proxy_pass/rewrite 规则以处理新的上下文路径？

Answer 1

即使很晚，我也会提供我的答案，这可能会在以后对某人有所帮助。

作为第一步，将构建文件夹中的所有文件移动到与上下文路径同名的子目录。

build/myapp/...All static files will be placed here.

在 package.json 文件中添加您的上下文路径

"homepage": "/myapp" -- this will help set process.env.PUBLIC_URL to /myapp

在 BrowserRouter 中添加 Basename

          <BrowserRouter basename={process.env.PUBLIC_URL}>
              <Suspense fallback={<Loader />}>
              // ... app routes...
              </Suspense>
            </BrowserRouter>

更改 nginx 配置以使用子目录中的文件

     location / {
      return 301 /myapp;
    }
    location ~ ^/myapp {     
      
      try_files $uri /myapp/index.html;

你完成了。部署您的应用程序并查看 Ui 直接重定向到您的上下文路径并提供文件。