feat(dev): support configurable ports and hosts for multi-workspace and cloudtop (#983)

* feat(dev): support configurable ports and hosts for multi-workspace and cloudtop

Support configuring ports and hosts via environment variables for KHI development servers and test runners.

- Makefile: allow overriding WEB_HOST, WEB_PORT, BACKEND_HOST, BACKEND_PORT, STORYBOOK_HOST, STORYBOOK_PORT, and KARMA_PORT. Add --allowed-hosts flag automatically when WEB_HOST is 0.0.0.0.
- Angular proxy: forward to BACKEND_HOST and BACKEND_PORT, normalizing 0.0.0.0 to 127.0.0.1 for HTTP proxy target.
- Karma: configure port from KARMA_PORT, bind to 127.0.0.1, and set --remote-debugging-port=0 to avoid debugging port collisions in headless Chrome.

* fix(dev): update karma beginsPattern regex to match 127.0.0.1 in tasks.json

Author: kyasbal

.vscode/launch.json

@@ -50,12 +50,12 @@
       "name": "Launch Karma (Chrome)",
       "type": "chrome",
       "request": "launch",
-      "url": "http://localhost:9876",
+      "url": "http://127.0.0.1:9876",
       "webRoot": "${workspaceFolder}/web",
       "preLaunchTask": "Start Karma",
       "sourceMaps": true,
       "sourceMapPathOverrides": {
-        "http://localhost:9876/base/*": "${webRoot}/*"
+        "http://127.0.0.1:9876/base/*": "${webRoot}/*"
       }
     }
   ]

.vscode/tasks.json

@@ -67,7 +67,7 @@
         "background": {
           "activeOnStart": true,
           "beginsPattern": {
-            "regexp": ".*server started at http://localhost:9876.*"
+            "regexp": ".*server started at http://(localhost|127\\.0\\.0\\.1):[0-9]+.*"
           },
           "endsPattern": {
             "regexp": ".*Executed .* FAILURE.*|.*Executed .* SUCCESS.*"

scripts/make/build.mk

@@ -2,9 +2,18 @@
 # This file contains make tasks for building.
 
 
+WEB_HOST ?= localhost
+WEB_PORT ?= 4200
+WEB_ALLOWED_HOSTS_FLAG ?= $(if $(filter 0.0.0.0,$(WEB_HOST)),--allowed-hosts,)
+STORYBOOK_HOST ?= localhost
+STORYBOOK_PORT ?= 6006
+KARMA_PORT ?= 9876
+BACKEND_PORT ?= $(or $(PORT),8080)
+BACKEND_HOST ?= $(if $(filter 0.0.0.0,$(HOST)),127.0.0.1,$(or $(HOST),127.0.0.1))
+
 .PHONY: watch-web
 watch-web: $(GENERATE_FRONTEND_DUMMY) ## Run frontend development server
-	cd web && npx ng serve -c dev
+	cd web && BACKEND_PORT=$(BACKEND_PORT) BACKEND_HOST=$(BACKEND_HOST) npx ng serve -c dev --host $(WEB_HOST) --port $(WEB_PORT) $(WEB_ALLOWED_HOSTS_FLAG)
 
 $(FRONTEND_ARTIFACT_FILES_DUMMY): $(GENERATE_FRONTEND_DUMMY) $(FRONTEND_SOURCE_FILES) $(FRONTEND_GENERATED_SRCS)## Build frontend for production
 	cd web && npx ng build --output-path ../pkg/server/dist -c prod
@@ -15,15 +24,15 @@ build-web: $(FRONTEND_ARTIFACT_FILES_DUMMY) ## Build frontend for production
 
 .PHONY: watch-storybook
 watch-storybook: $(GENERATE_FRONTEND_DUMMY) ## Run storybook development server
-	cd web && npm run storybook
+	cd web && npm run storybook -- --host $(STORYBOOK_HOST) --port $(STORYBOOK_PORT)
 
 .PHONY: build-storybook
 build-storybook: $(GENERATE_FRONTEND_DUMMY) ## Build storybook
 	cd web && npm run build-storybook
 
 .PHONY: watch-karma
 watch-karma: $(GENERATE_FRONTEND_DUMMY) ## Run karma test server
-	cd web && npm run test
+	cd web && KARMA_PORT=$(KARMA_PORT) npm run test
 
 khi: $(GENERATE_BACKEND_DUMMY) $(FRONTEND_ARTIFACT_FILES_DUMMY) $(BACKEND_SRCS)
 	CGO_ENABLED=0 go build -ldflags="-s -w -X github.com/GoogleCloudPlatform/khi/pkg/common/constants.VERSION=$(shell cat ./VERSION)" -o ./khi ./cmd/kubernetes-history-inspector/...

scripts/make/testing.mk

@@ -1,21 +1,23 @@
 # testing.mk
 # This file contains make tasks related to testing.
 
+KARMA_PORT ?= 9876
+
 .PHONY: test-web
 test-web: $(GENERATE_FRONTEND_DUMMY) $(FRONTEND_SOURCE_FILES)## Run frontend tests
-	cd web && npx ng test --browsers ChromeHeadlessNoSandbox --watch=false
+	cd web && KARMA_PORT=$(KARMA_PORT) npx ng test --browsers ChromeHeadlessNoSandbox --watch=false
 
 .PHONY: watch-test-web
 watch-test-web: $(GENERATE_FRONTEND_DUMMY) ## Run frontend tests in watch mode
-	cd web && npx ng test
+	cd web && KARMA_PORT=$(KARMA_PORT) npx ng test
 
 .PHONY: test-go
 test-go: $(GENERATE_BACKEND_DUMMY) $(BACKEND_TEST_SRCS) $(FRONTEND_ARTIFACT_FILES_DUMMY) ## Run backend tests
 	go test ./...
 
 .PHONY: coverage-web
 coverage-web: $(GENERATE_FRONTEND_DUMMY) $(FRONTEND_SOURCE_FILES)## Run frontend tests and generate coverage report
-	cd web && npx ng test --code-coverage --browsers ChromeHeadlessNoSandbox --watch false --progress false
+	cd web && KARMA_PORT=$(KARMA_PORT) npx ng test --code-coverage --browsers ChromeHeadlessNoSandbox --watch false --progress false
 
 .PHONY: coverage-go
 coverage-go: $(GENERATE_BACKEND_DUMMY) $(BACKEND_TEST_SRCS) $(FRONTEND_ARTIFACT_FILES_DUMMY)## Run backend tests and generate coverage report

web/karma.conf.js

@@ -53,7 +53,9 @@ module.exports = function (config) {
       ]
     },
     reporters: ['progress', 'kjhtml'],
-    port: 9876,
+    port: parseInt(process.env.KARMA_PORT, 10) || 9876,
+    hostname: '127.0.0.1',
+    listenAddress: '127.0.0.1',
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
@@ -71,7 +73,8 @@ module.exports = function (config) {
           '--no-sandbox',
           '--enable-unsafe-swiftshader',
           '--enable-webgl',
-          '--disable-gpu'
+          '--disable-gpu',
+          '--remote-debugging-port=0'
         ]
       }
     },

web/proxy.conf.mjs

@@ -18,12 +18,16 @@
  * Angular Proxy Configuration
  *
  * This file defines the proxy configuration for the Angular development server.
- * During development, requests to the /api/ path are forwarded to localhost:8080.
+ * During development, requests to the /api/ path are forwarded to the backend server.
  */
 
+const backendPort = process.env.BACKEND_PORT || process.env.PORT || "8080";
+const rawHost = process.env.BACKEND_HOST || process.env.HOST || "127.0.0.1";
+const backendHost = rawHost === "0.0.0.0" ? "127.0.0.1" : rawHost;
+
 export default {
   "/api": {
-    target: "http://127.0.0.1:8080",
+    target: `http://${backendHost}:${backendPort}`,
     secure: false,
     changeOrigin: true,
     logLevel: "debug",