From 21c5a0186c9847f9249dfd3a1b014dbac3dd87b2 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Thu, 20 Oct 2022 23:20:37 -0400 Subject: [PATCH 01/15] support setting collector URL for browser --- .env | 3 +- docker-compose.yml | 17 +++++- src/frontend/README.md | 5 ++ src/frontend/package-lock.json | 56 +++++++++++++++++++ src/frontend/package.json | 1 + src/frontend/pages/_app.tsx | 6 +- .../utils/telemetry/FrontendTracer.ts | 4 +- src/frontendProxy/frontend.tmpl | 13 +++++ 8 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 src/frontendProxy/frontend.tmpl diff --git a/.env b/.env index 3cec066378..e8ab886a52 100644 --- a/.env +++ b/.env @@ -6,7 +6,7 @@ IMAGE_NAME=ghcr.io/open-telemetry/demo OTEL_EXPORTER_OTLP_ENDPOINT=http://otelcol:4317 OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT} OTEL_EXPORTER_OTLP_METRICS_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT} -PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://localhost:4318/v1/traces +PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://foo:4318/v1/traces # Metrics Temporality OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative @@ -14,6 +14,7 @@ OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative # Frontend FRONTEND_PORT=8080 FRONTEND_ADDR=frontend:${FRONTEND_PORT} +PROXY_PORT=8080 # Redis REDIS_PORT=6379 diff --git a/docker-compose.yml b/docker-compose.yml index d97707447d..a0ec3b4e2f 100644 --- a/docker-compose.yml +++ b/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 @@ -261,6 +261,21 @@ services: - recommendationservice - shippingservice logging: *logging + + frontendProxy: + image: nginx + container_name: proxy + volumes: + - ./src/frontendProxy/frontend.tmpl:/etc/nginx/conf.d/frontend.conf.template + ports: + - "${PROXY_PORT}:${PROXY_PORT}" + environment: + - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT + - FRONTEND_PORT + - PROXY_PORT + depends_on: + - frontend + command: /bin/bash -c "envsubst < /etc/nginx/conf.d/frontend.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'" # Frontend Tests frontendTests: diff --git a/src/frontend/README.md b/src/frontend/README.md index c188410e74..7c0a798868 100755 --- a/src/frontend/README.md +++ b/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 . + +## 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. \ No newline at end of file diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index c549a72f85..6650a2fcd9 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -22,6 +22,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", @@ -3175,6 +3176,11 @@ "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.5.tgz", "integrity": "sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==" }, + "node_modules/@types/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==" + }, "node_modules/@types/cookies": { "version": "0.7.7", "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.7.tgz", @@ -4382,6 +4388,29 @@ "node": ">= 0.6" } }, + "node_modules/cookies-next": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-2.1.1.tgz", + "integrity": "sha512-AZGZPdL1hU3jCjN2UMJTGhLOYzNUN9Gm+v8BdptYIHUdwz397Et1p+sZRfvAl8pKnnmMdX2Pk9xDRKCGBum6GA==", + "dependencies": { + "@types/cookie": "^0.4.1", + "@types/node": "^16.10.2", + "cookie": "^0.4.0" + } + }, + "node_modules/cookies-next/node_modules/@types/node": { + "version": "16.11.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.68.tgz", + "integrity": "sha512-JkRpuVz3xCNCWaeQ5EHLR/6woMbHZz/jZ7Kmc63AkU+1HxnoUugzSWMck7dsR4DvNYX8jp9wTi9K7WvnxOIQZQ==" + }, + "node_modules/cookies-next/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/core-js-pure": { "version": "3.23.5", "dev": true, @@ -10637,6 +10666,11 @@ "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.5.tgz", "integrity": "sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==" }, + "@types/cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==" + }, "@types/cookies": { "version": "0.7.7", "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.7.tgz", @@ -11453,6 +11487,28 @@ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==" }, + "cookies-next": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/cookies-next/-/cookies-next-2.1.1.tgz", + "integrity": "sha512-AZGZPdL1hU3jCjN2UMJTGhLOYzNUN9Gm+v8BdptYIHUdwz397Et1p+sZRfvAl8pKnnmMdX2Pk9xDRKCGBum6GA==", + "requires": { + "@types/cookie": "^0.4.1", + "@types/node": "^16.10.2", + "cookie": "^0.4.0" + }, + "dependencies": { + "@types/node": { + "version": "16.11.68", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.68.tgz", + "integrity": "sha512-JkRpuVz3xCNCWaeQ5EHLR/6woMbHZz/jZ7Kmc63AkU+1HxnoUugzSWMck7dsR4DvNYX8jp9wTi9K7WvnxOIQZQ==" + }, + "cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==" + } + } + }, "core-js-pure": { "version": "3.23.5", "dev": true diff --git a/src/frontend/package.json b/src/frontend/package.json index 8fd8c543fa..21854639b7 100644 --- a/src/frontend/package.json +++ b/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", diff --git a/src/frontend/pages/_app.tsx b/src/frontend/pages/_app.tsx index d5d5e21c29..90edd55a3b 100755 --- a/src/frontend/pages/_app.tsx +++ b/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(); diff --git a/src/frontend/utils/telemetry/FrontendTracer.ts b/src/frontend/utils/telemetry/FrontendTracer.ts index 2ede67d2e6..217e23074f 100644 --- a/src/frontend/utils/telemetry/FrontendTracer.ts +++ b/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', }) ) ); diff --git a/src/frontendProxy/frontend.tmpl b/src/frontendProxy/frontend.tmpl new file mode 100644 index 0000000000..2874698fa1 --- /dev/null +++ b/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}; + } +} \ No newline at end of file From 4d79600919cb0dafa333186a083624cd02401e33 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Thu, 20 Oct 2022 23:32:53 -0400 Subject: [PATCH 02/15] rename to frontend-proxy --- docker-compose.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index a0ec3b4e2f..8482435a93 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -264,7 +264,7 @@ services: frontendProxy: image: nginx - container_name: proxy + container_name: frontend-proxy volumes: - ./src/frontendProxy/frontend.tmpl:/etc/nginx/conf.d/frontend.conf.template ports: From 149363e687a271435588c0cb9cbf9b69adf3f2ed Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 10:36:20 -0400 Subject: [PATCH 03/15] refactor to use envoy rather than nginx --- .env | 4 +- docker-compose.yml | 24 +++++++----- src/frontendProxy/Dockerfile | 2 + src/frontendProxy/envoy.yaml.tmpl | 61 +++++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+), 11 deletions(-) create mode 100644 src/frontendProxy/Dockerfile create mode 100644 src/frontendProxy/envoy.yaml.tmpl diff --git a/.env b/.env index e8ab886a52..3a9d17ede2 100644 --- a/.env +++ b/.env @@ -6,7 +6,7 @@ IMAGE_NAME=ghcr.io/open-telemetry/demo OTEL_EXPORTER_OTLP_ENDPOINT=http://otelcol:4317 OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT} OTEL_EXPORTER_OTLP_METRICS_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT} -PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://foo:4318/v1/traces +PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT=http://localhost:4318/v1/traces # Metrics Temporality OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative @@ -14,7 +14,7 @@ OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative # Frontend FRONTEND_PORT=8080 FRONTEND_ADDR=frontend:${FRONTEND_PORT} -PROXY_PORT=8080 +ENVOY_PORT=80 # Redis REDIS_PORT=6379 diff --git a/docker-compose.yml b/docker-compose.yml index 8482435a93..4307d3afbe 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -261,21 +261,27 @@ services: - recommendationservice - shippingservice logging: *logging - - frontendProxy: - image: nginx - container_name: frontend-proxy + + frontendEnvoy: + image: ${IMAGE_NAME}:${IMAGE_VERSION}-frontend-envoy + build: + context: ./ + dockerfile: ./src/frontendProxy/Dockerfile + container_name: frontend-envoy volumes: - - ./src/frontendProxy/frontend.tmpl:/etc/nginx/conf.d/frontend.conf.template + - ./src/frontendProxy/envoy.yaml.tmpl:/etc/envoy/envoy.yaml.tmpl ports: - - "${PROXY_PORT}:${PROXY_PORT}" + - "${ENVOY_PORT}:${ENVOY_PORT}" + - 10000:10000 environment: - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT - FRONTEND_PORT - - PROXY_PORT - depends_on: + - FRONTEND_ADDR + - ENVOY_PORT + - ENVOY_UID=0 + depends_on: - frontend - command: /bin/bash -c "envsubst < /etc/nginx/conf.d/frontend.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'" + command: /bin/sh -c "envsubst < /etc/envoy/envoy.yaml.tmpl > /etc/envoy/envoy.yaml && envoy -c /etc/envoy/envoy.yaml;" # Frontend Tests frontendTests: diff --git a/src/frontendProxy/Dockerfile b/src/frontendProxy/Dockerfile new file mode 100644 index 0000000000..2e1f10ab69 --- /dev/null +++ b/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/* \ No newline at end of file diff --git a/src/frontendProxy/envoy.yaml.tmpl b/src/frontendProxy/envoy.yaml.tmpl new file mode 100644 index 0000000000..486069d5e1 --- /dev/null +++ b/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 From 0e903143d12ae20a6ccb453127e1a315c2a44c62 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 12:35:31 -0400 Subject: [PATCH 04/15] cleanup --- .env | 3 +++ docker-compose.yml | 5 ++--- src/frontend/README.md | 2 +- src/frontendProxy/Dockerfile | 2 +- src/frontendProxy/envoy.yaml.tmpl | 7 ++++--- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/.env b/.env index 3a9d17ede2..d3d42a5c3e 100644 --- a/.env +++ b/.env @@ -14,6 +14,9 @@ OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative # Frontend FRONTEND_PORT=8080 FRONTEND_ADDR=frontend:${FRONTEND_PORT} + +# Envoy +FRONTEND_HOST=frontend ENVOY_PORT=80 # Redis diff --git a/docker-compose.yml b/docker-compose.yml index 4307d3afbe..6e8794817f 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -272,11 +272,10 @@ services: - ./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 + - FRONTEND_HOST - ENVOY_PORT - ENVOY_UID=0 depends_on: @@ -482,7 +481,7 @@ services: memory: 160M restart: always ports: - - "${FEATURE_FLAG_SERVICE_PORT}:${FEATURE_FLAG_SERVICE_PORT}" # Feature Flag Service UI + - "${FEATURE_FLAG_SERVICE_PORT}" # Feature Flag Service UI - "${FEATURE_FLAG_GRPC_SERVICE_PORT}" # Feature Flag Service gRPC API environment: - FEATURE_FLAG_SERVICE_PORT diff --git a/src/frontend/README.md b/src/frontend/README.md index 7c0a798868..af153c3f46 100755 --- a/src/frontend/README.md +++ b/src/frontend/README.md @@ -28,4 +28,4 @@ After that the app should be available at . ## 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. \ No newline at end of file +load. This cookie key + value needs to be set by a reverse proxy. diff --git a/src/frontendProxy/Dockerfile b/src/frontendProxy/Dockerfile index 2e1f10ab69..4cc4de7815 100644 --- a/src/frontendProxy/Dockerfile +++ b/src/frontendProxy/Dockerfile @@ -1,2 +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/* \ No newline at end of file +RUN apt-get update && apt-get install -y gettext-base && apt-get clean && rm -rf /var/lib/apt/lists/* diff --git a/src/frontendProxy/envoy.yaml.tmpl b/src/frontendProxy/envoy.yaml.tmpl index 486069d5e1..0734262b6e 100644 --- a/src/frontendProxy/envoy.yaml.tmpl +++ b/src/frontendProxy/envoy.yaml.tmpl @@ -22,10 +22,11 @@ static_resources: prefix: "/" route: cluster: frontend - response_headers_to_add: + response_headers_to_add: - header: key: "Set-Cookie" - value: "otelCollectorUrl=${PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT};" + value: + "otelCollectorUrl=${PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT};" http_filters: - name: envoy.filters.http.router typed_config: @@ -42,7 +43,7 @@ static_resources: - endpoint: address: socket_address: - address: frontend + address: ${FRONTEND_HOST} port_value: ${FRONTEND_PORT} admin: From 107538a4c879e13b171039709788dba2152b4159 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 12:42:46 -0400 Subject: [PATCH 05/15] fix composefile --- docker-compose.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index bdd4d99d64..7d5a5de4a6 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -229,9 +229,8 @@ services: depends_on: - frontend command: /bin/sh -c "envsubst < /etc/envoy/envoy.yaml.tmpl > /etc/envoy/envoy.yaml && envoy -c /etc/envoy/envoy.yaml;" - # Load generator - - loadgenerator: + + loadgenerator: image: ${IMAGE_NAME}:${IMAGE_VERSION}-loadgenerator container_name: load-generator build: From 328ae5b4a9ac915a746b9fb5429082bc4c396173 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 12:52:42 -0400 Subject: [PATCH 06/15] delete unneeded nginx conf template --- src/frontendProxy/frontend.tmpl | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/frontendProxy/frontend.tmpl diff --git a/src/frontendProxy/frontend.tmpl b/src/frontendProxy/frontend.tmpl deleted file mode 100644 index 2874698fa1..0000000000 --- a/src/frontendProxy/frontend.tmpl +++ /dev/null @@ -1,13 +0,0 @@ -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}; - } -} \ No newline at end of file From 14816c0e31b0cdd68f0f350520d32a584f50db83 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 12:57:34 -0400 Subject: [PATCH 07/15] cleanup naming --- docker-compose.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 7d5a5de4a6..a6a19e9ec1 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -210,14 +210,14 @@ services: - shippingservice logging: *logging - frontendEnvoy: + frontendproxy: image: ${IMAGE_NAME}:${IMAGE_VERSION}-frontend-envoy build: context: ./ dockerfile: ./src/frontendProxy/Dockerfile - container_name: frontend-envoy + container_name: frontend-proxy volumes: - - ./src/frontendProxy/envoy.yaml.tmpl:/etc/envoy/envoy.yaml.tmpl + - ./src/frontendproxy/envoy.yaml.tmpl:/etc/envoy/envoy.yaml.tmpl ports: - "${ENVOY_PORT}:${ENVOY_PORT}" environment: From 9a795b3fc5b55db31a343ecc99dbedae1558863a Mon Sep 17 00:00:00 2001 From: Pierre Tessier Date: Fri, 21 Oct 2022 13:49:30 -0400 Subject: [PATCH 08/15] set cors to * --- src/otelcollector/otelcol-config.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/otelcollector/otelcol-config.yml b/src/otelcollector/otelcol-config.yml index 40ee9792be..809f2578ee 100644 --- a/src/otelcollector/otelcol-config.yml +++ b/src/otelcollector/otelcol-config.yml @@ -5,7 +5,8 @@ receivers: http: cors: allowed_origins: - - "http://localhost:8080" + - "http://*" + - "https://*" otlp/spanmetrics: protocols: grpc: From cef9b7202071de75ca6e41d8de269162731cb970 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 13:51:22 -0400 Subject: [PATCH 09/15] also front ffs with envoy --- .env | 1 + docker-compose.yml | 3 +++ src/featureflagservice/config/config.exs | 2 +- src/frontendProxy/envoy.yaml.tmpl | 20 ++++++++++++++++---- 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/.env b/.env index d3d42a5c3e..8a6d1ed77c 100644 --- a/.env +++ b/.env @@ -56,6 +56,7 @@ SHIPPING_SERVICE_ADDR=shippingservice:${SHIPPING_SERVICE_PORT} FEATURE_FLAG_SERVICE_PORT=8081 FEATURE_FLAG_SERVICE_ADDR=featureflagservice:${FEATURE_FLAG_SERVICE_PORT} +FEATURE_FLAG_SERVICE_HOST=feature-flag-service FEATURE_FLAG_GRPC_SERVICE_PORT=50053 FEATURE_FLAG_GRPC_SERVICE_ADDR=featureflagservice:${FEATURE_FLAG_GRPC_SERVICE_PORT} diff --git a/docker-compose.yml b/docker-compose.yml index a6a19e9ec1..9b8832bb3a 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -224,6 +224,8 @@ services: - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT - FRONTEND_PORT - FRONTEND_HOST + - FEATURE_FLAG_SERVICE_PORT + - FEATURE_FLAG_SERVICE_HOST - ENVOY_PORT - ENVOY_UID=0 depends_on: @@ -417,6 +419,7 @@ services: - OTEL_EXPORTER_OTLP_TRACES_PROTOCOL=grpc - OTEL_SERVICE_NAME=featureflagservice - DATABASE_URL=ecto://ffs:ffs@ffs_postgres:5432/ffs + - FEATURE_FLAG_SERVICE_PATH_ROOT="/feature" depends_on: ffs_postgres: condition: service_healthy diff --git a/src/featureflagservice/config/config.exs b/src/featureflagservice/config/config.exs index e70c3d6415..da7d0c8e89 100644 --- a/src/featureflagservice/config/config.exs +++ b/src/featureflagservice/config/config.exs @@ -12,7 +12,7 @@ config :featureflagservice, # Configures the endpoint config :featureflagservice, FeatureflagserviceWeb.Endpoint, - url: [host: "localhost"], + url: [host: "localhost", path: "/feature"], render_errors: [view: FeatureflagserviceWeb.ErrorView, accepts: ~w(html json), layout: false], pubsub_server: Featureflagservice.PubSub, live_view: [signing_salt: "T88WPl/Q"] diff --git a/src/frontendProxy/envoy.yaml.tmpl b/src/frontendProxy/envoy.yaml.tmpl index 0734262b6e..6269332f97 100644 --- a/src/frontendProxy/envoy.yaml.tmpl +++ b/src/frontendProxy/envoy.yaml.tmpl @@ -18,10 +18,10 @@ static_resources: domains: - "*" routes: - - match: - prefix: "/" - route: - cluster: frontend + - match: { prefix: "/feature" } + route: { cluster: featureflag, prefix_rewrite: "/" } + - match: { prefix: "/" } + route: { cluster: frontend } response_headers_to_add: - header: key: "Set-Cookie" @@ -45,6 +45,18 @@ static_resources: socket_address: address: ${FRONTEND_HOST} port_value: ${FRONTEND_PORT} + - name: featureflag + type: STRICT_DNS + lb_policy: ROUND_ROBIN + load_assignment: + cluster_name: featureflag + endpoints: + - lb_endpoints: + - endpoint: + address: + socket_address: + address: ${FEATURE_FLAG_SERVICE_HOST} + port_value: ${FEATURE_FLAG_SERVICE_PORT} admin: address: From 5e55de7d0320db2ab25c36bec97644fd5981604e Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 13:57:35 -0400 Subject: [PATCH 10/15] update docs, changelog, etc --- CHANGELOG.md | 2 ++ docs/current_architecture.md | 5 ++++- docs/docker_deployment.md | 4 ++-- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4b8e563f4..3bc34455f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -124,3 +124,5 @@ significant modifications will be credited to OpenTelemetry Authors. ([#455](https://github.com/open-telemetry/opentelemetry-demo/pull/455)) * Update cartservice Dockerfile to support ARM64 ([#439](https://github.com/open-telemetry/opentelemetry-demo/pull/439)) +* Add Envoy as reverse proxy for all user-facing services +([#508](https://github.com/open-telemetry/opentelemetry-demo/pull/508)) diff --git a/docs/current_architecture.md b/docs/current_architecture.md index f63c08c657..38e0bd0d0d 100644 --- a/docs/current_architecture.md +++ b/docs/current_architecture.md @@ -15,6 +15,7 @@ checkoutservice(Checkout Service):::golang currencyservice(Currency Service):::cpp emailservice(Email Service):::ruby frontend(Frontend):::javascript +frontendproxy(Frontend Proxy
(Envoy)):::cpp loadgenerator([Load Generator]):::python paymentservice(Payment Service):::javascript productcatalogservice(Product Catalog Service):::golang @@ -24,7 +25,9 @@ shippingservice(Shipping Service):::rust featureflagservice(Feature Flag Service):::erlang featureflagstore[(Feature Flag Store
(PostgreSQL DB))] -Internet -->|HTTP| frontend +Internet -->|HTTP| frontendproxy +frontendproxy -->|HTTP| frontend +frontendproxy -->|HTTP| featureflagservice loadgenerator -->|HTTP| frontend checkoutservice --->|gRPC| cartservice --> cache diff --git a/docs/docker_deployment.md b/docs/docker_deployment.md index 4c16bc3ea7..b01f875688 100644 --- a/docs/docker_deployment.md +++ b/docs/docker_deployment.md @@ -39,11 +39,11 @@ source. It may take more than 20 minutes to build if the flag is omitted. Once the images are built and containers are started you can access: -- Webstore: +- Webstore: - Jaeger: - Prometheus: - Grafana: -- Feature Flags UI: +- Feature Flags UI: - Load Generator UI: ## Bring your own backend From 1a136171e7f40928280191304f239e0e8404d890 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 14:00:19 -0400 Subject: [PATCH 11/15] update one more port mapping in docs --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 43c1ed660b..50c2e4176a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -91,11 +91,11 @@ docker compose up -d Once the images are built and containers are started you can access: -- Webstore: +- Webstore: - Jaeger: - Prometheus: - Grafana: -- Feature Flags UI: +- Feature Flags UI: - Load Generator UI: ## Create Your First Pull Request From 7945932ba62fb8f29f02eed7dca499e23ef209e4 Mon Sep 17 00:00:00 2001 From: Pierre Tessier Date: Fri, 21 Oct 2022 14:09:10 -0400 Subject: [PATCH 12/15] update for envoy url --- .github/.mlc_config.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/.mlc_config.json b/.github/.mlc_config.json index 346efed04a..c2ff8d8545 100644 --- a/.github/.mlc_config.json +++ b/.github/.mlc_config.json @@ -1,8 +1,7 @@ { "ignorePatterns": [ + {"pattern": "^http://localhost"}, {"pattern": "^http://localhost:3000"}, - {"pattern": "^http://localhost:8080"}, - {"pattern": "^http://localhost:8081"}, {"pattern": "^http://localhost:8089"}, {"pattern": "^http://localhost:9090"}, {"pattern": "^http://localhost:16686"}, From 63c7bcf3cd70f80fbb2996d8ce8cc06b4829ec0d Mon Sep 17 00:00:00 2001 From: Pierre Tessier Date: Fri, 21 Oct 2022 14:09:45 -0400 Subject: [PATCH 13/15] update for envoy url --- docs/kubernetes_deployment.md | 41 +++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/docs/kubernetes_deployment.md b/docs/kubernetes_deployment.md index 9dd7acca79..c19e007cb6 100644 --- a/docs/kubernetes_deployment.md +++ b/docs/kubernetes_deployment.md @@ -25,3 +25,44 @@ To install the chart with the release name my-otel-demo, run the following comma ```console helm install my-otel-demo open-telemetry/opentelemetry-demo ``` + +## Verify the Webstore & the Telemetry + +In order to use the demo services deployed in a Kubernetes cluster, the services +must be exposed. You can do this using the `kubectl port-forward` command, or by +exposing the services using different service types (ie: LoadBalancer) with +optional ingress routes. + +### Using kubectl port-forward to expose services + +You will need to expose each service individually using the +- Frontend UI: http://localhost:8080 + by running these commands: + kubectl port-forward svc/{{ include "otel-demo.name" . }}-frontend 8080:8080 + + +{{- if $.Values.observability.jaeger.enabled }} + +- Jaeger UI: http://localhost:16686 + by running these commands: + kubectl port-forward svc/{{ include "otel-demo.name" . }}-jaeger 16686:16686 + {{- end }} + +{{- if $.Values.observability.grafana.enabled }} + +- Grafana UI: http://localhost:3000 + by running these commands: + kubectl port-forward svc/{{ include "otel-demo.name" . }}-grafana 3000:3000 + {{- end }} + +- Locust (load generator) UI: http://localhost:8089 + by running these commands: + kubectl port-forward svc/{{ include "otel-demo.name" . }}-loadgenerator 8089:8089 + +- Feature Flag Service UI: http://localhost:8081 + by running these commands: + kubectl port-forward svc/{{ include "otel-demo.name" . }}-featureflagservice 8081:8081 + +- OpenTelemetry Collector OTLP/HTTP receiver (required for browser spans to be emitted): + by running these commands: + kubectl port-forward svc/{{ include "otel-demo.name" . }}-otelcol 4318:4318 From b9f068696a0cd855a66ae9433370924d4ff12c38 Mon Sep 17 00:00:00 2001 From: Pierre Tessier Date: Fri, 21 Oct 2022 14:16:51 -0400 Subject: [PATCH 14/15] Revert "update for envoy url" This reverts commit 63c7bcf3cd70f80fbb2996d8ce8cc06b4829ec0d. --- docs/kubernetes_deployment.md | 41 ----------------------------------- 1 file changed, 41 deletions(-) diff --git a/docs/kubernetes_deployment.md b/docs/kubernetes_deployment.md index c19e007cb6..9dd7acca79 100644 --- a/docs/kubernetes_deployment.md +++ b/docs/kubernetes_deployment.md @@ -25,44 +25,3 @@ To install the chart with the release name my-otel-demo, run the following comma ```console helm install my-otel-demo open-telemetry/opentelemetry-demo ``` - -## Verify the Webstore & the Telemetry - -In order to use the demo services deployed in a Kubernetes cluster, the services -must be exposed. You can do this using the `kubectl port-forward` command, or by -exposing the services using different service types (ie: LoadBalancer) with -optional ingress routes. - -### Using kubectl port-forward to expose services - -You will need to expose each service individually using the -- Frontend UI: http://localhost:8080 - by running these commands: - kubectl port-forward svc/{{ include "otel-demo.name" . }}-frontend 8080:8080 - - -{{- if $.Values.observability.jaeger.enabled }} - -- Jaeger UI: http://localhost:16686 - by running these commands: - kubectl port-forward svc/{{ include "otel-demo.name" . }}-jaeger 16686:16686 - {{- end }} - -{{- if $.Values.observability.grafana.enabled }} - -- Grafana UI: http://localhost:3000 - by running these commands: - kubectl port-forward svc/{{ include "otel-demo.name" . }}-grafana 3000:3000 - {{- end }} - -- Locust (load generator) UI: http://localhost:8089 - by running these commands: - kubectl port-forward svc/{{ include "otel-demo.name" . }}-loadgenerator 8089:8089 - -- Feature Flag Service UI: http://localhost:8081 - by running these commands: - kubectl port-forward svc/{{ include "otel-demo.name" . }}-featureflagservice 8081:8081 - -- OpenTelemetry Collector OTLP/HTTP receiver (required for browser spans to be emitted): - by running these commands: - kubectl port-forward svc/{{ include "otel-demo.name" . }}-otelcol 4318:4318 From e3bfd023249ea7772fa8d1f4120f679c226dfb26 Mon Sep 17 00:00:00 2001 From: Austin Parker Date: Fri, 21 Oct 2022 14:17:09 -0400 Subject: [PATCH 15/15] fixup --- docs/kubernetes_deployment.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/kubernetes_deployment.md b/docs/kubernetes_deployment.md index c19e007cb6..5a9615080e 100644 --- a/docs/kubernetes_deployment.md +++ b/docs/kubernetes_deployment.md @@ -35,12 +35,11 @@ optional ingress routes. ### Using kubectl port-forward to expose services -You will need to expose each service individually using the +You will need to expose each service individually using the - Frontend UI: http://localhost:8080 by running these commands: kubectl port-forward svc/{{ include "otel-demo.name" . }}-frontend 8080:8080 - {{- if $.Values.observability.jaeger.enabled }} - Jaeger UI: http://localhost:16686