15

I am new to API gateways and have a question of understanding. I try too put a series of (micro)services behind an endpoint.

For this purpose, I have set up an ASP.NET Core Application and added the package ThreeMammals Ocelot. With the help of documentation I have configured the Up- and Downstreams. So far, so good.

sketch

The client makes a request to http://mygateway:4242/s1/{api} and, for example, get a JSON or XML response from Service1, as expected.

Same behavior for http://mygateway:4242/s2/{api} with also the expected result!

My understanding problem is with Service3. When I send a request to http://mygateway/s3/, I get the index.html as response.

The index.html itself requires the CSS-File 'xyz.css' via link-tag and forces the client to load the file.

<head>
  <link rel="stylesheet" type="text/css" href="xyz.css">
</head>

The request URL the client send to "mygateway" in this case is http://mygateway:4242/xyz.css and not http://mygateway:4242/s3/xyz.css and so the respone is a 404 not found, since the "mygateway" knows nothing about a "xyz.css"

How can I fix this routing(?) issue?

Is it possible to solve this problem with ocelot middleware? Or do I need something else for the service (Service3) with the SinglePageApplication (SPA)?

Maybe is it simply not possible or wrong to place the SPA behind the gateway? I hope you can give me some tips to get access to a SPA or MVC website behind a gateway.

Thanks iBot


UPATE: Enclosed the code of index.html. I think that's straight forward.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <base href="/" />

    <link rel="stylesheet" type="text/css" href="dist/xyz.css">

</head>
<body>
    <div id="appContainer"></div>
    <script src="dist/xyz.js" asp-append-version="true"></script>
</body>
</html>
mMilk
  • 225
  • 1
  • 2
  • 7

2 Answers2

13

Your architecture design is wrong!

First, let's find out what this the API Gateway.

An API Gateway is programming that sits in front of an application programming interface (API) and acts as a single point of entry for a defined group of microservices.

A major benefit of using API gateways is that they allow developers to encapsulate the internal structure of an application in multiple ways, depending upon use case. This is because, in addition to accommodating direct requests, gateways can be used to invoke multiple back-end services and aggregate the results.

Ok, the name "API Gateway" shows us that it is mostly intended for API services! SPA or MVC applications are not back-end services. You should not put your front-end applications behind the api gateway.

In general, your architecture should look like this: enter image description here

An API gateway is the single entry point for all clients. SPA is client of your services and should call it through API Gateway. If your application has multiple client apps, that can be a primary pivot when identifying the multiple API Gateways types, so that you can have a different facade for the needs of each client app. This case is a pattern named “Backend for Frontend” (BFF) where each API Gateway can provide a different API tailored for each client app type.

What if you don't want to build a proper architecture?

  1. You can configure redirect. It is something like to specify a default service of API gateway. Then all clients that go to http://mygateway:4242/ will redirected to http://mygateway:4242/s3/
  2. Ocelot allows Middleware Injection. So, you can inject your custom middleware where you will check which request and where to redirect it.
  3. Use CDN to store all css and other content.
  4. Inline css into html files.
Roman Marusyk
  • 19,402
  • 24
  • 55
  • 90
  • 1
    Thanks Roman Marusyk, i will reconsider my architecture design idea :) And also will have a look at your suggested options. regards iBot – mMilk Nov 28 '18 at 09:37
  • 1
    Thank you very much Roman Marusyk, could you introduce the best API-Gateway for .Net, please? I know how to make a gateway with `Ocelot` but is it the best one for .Net? – Mohammad Shadman Feb 27 '21 at 06:28
  • 1
    @MohammadShadman For .net you can use any of the existing gateways. It works well with Kong, Traefik, Kubernetes Ingress, Azure API Management. I used Ocelot in projects where I need to add some custom logic (since it is written in C # - it is very easy to extend). Otherwise, I would recommend to use Kubernetes Ingress (if you have a k8s cluster) or Azure API Management (if you hosted in Azure). And Kong and Traefik for other cases – Roman Marusyk Feb 27 '21 at 13:01
0

You can try to write<base href="/s3/" /> instead of <base href="/" />.

But it is better to use the SPA or MVC before gateway. In most cases, it depends on how you will use it. For instance, If you like to use it like Proxy of your domain (e.g Nginx) it makes sense.

See this good article about it.

Uwe Keim
  • 36,867
  • 50
  • 163
  • 268
  • Hello Ярослав Виталиевичm, thanks for the hint with the basepath. That works for services that I control and i can change. But 3rd party services i can't change won't work with this approach. For example, we have bought a component for reporting that expose a Website running on a Tomcatserver. When i put these behinde the api-gateway i ran into my problem :/ – mMilk Nov 26 '18 at 14:19