fix: app env vars override issue

.env

@@ -1,2 +1,11 @@
+# Used by docker-compose.yml
 IMAGE_NAME=ghcr.io/hyperdxio/hyperdx
 IMAGE_VERSION=1.1.1
+
+# Set up domain URLs
+HYPERDX_API_PORT=8000
+HYPERDX_API_URL=http://localhost
+HYPERDX_APP_PORT=8080
+HYPERDX_APP_URL=http://localhost
+OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318 # port is fixed
+

Makefile

@@ -39,14 +39,43 @@ dev-int:
 ci-int:
 	docker compose -p int -f ./docker-compose.ci.yml run --rm api ci:int
 
+.PHONY: build-local
+build-local:
+	docker build ./docker/hostmetrics -t ${IMAGE_NAME}:${LATEST_VERSION}-hostmetrics --target prod &
+	docker build ./docker/ingestor -t ${IMAGE_NAME}:${LATEST_VERSION}-ingestor --target prod &
+	docker build ./docker/otel-collector -t ${IMAGE_NAME}:${LATEST_VERSION}-otel-collector --target prod &
+	docker build --build-arg CODE_VERSION=${LATEST_VERSION} . -f ./packages/miner/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-miner --target prod &
+	docker build \
+		--build-arg CODE_VERSION=${LATEST_VERSION} \
+		--build-arg PORT=${HYPERDX_API_PORT} \
+		. -f ./packages/api/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-api --target prod &
+	docker build \
+		--build-arg CODE_VERSION=${LATEST_VERSION} \
+		--build-arg OTEL_EXPORTER_OTLP_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT} \
+		--build-arg OTEL_SERVICE_NAME=${OTEL_SERVICE_NAME} \
+		--build-arg PORT=${HYPERDX_APP_PORT} \
+		--build-arg SERVER_URL=${HYPERDX_API_URL}:${HYPERDX_API_PORT} \
+		. -f ./packages/app/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-app --target prod
+
+.PHONY: version
+version:
+	sh ./version.sh
 
 .PHONY: build-and-push-ghcr
 build-and-push-ghcr:
 	docker buildx build --platform ${BUILD_PLATFORMS} ./docker/hostmetrics -t ${IMAGE_NAME}:${LATEST_VERSION}-hostmetrics --target prod --push &
 	docker buildx build --platform ${BUILD_PLATFORMS} ./docker/ingestor -t ${IMAGE_NAME}:${LATEST_VERSION}-ingestor --target prod --push &
 	docker buildx build --platform ${BUILD_PLATFORMS} ./docker/otel-collector -t ${IMAGE_NAME}:${LATEST_VERSION}-otel-collector --target prod --push &
 	docker buildx build --build-arg CODE_VERSION=${LATEST_VERSION} --platform ${BUILD_PLATFORMS} . -f ./packages/miner/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-miner --target prod --push &
-	docker buildx build --build-arg CODE_VERSION=${LATEST_VERSION} --platform ${BUILD_PLATFORMS} . -f ./packages/api/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-api --target prod --push &
-	docker buildx build --build-arg CODE_VERSION=${LATEST_VERSION} --platform ${BUILD_PLATFORMS} . -f ./packages/app/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-app --target prod --push
-
+	docker buildx build \
+		--build-arg CODE_VERSION=${LATEST_VERSION} \
+		--build-arg PORT=${HYPERDX_API_PORT} \
+		--platform ${BUILD_PLATFORMS} . -f ./packages/api/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-api --target prod --push &
+	docker buildx build \
+		--build-arg CODE_VERSION=${LATEST_VERSION} \
+		--build-arg OTEL_EXPORTER_OTLP_ENDPOINT=${OTEL_EXPORTER_OTLP_ENDPOINT} \
+		--build-arg OTEL_SERVICE_NAME=${OTEL_SERVICE_NAME} \
+		--build-arg PORT=${HYPERDX_APP_PORT} \
+		--build-arg SERVER_URL=${HYPERDX_API_URL}:${HYPERDX_API_PORT} \
+		--platform ${BUILD_PLATFORMS} . -f ./packages/app/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-app --target prod --push
 

docker-compose.yml

@@ -80,12 +80,12 @@ services:
       CLICKHOUSE_HOST: http://ch-server:8123
       CLICKHOUSE_PASSWORD: aggregator
       CLICKHOUSE_USER: aggregator
-      FRONTEND_URL: 'http://localhost:8080' # need to be localhost (CORS)
+      FRONTEND_URL: ${HYPERDX_APP_URL}:${HYPERDX_APP_PORT} # need to be localhost (CORS)
       MONGO_URI: 'mongodb://db:27017/hyperdx'
       NODE_ENV: development
       PORT: 8001
       REDIS_URL: redis://redis:6379
-      SERVER_URL: 'http://localhost:8000'
+      SERVER_URL: ${HYPERDX_API_URL}:${HYPERDX_API_PORT}
     networks:
       - internal
     depends_on:
@@ -103,7 +103,7 @@ services:
       CLICKHOUSE_LOG_LEVEL: trace
       CLICKHOUSE_PASSWORD: worker
       CLICKHOUSE_USER: worker
-      FRONTEND_URL: 'http://localhost:8080' # need to be localhost (CORS)
+      FRONTEND_URL: ${HYPERDX_APP_URL}:${HYPERDX_APP_PORT} # need to be localhost (CORS)
       HDX_NODE_ADVANCED_NETWORK_CAPTURE: 1
       HDX_NODE_BETA_MODE: 0
       HDX_NODE_CONSOLE_CAPTURE: 1
@@ -126,7 +126,7 @@ services:
     image: ${IMAGE_NAME}:${IMAGE_VERSION}-api
     container_name: hdx-oss-api
     ports:
-      - 8000:8000
+      - ${HYPERDX_API_PORT}:${HYPERDX_API_PORT}
     environment:
       AGGREGATOR_API_URL: 'http://aggregator:8001'
       APP_TYPE: 'api'
@@ -135,7 +135,7 @@ services:
       CLICKHOUSE_PASSWORD: api
       CLICKHOUSE_USER: api
       EXPRESS_SESSION_SECRET: 'hyperdx is cool 👋'
-      FRONTEND_URL: 'http://localhost:8080' # need to be localhost (CORS)
+      FRONTEND_URL: ${HYPERDX_APP_URL}:${HYPERDX_APP_PORT} # need to be localhost (CORS)
       HDX_NODE_ADVANCED_NETWORK_CAPTURE: 1
       HDX_NODE_BETA_MODE: 1
       HDX_NODE_CONSOLE_CAPTURE: 1
@@ -146,9 +146,9 @@ services:
       NODE_ENV: development
       OTEL_EXPORTER_OTLP_ENDPOINT: 'http://otel-collector:4318'
       OTEL_SERVICE_NAME: 'hdx-oss-api'
-      PORT: 8000
+      PORT: ${HYPERDX_API_PORT}
       REDIS_URL: redis://redis:6379
-      SERVER_URL: 'http://localhost:8000'
+      SERVER_URL: ${HYPERDX_API_URL}:${HYPERDX_API_PORT}
       USAGE_STATS_ENABLED: ${USAGE_STATS_ENABLED:-true}
     networks:
       - internal
@@ -160,14 +160,11 @@ services:
     image: ${IMAGE_NAME}:${IMAGE_VERSION}-app
     container_name: hdx-oss-app
     ports:
-      - 8080:8080
+      - ${HYPERDX_APP_PORT}:${HYPERDX_APP_PORT}
     environment:
-      NEXT_PUBLIC_API_SERVER_URL: 'http://localhost:8000' # need to be localhost (CORS)
-      NEXT_PUBLIC_HDX_API_KEY: ${HYPERDX_API_KEY}
-      NEXT_PUBLIC_HDX_COLLECTOR_URL: 'http://localhost:4318'
-      NEXT_PUBLIC_HDX_SERVICE_NAME: 'hdx-oss-app'
+      HYPERDX_API_KEY: ${HYPERDX_API_KEY}
       NODE_ENV: development
-      PORT: 8080
+      PORT: ${HYPERDX_APP_PORT}
     networks:
       - internal
     depends_on:

packages/api/Dockerfile

@@ -34,7 +34,11 @@ ARG CODE_VERSION
 
 ENV CODE_VERSION=$CODE_VERSION
 
-EXPOSE 8000
+ARG PORT
+
+ENV PORT=$PORT
+
+EXPOSE ${PORT}
 
 USER node
 

packages/app/Dockerfile

@@ -22,9 +22,14 @@ CMD ["dev"]
 # Rebuild the source code only when needed
 FROM base AS builder
 
-# Expose NEXT_PUBLIC_API_SERVER_URL during build time if needed
-ARG NEXT_PUBLIC_API_SERVER_URL
-ENV NEXT_PUBLIC_API_SERVER_URL $NEXT_PUBLIC_API_SERVER_URL
+# Expose custom env variables to the browser (needs NEXT_PUBLIC_ prefix)
+# doc: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
+ARG OTEL_EXPORTER_OTLP_ENDPOINT
+ARG OTEL_SERVICE_NAME
+ARG SERVER_URL
+ENV NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT $OTEL_EXPORTER_OTLP_ENDPOINT
+ENV NEXT_PUBLIC_OTEL_SERVICE_NAME $OTEL_SERVICE_NAME
+ENV NEXT_PUBLIC_SERVER_URL $SERVER_URL
 
 COPY ./packages/app/tsconfig.json ./packages/app/next.config.js ./packages/app/mdx.d.ts ./packages/app/.eslintrc.js ./
 COPY ./packages/app/src ./src 
@@ -53,13 +58,15 @@ COPY --from=builder /app/package.json ./package.json
 
 USER nextjs
 
-EXPOSE 8080
+ARG PORT
+
+ENV PORT=$PORT
 
-ENV PORT 8080
+EXPOSE ${PORT}
 
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry.
 ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD ["node_modules/.bin/next", "start"]
+CMD ["sh", "-c", "node_modules/.bin/next start -p ${PORT}"]

packages/app/pages/_app.tsx

@@ -29,15 +29,24 @@ export default function MyApp({ Component, pageProps }: AppProps) {
       .then(res => res.json())
       .then(_jsonData => {
         if (_jsonData?.apiKey) {
+          let hostname;
+          try {
+            const url = new URL(_jsonData.apiServerUrl);
+            hostname = url.hostname;
+          } catch (err) {
+            // console.log(err);
+          }
           HyperDX.init({
             apiKey: _jsonData.apiKey,
             consoleCapture: true,
             maskAllInputs: true,
             maskAllText: true,
             service: _jsonData.serviceName,
-            tracePropagationTargets: [/localhost/i, /hyperdx\.io/i],
+            tracePropagationTargets: [new RegExp(hostname ?? 'localhost', 'i')],
             url: _jsonData.collectorUrl,
           });
+        } else {
+          console.warn('No API key found');
         }
       })
       .catch(err => {

packages/app/pages/api/config.ts

@@ -1,13 +1,15 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 import {
+  API_SERVER_URL,
   HDX_API_KEY,
   HDX_COLLECTOR_URL,
   HDX_SERVICE_NAME,
 } from '../../src/config';
 
 type ResponseData = {
   apiKey: string;
+  apiServerUrl: string;
   collectorUrl: string;
   serviceName: string;
 };
@@ -18,6 +20,7 @@ export default function handler(
 ) {
   res.status(200).json({
     apiKey: HDX_API_KEY,
+    apiServerUrl: API_SERVER_URL,
     collectorUrl: HDX_COLLECTOR_URL,
     serviceName: HDX_SERVICE_NAME,
   });

packages/app/src/config.ts

@@ -1,11 +1,11 @@
 export const API_SERVER_URL =
-  process.env.NEXT_PUBLIC_API_SERVER_URL || 'http://localhost:8000'; // NEXT_PUBLIC_API_SERVER_URL can be empty string
+  process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:8000'; // NEXT_PUBLIC_API_SERVER_URL can be empty string
 
-export const HDX_API_KEY = (process.env.NEXT_PUBLIC_HDX_API_KEY ||
-  process.env.HYPERDX_API_KEY) as string;
+export const HDX_API_KEY = process.env.HYPERDX_API_KEY as string; // for nextjs server
 export const HDX_SERVICE_NAME =
-  process.env.NEXT_PUBLIC_HDX_SERVICE_NAME || 'hdx-oss-dev-app';
+  process.env.NEXT_PUBLIC_OTEL_SERVICE_NAME || 'hdx-oss-dev-app';
 export const HDX_COLLECTOR_URL =
-  process.env.NEXT_PUBLIC_HDX_COLLECTOR_URL || 'http://localhost:4318';
+  process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_ENDPOINT ||
+  'http://localhost:4318';
 
 export const IS_OSS = process.env.NEXT_PUBLIC_IS_OSS ?? 'true' === 'true';

version.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+yarn changeset version
+
+# update root package.json version
+API_LATEST_VERSION=$(sed -n 's/.*"version": "\([^"]*\)".*/\1/p' ./packages/api/package.json)
+APP_LATEST_VERSION=$(sed -n 's/.*"version": "\([^"]*\)".*/\1/p' ./packages/app/package.json)
+
+# check if api and app versions are the same
+if [ "$API_LATEST_VERSION" != "$APP_LATEST_VERSION" ]; then
+  echo "API and APP versions are not the same. Please check and try again."
+  exit 1
+fi
+
+# update root package.json version
+sed -i '' -e "s/\"version\": \".*\"/\"version\": \"$API_LATEST_VERSION\"/g" ./package.json
+
+echo "Updated root package.json version to $API_LATEST_VERSION"
+echo "Run 'make build-and-push-ghcr' to publish new version to GHCR"