Enable to set `--port` option for `ng serve` and `dashboard` commands (#4253)

Pass the port value like `npm run start --kubernetes-dashboard:port=10080`.
Also, stop exposing backend port, change port value for debugging as variable
and update document `Getting started`.

.npmrc

@@ -10,3 +10,4 @@ kubernetes-dashboard:dashboard_binary_path = dist/amd64/dashboard
 kubernetes-dashboard:dashboard_locale_config = dist/amd64/locale_conf.json
 kubernetes-dashboard:bind_address = 127.0.0.1
 kubernetes-dashboard:sidecar_host = http://localhost:8000
+kubernetes-dashboard:port = 8080

aio/develop/npm-command.sh

@@ -21,7 +21,8 @@ if [[ -n "${K8S_DASHBOARD_NPM_CMD}" ]] ; then
   echo "Run npm '${K8S_DASHBOARD_NPM_CMD}'"
   npm ${K8S_DASHBOARD_NPM_CMD} \
     --kubernetes-dashboard:bind_address=${K8S_DASHBOARD_BIND_ADDRESS} \
-    --kubernetes-dashboard:sidecar_host=${K8S_DASHBOARD_SIDECAR_HOST}
+    --kubernetes-dashboard:sidecar_host=${K8S_DASHBOARD_SIDECAR_HOST} \
+    --kubernetes-dashboard:port=${K8S_DASHBOARD_PORT}
 else
   # Install dashboard.
   echo "Install dashboard"
@@ -54,5 +55,6 @@ else
   echo "Start dashboard"
   npm start \
     --kubernetes-dashboard:bind_address=${K8S_DASHBOARD_BIND_ADDRESS} \
-    --kubernetes-dashboard:sidecar_host=${K8S_DASHBOARD_SIDECAR_HOST}
+    --kubernetes-dashboard:sidecar_host=${K8S_DASHBOARD_SIDECAR_HOST} \
+    --kubernetes-dashboard:port=${K8S_DASHBOARD_PORT}
 fi

aio/develop/run-npm-on-container.sh

@@ -51,6 +51,12 @@ K8S_DASHBOARD_BIND_ADDRESS=${K8S_DASHBOARD_BIND_ADDRESS:-"127.0.0.1"}
 # Metrics Scraper sidecar host for dashboard
 K8S_DASHBOARD_SIDECAR_HOST=${K8S_DASHBOARD_SIDECAR_HOST:-"http://localhost:8000"}
 
+# Port for dashboard (frontend)
+K8S_DASHBOARD_PORT=${K8S_DASHBOARD_PORT:-"8080"}
+
+# Debugging port for dashboard (backend)
+K8S_DASHBOARD_DEBUG_PORT=${K8S_DASHBOARD_DEBUG_PORT:-"2345"}
+
 # Build and run container for dashboard
 DASHBOARD_IMAGE_NAME=${K8S_DASHBOARD_CONTAINER_NAME:-"k8s-dashboard-dev-image"}
 K8S_DASHBOARD_SRC=${K8S_DASHBOARD_SRC:-"${CD}"}
@@ -79,12 +85,11 @@ docker run \
   -e K8S_OWN_CLUSTER=${K8S_OWN_CLUSTER} \
   -e K8S_DASHBOARD_BIND_ADDRESS=${K8S_DASHBOARD_BIND_ADDRESS} \
   -e K8S_DASHBOARD_SIDECAR_HOST=${K8S_DASHBOARD_SIDECAR_HOST} \
+  -e K8S_DASHBOARD_PORT=${K8S_DASHBOARD_PORT} \
   -e K8S_DASHBOARD_DEBUG=${K8S_DASHBOARD_DEBUG} \
   -e LOCAL_UID="${LOCAL_UID}" \
   -e LOCAL_GID="${LOCAL_GID}" \
-  -p 8080:8080 \
-  -p 8443:8443 \
-  -p 9090:9090 \
-  -p 2345:2345 \
+  -p ${K8S_DASHBOARD_PORT}:${K8S_DASHBOARD_PORT} \
+  -p ${K8S_DASHBOARD_DEBUG_PORT}:${K8S_DASHBOARD_DEBUG_PORT} \
   ${DOCKER_RUN_OPTS} \
   ${DASHBOARD_IMAGE_NAME}

docs/developer/getting-started.md

@@ -149,6 +149,10 @@ pass value for `--insecure-bind-address` option to dashboard as follows:
 * Set `K8S_DASHBOARD_BIND_ADDRESS` environment variable as `"0.0.0.0"` before using `aio/develop/run-npm-on-container.sh`.
 * Run like `npm run [command] --kubernetes-dashboard:bind_address="0.0.0.0"`, when you run dashboard from inside the container.
 
+### Change port number for dashboard
+
+As default, development container uses `8080` port to expose dashboard. If you need to change the port number, set `K8S_DASHBOARD_PORT` environment variable before using `aio/develop/run-npm-on-container.sh`. The variable would be passed to `--port` option for docker and `npm run start` command inside container, then container exports the port and dashboard starts at the port.
+
 ### To run dashboard using Docker at ease
 
 1. Run `aio/develop/run-npm-on-container.sh`.
@@ -160,8 +164,9 @@ Then you can see dashboard `http://localhost:8080` with your browser.
 
 1. Copy kubeconfig from your cluster, and confirm the URL for API server in it, and modify it if necessary.
 2. Set filepath for kubeconfig into `K8S_DASHBOARD_KUBECONFIG` environment variable.
-3. Change directory into your dashboard source directory.
-4. Run `aio/develop/run-npm-on-container.sh`.
+3. If you deployed `dashboard-metrics-scraper` in your cluster, set its endpoint to `K8S_DASHBOARD_SIDECAR_HOST` environment variable.
+4. Change directory into your dashboard source directory.
+5. Run `aio/develop/run-npm-on-container.sh`.
 
 These manipulations will build container, and run dashboard as default.
 

package.json

@@ -7,13 +7,13 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "start": "concurrently \"npm run start:backend --kubernetes-dashboard:sidecar_host=$npm_package_config_sidecar_host\" \"npm run start:frontend --kubernetes-dashboard:bind_address=$npm_package_config_bind_address\"",
-    "start:https": "concurrently \"npm run start:backend:https\" \"npm run start:frontend:https\"",
-    "start:frontend": "npm run postversion && ng serve --aot --progress=false --proxy-config aio/proxy.conf.json --host=$npm_package_config_bind_address",
-    "start:frontend:https": "node aio/scripts/version.js && ng serve --progress=false --aot --proxy-config aio/https-proxy.conf.json --ssl --host=$npm_package_config_bind_address",
+    "start": "concurrently \"npm run start:backend --kubernetes-dashboard:sidecar_host=$npm_package_config_sidecar_host\" \"npm run start:frontend --kubernetes-dashboard:bind_address=$npm_package_config_bind_address --kubernetes-dashboard:port=$npm_package_config_port\"",
+    "start:https": "concurrently \"npm run start:backend:https --kubernetes-dashboard:sidecar_host=$npm_package_config_sidecar_host\" \"npm run start:frontend:https --kubernetes-dashboard:bind_address=$npm_package_config_bind_address --kubernetes-dashboard:port=$npm_package_config_port\"",
+    "start:frontend": "npm run postversion && ng serve --aot --progress=false --proxy-config aio/proxy.conf.json --host=$npm_package_config_bind_address --port $npm_package_config_port",
+    "start:frontend:https": "node aio/scripts/version.js && ng serve --progress=false --aot --proxy-config aio/https-proxy.conf.json --ssl --host=$npm_package_config_bind_address --port $npm_package_config_port",
     "start:backend": "KUBECONFIG=${KUBECONFIG:-$npm_package_config_kubeconfig}; gulp serve --kubeconfig $KUBECONFIG --sidecarServerHost $npm_package_config_sidecar_host",
     "start:backend:https": "KUBECONFIG=${KUBECONFIG:-$npm_package_config_kubeconfig}; gulp serve --kubeconfig $KUBECONFIG --autoGenerateCerts true --sidecarServerHost $npm_package_config_sidecar_host",
-    "start:prod": "npm run build && ./$npm_package_config_dashboard_binary_path --kubeconfig $npm_package_config_kubeconfig --locale-config $npm_package_config_dashboard_locale_config --auto-generate-certificates --bind-address $npm_package_config_bind_address --sidecar-host $npm_package_config_sidecar_host",
+    "start:prod": "npm run build && ./$npm_package_config_dashboard_binary_path --kubeconfig $npm_package_config_kubeconfig --locale-config $npm_package_config_dashboard_locale_config --auto-generate-certificates --bind-address $npm_package_config_bind_address --sidecar-host $npm_package_config_sidecar_host --port $npm_package_config_port",
     "build": "./aio/scripts/build.sh",
     "build:cross": "./aio/scripts/build.sh -c",
     "build:frontend": "npm run clean && ng build --aot --prod --outputPath=$npm_package_config_frontend_build_dir",