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

即使迟了，我也会提供我的答案，以后可能会对某人有所帮助。

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

build / myapp / ...所有静态文件都将放在此处。

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

“主页”：“ / myapp”-这将有助于将process.env.PUBLIC_URL设置为/ myapp

在BrowserRouter中添加基本名称

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

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

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

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

1 个答案: