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

Question

我已经使用嵌入式 NGINX 部署（使用 Kubernetes/helm 图表）React 应用程序到 http://localhost:30111/。这个单页应用程序需要一些 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

虽然已经晚了，但我会提供我的答案，这可能会帮助以后的人。

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

build/myapp/...所有的静态文件都会放在这里。

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

"homepage": "/myapp" -- 这将有助于将 process.env.PUBLIC_URL 设置为 /myapp

1. 在 BrowserRouter 中添加 Basename

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

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

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

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