[frontend] [ops golf?] Pass collector URL to frontend via reverse proxy.

.env

@@ -14,6 +14,7 @@ OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative
 # Frontend
 FRONTEND_PORT=8080
 FRONTEND_ADDR=frontend:${FRONTEND_PORT}
+ENVOY_PORT=80
 
 # Redis
 REDIS_PORT=6379

docker-compose.yml

@@ -233,7 +233,7 @@ services:
           memory: 200M
     restart: always
     ports:
-      - "${FRONTEND_PORT}:${FRONTEND_PORT}"
+      - "${FRONTEND_PORT}"
     environment:
       - PORT=${FRONTEND_PORT}
       - FRONTEND_ADDR
@@ -262,6 +262,27 @@ services:
       - shippingservice
     logging: *logging
 
+  frontendEnvoy:
+    image: ${IMAGE_NAME}:${IMAGE_VERSION}-frontend-envoy
+    build:
+      context: ./
+      dockerfile: ./src/frontendProxy/Dockerfile
+    container_name: frontend-envoy
+    volumes:
+      - ./src/frontendProxy/envoy.yaml.tmpl:/etc/envoy/envoy.yaml.tmpl
+    ports:
+      - "${ENVOY_PORT}:${ENVOY_PORT}"
+      - 10000:10000
+    environment:
+      - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT
+      - FRONTEND_PORT
+      - FRONTEND_ADDR
+      - ENVOY_PORT
+      - ENVOY_UID=0
+    depends_on:
+      - frontend
+    command: /bin/sh -c "envsubst < /etc/envoy/envoy.yaml.tmpl > /etc/envoy/envoy.yaml && envoy -c /etc/envoy/envoy.yaml;"
+
   # Frontend Tests
   frontendTests:
     image: ${IMAGE_NAME}:${IMAGE_VERSION}-frontend-tests

src/frontend/README.md

@@ -24,3 +24,8 @@ from the root folder.
 It will start all of the required backend services
 and within the container simply run `npm run dev`.
 After that the app should be available at <http://localhost:8080/>.
+
+## Collector Config
+
+The app looks for a cookie named 'otelCollectorUrl' and gets its value on page
+load. This cookie key + value needs to be set by a reverse proxy.

src/frontend/package.json

@@ -25,6 +25,7 @@
     "@opentelemetry/sdk-trace-node": "1.7.0",
     "@opentelemetry/sdk-trace-web": "1.7.0",
     "@types/styled-components": "5.1.25",
+    "cookies-next": "^2.1.1",
     "currency-symbol-map": "5.1.0",
     "dotenv": "16.0.1",
     "dotenv-expand": "8.0.3",

src/frontend/pages/_app.tsx

@@ -6,8 +6,12 @@ import CartProvider from '../providers/Cart.provider';
 import { ThemeProvider } from 'styled-components';
 import Theme from '../styles/Theme';
 import FrontendTracer from '../utils/telemetry/FrontendTracer';
+import { getCookie } from 'cookies-next';
 
-if (typeof window !== 'undefined') FrontendTracer();
+if (typeof window !== 'undefined') {
+  const collector = getCookie('otelCollectorUrl')?.toString() || '';
+  FrontendTracer(collector);
+}
 
 const queryClient = new QueryClient();
 

src/frontend/utils/telemetry/FrontendTracer.ts

@@ -7,7 +7,7 @@ import { Resource } from '@opentelemetry/resources';
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
 
-const FrontendTracer = async () => {
+const FrontendTracer = async (collectorString: string) => {
   const { ZoneContextManager } = await import('@opentelemetry/context-zone');
 
   const provider = new WebTracerProvider({
@@ -19,7 +19,7 @@ const FrontendTracer = async () => {
   provider.addSpanProcessor(
     new SimpleSpanProcessor(
       new OTLPTraceExporter({
-        url: process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || 'http://localhost:4318/v1/traces',
+        url: collectorString || 'http://localhost:4318/v1/traces',
       })
     )
   );

src/frontendProxy/Dockerfile

@@ -0,0 +1,2 @@
+FROM envoyproxy/envoy-dev:8c202194ac6a2cb781eb6ce27d924b379b1e787f
+RUN apt-get update && apt-get install -y gettext-base && apt-get clean && rm -rf /var/lib/apt/lists/*

src/frontendProxy/envoy.yaml.tmpl

@@ -0,0 +1,61 @@
+static_resources:
+  listeners:
+  - address:
+      socket_address:
+        address: 0.0.0.0
+        port_value: ${ENVOY_PORT}
+    filter_chains:
+    - filters:
+      - name: envoy.filters.network.http_connection_manager
+        typed_config:
+          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
+          codec_type: AUTO
+          stat_prefix: ingress_http
+          route_config:
+            name: local_route
+            virtual_hosts:
+            - name: frontend
+              domains:
+              - "*"
+              routes:
+              - match:
+                  prefix: "/"
+                route: 
+                  cluster: frontend
+            response_headers_to_add:
+              - header:
+                  key: "Set-Cookie"
+                  value: "otelCollectorUrl=${PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT};"
+          http_filters:
+          - name: envoy.filters.http.router
+            typed_config:
+              "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
+
+  clusters:
+  - name: frontend
+    type: STRICT_DNS
+    lb_policy: ROUND_ROBIN
+    load_assignment:
+      cluster_name: frontend
+      endpoints:
+      - lb_endpoints:
+        - endpoint:
+            address:
+              socket_address:
+                address: frontend
+                port_value: ${FRONTEND_PORT}
+
+admin:
+  address:
+    socket_address:
+      address: 0.0.0.0
+      port_value: 10000
+layered_runtime:
+  layers:
+  - name: static_layer_0
+    static_layer:
+      envoy:
+        resource_limits:
+          listener:
+            example_listener_name:
+              connection_limit: 10000

src/frontendProxy/frontend.tmpl

@@ -0,0 +1,13 @@
+upstream frontend {
+    server  frontend:${FRONTEND_PORT};
+}
+
+server {
+    listen ${PROXY_PORT};
+    server_name _;
+
+    location / {
+        proxy_pass http://frontend;
+        add_header Set-Cookie otelCollectorUrl=${PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT};
+    }
+}