<p>I've got a setup with multiple services and are run via an Ingress / Terraform / Kubernetes setup. Currently, all my Vue.JS applications are served via NGINX however when I added the following line <code>&quot;nginx.ingress.kubernetes.io/rewrite-target&quot;: &quot;/$1&quot;</code> to make sure my other routes work such as /frontend and /backend it broke my API and I can no longer access it via <code>/api/</code></p>
<p>Terraform setup:</p>
<pre><code>resource &quot;kubernetes_ingress&quot; &quot;ingress&quot; {
metadata {
name      = &quot;ingress&quot;
namespace = var.namespace_name
annotations = {
  &quot;nginx.ingress.kubernetes.io/force-ssl-redirect&quot; = true
  &quot;nginx.ingress.kubernetes.io/from-to-www-redirect&quot; = true
  &quot;nginx.ingress.kubernetes.io/ssl-redirect&quot;: true
  &quot;nginx.ingress.kubernetes.io/add-base-url&quot;: false
  &quot;nginx.ingress.kubernetes.io/rewrite-target&quot;: &quot;/$1&quot;
  &quot;kubernetes.io/ingress.class&quot;: &quot;nginx&quot;
  &quot;ncp/use-regex&quot;: true
}
}

spec {
tls {
  hosts = [var.domain_name, &quot;*.${var.domain_name}&quot;]
  secret_name = &quot;tls-secret&quot;
}
rule {
  host = var.domain_name
  http {
    path {
      path = &quot;/(.*)&quot;
      backend {
        service_name = &quot;frontend&quot;
        service_port = 80
      }
    }

    path {
      path = &quot;/api(.*)&quot;
      backend {
        service_name = &quot;api&quot;
        service_port = 80
      }
    }

    path {
      path = &quot;/backend(.*)&quot;
      backend {
        service_name = &quot;backend&quot;
        service_port = 80
      }
    }

    path {
      path = &quot;/payment(.*)&quot;
      backend {
        service_name = &quot;payment&quot;
        service_port = 80
      }
    }

  }
 }
}

wait_for_load_balancer = true
}
</code></pre>
<p>My <code>Startup.cs</code> config</p>
<pre><code>    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        // Enable middleware to serve generated Swagger as a JSON endpoint.
        app.UseSwagger();

        // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.),
        // specifying the Swagger JSON endpoint.
        app.UseSwaggerUI(c =&gt;
        {
            c.SwaggerEndpoint(&quot;/swagger/v1/swagger.json&quot;, &quot;OLC API V1&quot;);
        });

        app.UseCors(AllowSpecificOrigins);

        app.UseRouting();


        app.UseEndpoints(endpoints =&gt;
        {
            endpoints.MapControllers();
        });
    }
</code></pre>
<p>The terraform setup seems to work for all my vue.js containers. Only problem is that API is no longer accessible. Not even via /api/api such as in this <a href="https://stackoverflow.com/questions/51820476/rewrite-only-specific-route-with-nginx-ingress">question</a></p>
<p>I've tried to rewrite only specific routes and change the app so that'd serve on a different route but I still get a <code>404</code> error. Even when creating a controller that responds to the <code>/</code> route. When removing the rewrite target line the API does work. But the Vue.JS containers do not</p>

RDAxRoadkill
<p>It turns out that, this is simply a regex issue and me not setting paths correctly. I changed the following.</p>
<pre><code> path {
  path = &quot;/api(.*)&quot;
  backend {
    service_name = &quot;api&quot;
    service_port = 80
  }
}
</code></pre>
<p>Into</p>
<pre><code>     path {
      path = &quot;/(api.*)&quot;
      backend {
        service_name = &quot;olc-api&quot;
        service_port = 80
      }
    }
</code></pre>
<p>With this it matches the /api to my .NET core app, instead of it trying to find a URL within the vue.js container(s)</p>
