Enable make serve on development container (#7631)

* Enable `make serve` on development container

* Clean up envs for development container

Also, shorten env names.

Author: shu-mutou

docs/developer/getting-started.md

@@ -157,8 +157,8 @@ Then you can see dashboard http://localhost:4443 with your browser. Since dashbo
 ### To run with your Kubernetes cluster
 
 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. If you deployed `dashboard-metrics-scraper` in your cluster, set its endpoint to `K8S_DASHBOARD_SIDECAR_HOST` environment variable.
+2. Set filepath for kubeconfig into `KD_DEV_KUBECONFIG` environment variable.
+3. If you deployed `dashboard-metrics-scraper` in your cluster, set its endpoint to `KD_DEV_SIDECAR_HOST` environment variable.
 4. Change directory into your dashboard source directory.
 5. Run `hack/develop/run-dev-container.sh`.
 
@@ -168,14 +168,16 @@ To accessing Kubernetes Dashboard, open https://localhost:4443 from your browser
 
 ### Just to run development container without building and running dashboard
 
-1. Set `K8S_DASHBOARD_CMD` environment variable as `bash`.
+1. Set `KD_DEV_CMD` environment variable as `bash`.
 2. Run `hack/develop/run-dev-container.sh`.
 3. Run commands as you like in the container.
 
-This runs container with `bash` command.
+This runs container and execute `bash` command interactively. Then, develop Kubernetes Dashboard!
 
-To run dashboard, execute `make run`. This will build dashboard for production and run three containers for the dashboard.
-Then, access https://localhost:4443 from your browser.
+* To run dashboard, execute `make run`. This will build dashboard for production and run three containers for the dashboard.
+  Then, access https://localhost:4443 from your browser.
+* To run dashboard with Angular Live Development Server, execute `KUBECONFIG=/home/user/.kube/config make serve`.
+  Then, access http://localhost:8080 from your browser.
 
 ### To access console inside of running development container
 

hack/develop/Dockerfile

@@ -61,9 +61,6 @@ ENV TERM=xterm
 # Add ${GOPATH}/bin into ${PATH}
 ENV PATH=${GOPATH}/bin:${PATH}
 
-# For testing, etc., to know if this environment is on container.
-ENV K8S_DASHBOARD_CONTAINER=TRUE
-
 # Suppress angular analytics dialog
 ENV NG_CLI_ANALYTICS=false
 
@@ -118,8 +115,5 @@ RUN mkdir -p /home/user/.kube
 # Current directory is always dashboard source directory.
 WORKDIR /go/src/github.com/kubernetes/dashboard
 
-# Expose port for frontend, backend and remote debuging
-EXPOSE 8080 8443 9090 2345
-
 # Run gosu command in container.
 CMD ./hack/develop/gosu-command.sh

hack/develop/gosu-command.sh

@@ -35,12 +35,12 @@ echo "user ALL=(ALL:ALL) NOPASSWD:ALL" > /etc/sudoers.d/user
 # Execute command with gosu as user
 GOSU="exec /usr/sbin/gosu user"
 
-# Run command if K8S_DASHBOARD_CMD is set,
+# Run command if KD_DEV_CMD is set,
 # otherwise run dashboard with `make run` with k8s cluster.
-if [[ -n "${K8S_DASHBOARD_CMD}" ]] ; then
+if [[ -n "${KD_DEV_CMD}" ]] ; then
   # Run specified command
-  echo "Run '${K8S_DASHBOARD_CMD}'"
-  ${GOSU} ${K8S_DASHBOARD_CMD}
+  echo "Run '${KD_DEV_CMD}'"
+  ${GOSU} ${KD_DEV_CMD}
 else
   # Run dashboard with k8s cluster
   ${GOSU} hack/develop/run-command.sh

hack/develop/run-dev-container.sh

@@ -13,11 +13,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-# This runs npm commands for dashboard in container.
-#
-# To run dashboard on container, simply run `run-npm-command.sh`.
-# To run npm command in container, set K8S_DASHBOARD_NPM_CMD variable
-# like "run check" or run like `run-npm-command.sh run check`.
+# This prepares development environment for Kubernetes Dashboard in Docker.
+# See `docs/developer/getting-started.md`.
 
 CD="$(pwd)"
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
@@ -30,71 +27,62 @@ DOCKER_GID=$(getent group docker|cut -d ":" -f 3)
 # kubeconfig for dashboard.
 # This will be mounted and certain npm command can modify it,
 # so this should not be set for original kubeconfig.
-if [[ -n "${K8S_DASHBOARD_KUBECONFIG}" ]] ; then
+if [[ -n "${KD_DEV_KUBECONFIG}" ]] ; then
   # Use your own kubernetes cluster.
   K8S_OWN_CLUSTER=true
 else
   # Use the kind cluster that will be created later by the script.
   # Set defult as kubeconfig made by `hack/scripts/start-cluster.sh`.
   touch /tmp/kind.kubeconfig
-  K8S_DASHBOARD_KUBECONFIG=/tmp/kind.kubeconfig
+  KD_DEV_KUBECONFIG=/tmp/kind.kubeconfig
 fi
 
 # Create docker network to work with kind cluster
-K8S_DASHBOARD_NETWORK="kubernetes-dashboard"
-docker network create ${K8S_DASHBOARD_NETWORK} \
+KD_DEV_NETWORK="kubernetes-dashboard"
+docker network create ${KD_DEV_NETWORK} \
   -d=bridge \
   -o com.docker.network.bridge.enable_ip_masquerade=true \
   -o com.docker.network.driver.mtu=1500
 
 # Bind addres for dashboard
-K8S_DASHBOARD_BIND_ADDRESS=${K8S_DASHBOARD_BIND_ADDRESS:-"127.0.0.1"}
+KD_DEV_BIND_ADDRESS=${KD_DEV_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"}
+KD_DEV_SIDECAR_HOST=${KD_DEV_SIDECAR_HOST:-"http://localhost:8000"}
 
 # Build and run container for dashboard
-DASHBOARD_IMAGE_NAME=${K8S_DASHBOARD_CONTAINER_NAME:-"k8s-dashboard-dev-image"}
-K8S_DASHBOARD_SRC=${K8S_DASHBOARD_SRC:-"${CD}"}
-K8S_DASHBOARD_CONTAINER_NAME=${K8S_DASHBOARD_CONTAINER_NAME:-"k8s-dashboard-dev"}
-K8S_DASHBOARD_SRC_ON_CONTAINER=/go/src/github.com/kubernetes/dashboard
+KD_DEV_IMAGE_NAME=${KD_DEV_CONTAINER_NAME:-"k8s-dashboard-dev-image"}
+KD_DEV_SRC=${KD_DEV_SRC:-"${CD}"}
+KD_DEV_CONTAINER_NAME=${KD_DEV_CONTAINER_NAME:-"k8s-dashboard-dev"}
+KD_DEV_SRC_ON_CONTAINER=/go/src/github.com/kubernetes/dashboard
 
-echo "Remove existing container ${K8S_DASHBOARD_CONTAINER_NAME}"
-docker rm -f ${K8S_DASHBOARD_CONTAINER_NAME}
+echo "Remove existing container ${KD_DEV_CONTAINER_NAME}"
+docker rm -f ${KD_DEV_CONTAINER_NAME}
 
 # Always test if the image is up-to-date. If nothing has changed since last build,
 # it'll just use the already-built image
 echo "Start building container image for development"
-docker build -t ${DASHBOARD_IMAGE_NAME} -f ${DIR}/Dockerfile ${DIR}/../../
+docker build -t ${KD_DEV_IMAGE_NAME} -f ${DIR}/Dockerfile ${DIR}/../../
 
 # Run dashboard container for development and expose necessary ports automatically.
 echo "Run container for development"
 docker run \
   -it \
-  --name=${K8S_DASHBOARD_CONTAINER_NAME} \
+  --name=${KD_DEV_CONTAINER_NAME} \
   --cap-add=SYS_PTRACE \
-  --network=${K8S_DASHBOARD_NETWORK} \
+  --network=${KD_DEV_NETWORK} \
   -v /var/run/docker.sock:/var/run/docker.sock \
-  -v ${K8S_DASHBOARD_SRC}:${K8S_DASHBOARD_SRC_ON_CONTAINER} \
-  -v ${K8S_DASHBOARD_KUBECONFIG}:/home/user/.kube/config \
-  -e K8S_DASHBOARD_CMD="${K8S_DASHBOARD_CMD}" \
+  -v ${KD_DEV_SRC}:${KD_DEV_SRC_ON_CONTAINER} \
+  -v ${KD_DEV_KUBECONFIG}:/home/user/.kube/config \
+  -e KD_DEV_CMD="${KD_DEV_CMD}" \
   -e K8S_OWN_CLUSTER=${K8S_OWN_CLUSTER} \
-  -e K8S_DASHBOARD_BIND_ADDRESS=${K8S_DASHBOARD_BIND_ADDRESS} \
-  -e K8S_DASHBOARD_PORT=${K8S_DASHBOARD_PORT} \
-  -e K8S_DASHBOARD_DEBUG=${K8S_DASHBOARD_DEBUG} \
-  -e KUBECONFIG=${K8S_DASHBOARD_KUBECONFIG} \
-  -e KIND_EXPERIMENTAL_DOCKER_NETWORK=${K8S_DASHBOARD_NETWORK} \
-  -e SIDECAR_HOST=${K8S_DASHBOARD_SIDECAR_HOST} \
+  -e BIND_ADDRESS=${KD_DEV_BIND_ADDRESS} \
+  -e KUBECONFIG=${KD_DEV_KUBECONFIG} \
+  -e KIND_EXPERIMENTAL_DOCKER_NETWORK=${KD_DEV_NETWORK} \
+  -e SIDECAR_HOST=${KD_DEV_SIDECAR_HOST} \
   -e LOCAL_UID="${LOCAL_UID}" \
   -e LOCAL_GID="${LOCAL_GID}" \
   -e DOCKER_GID="${DOCKER_GID}" \
-  -p ${K8S_DASHBOARD_PORT}:${K8S_DASHBOARD_PORT} \
-  -p ${K8S_DASHBOARD_DEBUG_PORT}:${K8S_DASHBOARD_DEBUG_PORT} \
+  -p 8080:8080 \
   ${DOCKER_RUN_OPTS} \
-  ${DASHBOARD_IMAGE_NAME}
+  ${KD_DEV_IMAGE_NAME}

modules/web/Makefile

@@ -59,7 +59,7 @@ deploy-dev: --deploy-dev
 
 .PHONY: --serve-angular
 --serve-angular: --ensure-dependencies
-	@npx ng serve --proxy-config=$(PROXY_CONFIG) --ssl=$(SSL_ENABLED)
+	@npx ng serve --proxy-config=$(PROXY_CONFIG) --ssl=$(SSL_ENABLED) --host=$(BIND_ADDRESS)
 
 .PHONY: --build-go
 --build-go:

modules/web/hack/include/config.mk

@@ -15,3 +15,4 @@ SSL_ENABLED ?= false
 SYSTEM_BANNER ?= "Local test environment"
 SYSTEM_BANNER_SEVERITY ?= INFO
 AUTO_GENERATE_CERTIFICATES ?= false
+BIND_ADDRESS ?= 127.0.0.1