Add YARP support for static file serving and reverse proxy; update Docker and Docker Compose configurations

Author: davidfowl

AIChat.AppHost/AIChat.AppHost.csproj

@@ -18,6 +18,7 @@
     <PackageReference Include="Aspire.Hosting.PostgreSQL" Version="9.5.0" />
     <PackageReference Include="Aspire.Hosting.Redis" Version="9.5.0" />
     <PackageReference Include="Aspire.Hosting.NodeJs" Version="9.5.0" />
+    <PackageReference Include="Aspire.Hosting.Yarp" Version="9.5.0-preview.1.25474.7" />
     <PackageReference Include="CommunityToolkit.Aspire.Hosting.NodeJS.Extensions" Version="9.4.0" />
     <PackageReference Include="CommunityToolkit.Aspire.Hosting.Ollama" Version="9.4.0" />
   </ItemGroup>

AIChat.AppHost/Program.cs

@@ -47,13 +47,27 @@
                      .WithReference(cache)
                      .WaitFor(cache);
 
-builder.AddNpmApp("chatui", "../chatui")
-       .WithNpmPackageInstallation()
-       .WithHttpEndpoint(env: "PORT")
-       .WithReverseProxy(chatapi.GetEndpoint("http"))
+if (builder.ExecutionContext.IsRunMode)
+{
+    builder.AddNpmApp("chatui-fe", "../chatui")
+           .WithNpmPackageInstallation()
+           .WithHttpEndpoint(env: "PORT")
+           .WithEnvironment("BACKEND_URL", chatapi.GetEndpoint("http"))
+           .WithOtlpExporter()
+           .WithEnvironment("BROWSER", "none");
+}
+
+// We use YARP as the static file server and reverse proxy. This is used to test
+// the application in a containerized environment.
+builder.AddYarp("chatui")
+       .WithStaticFiles()
        .WithExternalHttpEndpoints()
-       .WithOtlpExporter()
-       .WithEnvironment("BROWSER", "none");
+       .WithDockerfile("../chatui")
+       .WithConfiguration(c =>
+       {
+           c.AddRoute("/api/{**catch-all}", chatapi.GetEndpoint("http"));
+       })
+       .WithExplicitStart();
 
 builder.Build().Run();
 

AIChat.AppHost/ProxyExtensions.cs

@@ -10,7 +10,7 @@ services:
       - "aspire"
     restart: "always"
   pg:
-    image: "docker.io/library/postgres:17.5"
+    image: "docker.io/library/postgres:17.6"
     environment:
       POSTGRES_HOST_AUTH_METHOD: "scram-sha-256"
       POSTGRES_INITDB_ARGS: "--auth-host=scram-sha-256 --auth-local=scram-sha-256"
@@ -26,7 +26,7 @@ services:
     networks:
       - "aspire"
   cache:
-    image: "docker.io/library/redis:7.4"
+    image: "docker.io/library/redis:8.2"
     command:
       - "-c"
       - "redis-server --requirepass $$REDIS_PASSWORD"
@@ -46,7 +46,7 @@ services:
       OTEL_DOTNET_EXPERIMENTAL_OTLP_RETRY: "in_memory"
       ASPNETCORE_FORWARDEDHEADERS_ENABLED: "true"
       HTTP_PORTS: "${CHATAPI_PORT}"
-      ConnectionStrings__llm: "AccessKey=${LLM_OPENAI_API_KEY};Model=gpt-4.1;Endpoint=https://api.openai.com/v1;Provider=OpenAI"
+      ConnectionStrings__llm: "Endpoint=https://api.openai.com/v1;Key=${OAI_OPENAI_APIKEY};Model=gpt-4.1;Provider=OpenAI"
       ConnectionStrings__conversations: "Host=pg;Port=5432;Username=postgres;Password=${PG_PASSWORD};Database=conversations"
       ConnectionStrings__cache: "cache:6379,password=${CACHE_PASSWORD}"
       OTEL_EXPORTER_OTLP_ENDPOINT: "http://env-dashboard:18889"
@@ -63,17 +63,22 @@ services:
       - "aspire"
   chatui:
     image: "${CHATUI_IMAGE}"
+    command:
+      - "/app/yarp.dll"
+    entrypoint:
+      - "dotnet"
     environment:
-      NODE_ENV: "production"
-      PORT: "80"
-      BACKEND_URL: "chatapi:${CHATAPI_PORT}"
-      SPAN: "chatui"
-      BROWSER: "none"
+      ASPNETCORE_ENVIRONMENT: "Production"
+      YARP_ENABLE_STATIC_FILES: "true"
+      REVERSEPROXY__ROUTES__route0__MATCH__PATH: "/api/{**catch-all}"
+      REVERSEPROXY__ROUTES__route0__CLUSTERID: "cluster_chatapi"
+      REVERSEPROXY__CLUSTERS__cluster_chatapi__DESTINATIONS__destination1__ADDRESS: "http://_http.chatapi"
+      services__chatapi__http__0: "http://chatapi:${CHATAPI_PORT}"
       OTEL_EXPORTER_OTLP_ENDPOINT: "http://env-dashboard:18889"
       OTEL_EXPORTER_OTLP_PROTOCOL: "grpc"
       OTEL_SERVICE_NAME: "chatui"
     ports:
-      - "80"
+      - "5000"
     networks:
       - "aspire"
 networks:

AIChat.AppHost/docker-infra/docker-compose.yaml

@@ -1,22 +1,11 @@
-# Build Stage: Build the React app
+# Stage 1: Build React app
 FROM node:22 AS builder
 WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm install
 COPY . .
+RUN npm install
 RUN npm run build
 
-# Production Stage: Serve the app with Caddy
-FROM caddy:2.9-alpine
-WORKDIR /usr/share/caddy
-
-# Copy built static files including index.html, etc.
-COPY --from=builder /app/build/ .
-
-# Copy the Caddyfile with reverse proxy config
-COPY Caddyfile /etc/caddy/Caddyfile
-
-EXPOSE 80
-
-# Run Caddy
-CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile", "--adapter", "caddyfile"]
+# Stage 2: Copy static files to YARP container
+FROM mcr.microsoft.com/dotnet/nightly/yarp:2.3.0-preview.4 AS yarp
+WORKDIR /app
+COPY --from=builder /app/build ./wwwroot