Serve product images from WebApp, so CatalogApi doesn't have to be pu…

…blicly reachable (#74) * Serve product images from WebApp, so CatalogApi doesn't have to be publicly reachable * Use Yarp to reverse-proxy the images * Retrieve HybridApp images from mobile BFF (proxied to catalog API) (#96) --------- Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com>
dotnet · Nov 27, 2023 · 1e764ba · 1e764ba
1 parent 37cd432
commit 1e764ba
Show file tree

Hide file tree

Showing 17 changed files with 80 additions and 47 deletions.
diff --git a/src/Catalog.API/Apis/CatalogApi.cs b/src/Catalog.API/Apis/CatalogApi.cs
@@ -117,8 +117,9 @@ public static async Task<Results<NotFound, PhysicalFileHttpResult>> GetItemPictu
 
         string imageFileExtension = Path.GetExtension(item.PictureFileName);
         string mimetype = GetImageMimeTypeFromImageFileExtension(imageFileExtension);
+        DateTime lastModified = File.GetLastWriteTimeUtc(path);
 
-        return TypedResults.PhysicalFile(path, mimetype);
+        return TypedResults.PhysicalFile(path, mimetype, lastModified: lastModified);
     }
 
     public static async Task<Results<BadRequest<string>, RedirectToRouteHttpResult, Ok<PaginatedItems<CatalogItem>>>> GetItemsBySemanticRelevance(
@@ -319,6 +320,7 @@ private static List<CatalogItem> ChangeUriPlaceholder(CatalogOptions options, Li
         ".wmf" => "image/wmf",
         ".jp2" => "image/jp2",
         ".svg" => "image/svg+xml",
+        ".webp" => "image/webp",
         _ => "application/octet-stream",
     };
 

diff --git a/src/HybridApp/Components/Pages/Item/ItemPage.razor b/src/HybridApp/Components/Pages/Item/ItemPage.razor
@@ -3,6 +3,7 @@
 @inject CatalogService CatalogService
 @* @inject BasketState BasketState *@
 @inject NavigationManager Nav
+@inject IProductImageUrlProvider ProductImages
 
 @if (item is not null)
 {
@@ -11,7 +12,7 @@
     <SectionContent SectionName="page-header-subtitle">@item.CatalogBrand?.Brand</SectionContent>
 
     <div class="item-details">
-        <img src="@item.PictureUri" />
+        <img src="@ProductImages.GetProductImageUrl(item.Id)" />
         <div class="description">
             <p>@item.Description</p>
             <p>

diff --git a/src/HybridApp/MauiProgram.cs b/src/HybridApp/MauiProgram.cs
@@ -1,12 +1,14 @@
-using eShop.WebAppComponents.Services;
+using eShop.HybridApp.Services;
+using eShop.WebAppComponents.Services;
 using Microsoft.Extensions.Logging;
 
 namespace eShop.HybridApp;
 
 public static class MauiProgram
 {
-    // NOTE: Must have a trailing slash to ensure the full BaseAddress URL is used to resolve relative URLs
-    private static string MobileBffBaseUrl = "http://localhost:61632/catalog-api/";
+    // NOTE: Must have a trailing slash on base URLs to ensure the full BaseAddress URL is used to resolve relative URLs
+    private static string MobileBffHost = "http://localhost:61632";
+    internal static string MobileBffCatalogBaseUrl = $"{MobileBffHost}/catalog-api/";
 
     public static MauiApp CreateMauiApp()
     {
@@ -25,7 +27,8 @@ public static MauiApp CreateMauiApp()
 		builder.Logging.AddDebug();
 #endif
 
-        builder.Services.AddHttpClient<CatalogService>(o => o.BaseAddress = new(MobileBffBaseUrl));
+        builder.Services.AddHttpClient<CatalogService>(o => o.BaseAddress = new(MobileBffCatalogBaseUrl));
+        builder.Services.AddSingleton<IProductImageUrlProvider, ProductImageUrlProvider>();
 
         return builder.Build();
     }

diff --git a/src/HybridApp/Services/ProductImageUrlProvider.cs b/src/HybridApp/Services/ProductImageUrlProvider.cs
@@ -0,0 +1,9 @@
+using eShop.WebAppComponents.Services;
+
+namespace eShop.HybridApp.Services;
+
+public class ProductImageUrlProvider : IProductImageUrlProvider
+{
+    public string GetProductImageUrl(int productId)
+        => $"{MauiProgram.MobileBffCatalogBaseUrl}api/v1/catalog/items/{productId}/pic";
+}
diff --git a/src/Mobile.Bff.Shopping/Extensions/Extensions.cs b/src/Mobile.Bff.Shopping/Extensions/Extensions.cs
@@ -2,10 +2,7 @@
 {
     public static void AddApplicationServices(this IHostApplicationBuilder builder)
     {
-        builder.Services
-            .AddReverseProxy()
-            .LoadFromConfig(builder.Configuration.GetRequiredSection("ReverseProxy"))
-            .AddServiceDiscoveryDestinationResolver();
+        builder.Services.AddHttpForwarderWithServiceDiscovery();
 
         builder.Services.AddHealthChecks()
             .AddUrlGroup(new Uri("http://catalog-api/health"), name: "catalogapi-check")

diff --git a/src/Mobile.Bff.Shopping/Program.cs b/src/Mobile.Bff.Shopping/Program.cs
@@ -8,6 +8,31 @@
 app.UseHttpsRedirection();
 
 app.MapDefaultEndpoints();
-app.MapReverseProxy();
+
+const string CatalogApiPrefix = "/api/v1/catalog/";
+var forwardedCatalogApis = new[]
+{
+    CatalogApiPrefix + "items",
+    CatalogApiPrefix + "items/by",
+    CatalogApiPrefix + "items/{id}",
+    CatalogApiPrefix + "items/by/{name}",
+
+    CatalogApiPrefix + "items/withsemanticrelevance/{text}",
+
+    CatalogApiPrefix + "items/type/{typeId}/brand/{brandId?}",
+    CatalogApiPrefix + "items/type/all/brand/{brandId?}",
+    CatalogApiPrefix + "catalogTypes",
+    CatalogApiPrefix + "catalogBrands",
+
+    CatalogApiPrefix + "items/{id}/pic",
+};
+
+foreach (var forwardedUrl in forwardedCatalogApis)
+{
+    var mapFromPattern = "/catalog-api" + forwardedUrl;
+    var mapToTargetPath = forwardedUrl;
+
+    app.MapForwarder(mapFromPattern, "http://catalog-api", mapToTargetPath);
+}
 
 await app.RunAsync();
diff --git a/src/Mobile.Bff.Shopping/appsettings.json b/src/Mobile.Bff.Shopping/appsettings.json
@@ -5,36 +5,5 @@
       "Microsoft.AspNetCore": "Warning",
       "System.Net.Http": "Warning"
     }
-  },
-  "ReverseProxy": {
-    "Routes": {
-      "c-short": {
-        "ClusterId": "catalog",
-        "Match": {
-          "Path": "c/{**catch-all}"
-        },
-        "Transforms": [
-          { "PathRemovePrefix": "/c" }
-        ]
-      },
-      "c-long": {
-        "ClusterId": "catalog",
-        "Match": {
-          "Path": "catalog-api/{**catch-all}"
-        },
-        "Transforms": [
-          { "PathRemovePrefix": "/catalog-api" }
-        ]
-      }
-    },
-    "Clusters": {
-      "catalog": {
-        "Destinations": {
-          "destination0": {
-            "Address": "http://catalog-api"
-          }
-        }
-      }
-    }
   }
 }
diff --git a/src/WebApp/Components/Pages/Cart/CartPage.razor b/src/WebApp/Components/Pages/Cart/CartPage.razor
@@ -1,6 +1,7 @@
 @page "/cart"
 @inject NavigationManager Nav
 @inject BasketState Basket
+@inject IProductImageUrlProvider ProductImages
 @attribute [StreamRendering]
 @attribute [Authorize]
 
@@ -31,7 +32,7 @@
                 var quantity = CurrentOrPendingQuantity(item.ProductId, item.Quantity);
                 <div class="cart-item" @key="@item.Id">
                     <div class="catalog-item-info">
-                        <img alt="@item.ProductName" src="@item.PictureUrl" />
+                        <img alt="@item.ProductName" src="@ProductImages.GetProductImageUrl(item.ProductId)" />
                         <div class="catalog-item-content">
                             <p class="name">@item.ProductName</p>
                             <p class="price">$@item.UnitPrice.ToString("0.00")</p>

diff --git a/src/WebApp/Components/Pages/Item/ItemPage.razor b/src/WebApp/Components/Pages/Item/ItemPage.razor
@@ -3,6 +3,7 @@
 @inject CatalogService CatalogService
 @inject BasketState BasketState
 @inject NavigationManager Nav
+@inject IProductImageUrlProvider ProductImages
 
 @if (item is not null)
 {
@@ -11,7 +12,7 @@
     <SectionContent SectionName="page-header-subtitle">@item.CatalogBrand?.Brand</SectionContent>
 
     <div class="item-details">
-        <img alt="@item.Name" src="@item.PictureUri" />
+        <img alt="@item.Name" src="@ProductImages.GetProductImageUrl(item)" />
         <div class="description">
             <p>@item.Description</p>
             <p>

diff --git a/src/WebApp/Extensions/Extensions.cs b/src/WebApp/Extensions/Extensions.cs
@@ -14,11 +14,14 @@ public static void AddApplicationServices(this IHostApplicationBuilder builder)
         builder.AddRabbitMqEventBus("EventBus")
                .AddEventBusSubscriptions();
 
+        builder.Services.AddHttpForwarderWithServiceDiscovery();
+
         // Application services
         builder.Services.AddScoped<BasketState>();
         builder.Services.AddScoped<LogOutService>();
         builder.Services.AddSingleton<BasketService>();
         builder.Services.AddSingleton<OrderStatusNotificationService>();
+        builder.Services.AddSingleton<IProductImageUrlProvider, ProductImageUrlProvider>();
 
         // HTTP and GRPC client registrations
         builder.Services.AddGrpcClient<Basket.BasketClient>(o => o.Address = new("http://basket-api"))

diff --git a/src/WebApp/Program.cs b/src/WebApp/Program.cs
@@ -26,4 +26,6 @@
 
 app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
 
+app.MapForwarder("/product-images/{id}", "http://catalog-api", "/api/v1/catalog/items/{id}/pic");
+
 app.Run();
diff --git a/src/WebApp/Services/BasketItem.cs b/src/WebApp/Services/BasketItem.cs
@@ -8,5 +8,4 @@ public class BasketItem
     public decimal UnitPrice { get; set; }
     public decimal OldUnitPrice { get; set; }
     public int Quantity { get; set; }
-    public required string PictureUrl { get; set; }
 }
diff --git a/src/WebApp/Services/BasketState.cs b/src/WebApp/Services/BasketState.cs
@@ -137,7 +137,6 @@ async Task<IReadOnlyCollection<BasketItem>> FetchCoreAsync()
                 {
                     Id = Guid.NewGuid().ToString(), // TODO: this value is meaningless, use ProductId instead.
                     ProductId = catalogItem.Id,
-                    PictureUrl = catalogItem.PictureUri,
                     ProductName = catalogItem.Name,
                     UnitPrice = catalogItem.Price,
                     Quantity = item.Quantity,

diff --git a/src/WebApp/Services/ProductImageUrlProvider.cs b/src/WebApp/Services/ProductImageUrlProvider.cs
@@ -0,0 +1,9 @@
+using eShop.WebAppComponents.Services;
+
+namespace eShop.WebApp.Services;
+
+public class ProductImageUrlProvider : IProductImageUrlProvider
+{
+    public string GetProductImageUrl(int productId)
+        => $"product-images/{productId}";
+}
diff --git a/src/WebApp/WebApp.csproj b/src/WebApp/WebApp.csproj
@@ -18,6 +18,7 @@
 
   <ItemGroup>
     <PackageReference Include="Azure.AI.OpenAI" />
+    <PackageReference Include="Microsoft.Extensions.ServiceDiscovery.Yarp" />
     <PackageReference Include="Microsoft.SemanticKernel" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" />
     <PackageReference Include="Grpc.AspNetCore.Server.ClientFactory" />

diff --git a/src/WebAppComponents/Catalog/CatalogListItem.razor b/src/WebAppComponents/Catalog/CatalogListItem.razor
@@ -1,9 +1,10 @@
 @using eShop.WebAppComponents.Item
+@inject IProductImageUrlProvider ProductImages
 
 <div class="catalog-item">
     <a class="catalog-product" href="@ItemHelper.Url(Item)" data-enhance-nav="false">
         <span class='catalog-product-image'>
-            <img alt="@Item.Name" src='@Item.PictureUri' />
+            <img alt="@Item.Name" src='@ProductImages.GetProductImageUrl(Item)' />
         </span>
         <span class='catalog-product-content'>
             <span class='name'>@Item.Name</span>

diff --git a/src/WebAppComponents/Services/IProductImageUrlProvider.cs b/src/WebAppComponents/Services/IProductImageUrlProvider.cs
@@ -0,0 +1,11 @@
+using eShop.WebAppComponents.Catalog;
+
+namespace eShop.WebAppComponents.Services;
+
+public interface IProductImageUrlProvider
+{
+    string GetProductImageUrl(CatalogItem item)
+        => GetProductImageUrl(item.Id);
+
+    string GetProductImageUrl(int productId);
+}