web-dev-qa-db-fra.com

Le middleware ASP.NET Core Api-Gateway

Je suis nouveau dans les passerelles API et j'ai une question de compréhension… .. J'essaie aussi de placer une série de (micro) services derrière un terminal.

À cette fin, j'ai configuré une application ASP.NET Core et ajouté le paquet ThreeMammals Ocelot . À l’aide de la documentation, j'ai configuré les processus en amont et en aval . Jusqu'ici, tout va bien. .

 sketch

Le client envoie une requête à http: // mygateway: 4242/s1/ {api} et, par exemple, obtient une réponse JSON ou XML de Service1, comme prévu.

Même comportement pour http: // mygateway: 4242/s2/ / {api} avec également le résultat attendu!

Mon problème de compréhension concerne Service3 . Lorsque j'envoie une demande à http: // mygateway/s3/ , j'obtiens le fichier index.html comme réponse.

Le fichier index.html lui-même nécessite le fichier CSS 'xyz.css' via link-tag et oblige le client à charger le fichier.

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

L’URL de la demande que le client envoie à "mygateway" dans ce cas est http: // mygateway: 4242/xyz.css et pas http: // mygateway: 4242/s3 /xyz.css et donc la réponse est un 404 non trouvé, car le "mygateway" ne sait rien d’un "xyz.css"

Comment puis-je résoudre ce problème de routage (?)? 

Est-il possible de résoudre ce problème avec le middleware ocelot? Ou ai-je besoin d'autre chose pour le service (Service3) avec le SinglePageApplication (SPA)?

Peut-être est-il tout simplement impossible ou mauvais de placer le SPA derrière la passerelle? J'espère que vous pourrez me donner quelques conseils pour avoir accès à un site Web de SPA ou de MVC derrière une passerelle.

Merci iBot


UPATE: Inclut le code de index.html. Je pense que c'est simple.

<!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>
6
mMilk

Votre conception d'architecture est fausse!

Premièrement, découvrons ce qu’est la passerelle API.

Une passerelle API est une programmation placée devant une interface de programmation ( API ) et servant de point d’entrée unique pour un groupe défini de microservices. 

L’utilisation des passerelles API présente l’avantage majeur de permettre aux développeurs d’encapsuler la structure interne d’une application de plusieurs manières, en fonction du cas d’utilisation. En effet, outre les demandes directes, les passerelles peuvent être utilisées pour appeler plusieurs services principaux et agréger les résultats.

Ok, le nom "API Gateway" nous montre qu'il est principalement destiné aux services API! Les applications SPA ou MVC ne sont pas des services back-end. Vous ne devez pas placer vos applications frontales derrière la passerelle api.

En général, votre architecture devrait ressembler à ceci:  enter image description here

Une passerelle d'API est le point d'entrée unique pour tous les clients. SPA est le client de vos services et doit l’appeler via API Gateway. Si votre application possède plusieurs applications client, il peut s'agir d'un pivot principal lors de l'identification des différents types de passerelles d'API, de sorte que vous puissiez avoir une façade différente pour les besoins de chaque application client. Il s’agit d’un modèle nommé «Backend for Frontend» (BFF) où chaque passerelle d’API peut fournir une API différente, adaptée à chaque type d’application client.

Et si vous ne voulez pas construire une architecture adéquate?

  1. Vous pouvez configurer la redirection. C'est un peu comme spécifier un service par défaut de passerelle API. Ensuite, tous les clients qui vont à http://mygateway:4242/ seront redirigés vers http://mygateway:4242/s3/
  2. Ocelot permet l'injection de middleware. Ainsi, vous pouvez injecter votre middleware personnalisé où vous pourrez vérifier quelle requête et où la rediriger.
  3. Utilisez CDN pour stocker tous les contenus css et autres.
  4. Inline css en fichiers HTML.
2
Roman Marusyk

Vous pouvez essayer d'écrire <base href="/s3/" /> au lieu de <base href="/" />.

Mais il est préférable d’utiliser le SPA ou le MVC avant la passerelle. Dans la plupart des cas, cela dépend de la façon dont vous allez l'utiliser. Par exemple, si vous souhaitez l'utiliser comme proxy de votre domaine (par exemple Nginx), cela a du sens. 

Voir ce bon article à ce sujet .