Setup development container for new architecture (kubernetes#7563)

* Fix path and add yarn

* Add `docker compose` plugin

Also, fix path.

* Setup docker group

* Setup default behavior that exec `make run`

* Cleanup backup file

* Rename script for running development container

Author: shu-mutou

docs/developer/getting-started.md

@@ -138,57 +138,37 @@ git push -f origin my-feature
 ## Easy way to build your development environment with Docker
 
 At first, change directory to kubernetes dashboard repository of your fork.
+This development container has all of dependencies to develop dashboard.
 
-### Allow accessing dashboard from outside the container
+### Miscellaneous
 
-Development container builds Kubernetes Dashboard and runs it with self-certificates by default,
-but Kubernetes Dashboard is not exposed to outside the container with insecure certificates by default.
+* Development container builds Kubernetes Dashboard and runs it with self-certificates by default.
+* This container create `user` with `UID` and `GID` same as local user, switch user to `user` with `gosu` and run commands. So created or updated files like results of `make fix` would have same ownership as your host. You can commit them immediately from your host.
+* Built Kubernetes Dashboard will run by `docker compose`, so other few containers will be created in your docker.
 
-To allow accessing dashboard from outside the development container,
-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] --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`.
-
-That's all. It will build dashboard container from your local repository, will create also kubernetes cluster container for your dashboard using [`kind`](https://github.com/kubernetes-sigs/kind), and will run dashboard.
-Then you can see dashboard `http://localhost:8080` with your browser. Since dashboard uses self-certificates, so you need ignore warning or error about it in your browser.
-
-### To run with your another Kubernetes cluster
+### 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.
 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.
-
-### To run npm commands as you want
+5. Run `hack/develop/run-dev-container.sh`.
 
-Also, you can run npm commands described in package.json as you want
+These manipulations will build container and run dashboard with `make run` as default.
 
-e.g.
-1. To test dashboard, run `aio/develop/run-npm-on-container.sh run test`.
-2. To check your code changes, run `aio/develop/run-npm-on-container.sh run check`.
+To accessing Kubernetes Dashboard, open https://localhost:4443 from your browser.
 
-This container create `user` with `UID` and `GID` same as local user, switch user to `user` with `gosu` and run commands. So created or updated files like results of `npm run fix` or `npm run check` would have same ownership as your host. You can commit them immediately from your host.
-
-### To run container without creating cluster and running dashboard
+### Just to run development container without building and running dashboard
 
 1. Set `K8S_DASHBOARD_CMD` environment variable as `bash`.
-2. Run `aio/develop/run-npm-on-container.sh`.
+2. Run `hack/develop/run-dev-container.sh`.
 3. Run commands as you like in the container.
 
 This runs container with `bash` command.
 
+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 access console inside of running development container
 
 1. Run `docker exec -it k8s-dashboard-dev gosu user bash`.

hack/develop/Dockerfile

@@ -41,6 +41,9 @@ RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - \
 	&& rm -rf /var/lib/apt/lists/* \
 	&& apt-get clean
 
+# Install yarn
+RUN npm install -g yarn
+
 ENV GIT_EDITOR=nano
 
 # Install firefox from Mozilla binaries
@@ -66,14 +69,19 @@ ENV NG_CLI_ANALYTICS=false
 
 # Download a statically linked docker client,
 # so the container is able to build images on the host.
-RUN curl -sSL https://download.docker.com/linux/static/stable/x86_64/docker-20.10.17.tgz > /tmp/docker.tgz && \
+RUN curl -sSL https://download.docker.com/linux/static/stable/x86_64/docker-20.10.22.tgz > /tmp/docker.tgz && \
 	cd /tmp/ && \
 	tar xzvf docker.tgz && \
 	rm docker.tgz && \
 	mv /tmp/docker/docker /usr/bin/docker && \
 	rm -rf /tmp/docker/ && \
 	chmod +x /usr/bin/docker
 
+# Install docker compose plugin
+RUN mkdir -p /usr/local/lib/docker/cli-plugins
+RUN curl -SL https://github.com/docker/compose/releases/download/v2.14.0/docker-compose-linux-x86_64 -o /usr/local/lib/docker/cli-plugins/docker-compose
+RUN chmod +x /usr/local/lib/docker/cli-plugins/docker-compose
+
 # Install kubectl
 RUN curl -LO https://storage.googleapis.com/kubernetes-release/release/$(curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt)/bin/linux/amd64/kubectl
 RUN chmod +x ./kubectl
@@ -82,7 +90,7 @@ RUN mv ./kubectl /usr/local/bin/kubectl
 # Install golangci for ckecking or fixing go format.
 # `npm ci` installs golangci, but this installation is needed
 # for running `npm run check` singlely, like
-# `aio/develop/run-npm-on-container.sh run check`.
+# `hack/develop/run-dev-container.sh run check`.
 RUN curl -sSfL https://raw.githubusercontent.com/golangci/golangci-lint/master/install.sh | sh -s -- -b $(go env GOPATH)/bin v1.49.0
 
 # Enable go mod.
@@ -114,4 +122,4 @@ WORKDIR /go/src/github.com/kubernetes/dashboard
 EXPOSE 8080 8443 9090 2345
 
 # Run gosu command in container.
-CMD ./aio/develop/gosu-command.sh
+CMD ./hack/develop/gosu-command.sh

hack/develop/gosu-command.sh

@@ -23,6 +23,12 @@ fi
 useradd -u ${LOCAL_UID} -g ${LOCAL_GID} -d /home/user user
 chown -R ${LOCAL_UID}:${LOCAL_GID} /home/user
 
+# Create docker group and add user to docker group, if group its ID provided
+if [ -v DOCKER_GID ]; then
+  groupadd -g ${DOCKER_GID} docker
+  usermod -aG docker user
+fi
+
 # Add user as sudoer without password
 echo "user ALL=(ALL:ALL) NOPASSWD:ALL" > /etc/sudoers.d/user
 
@@ -38,5 +44,5 @@ if [[ -n "${K8S_DASHBOARD_CMD}" ]] ; then
   ${GOSU} ${K8S_DASHBOARD_CMD}
 else
   # Run npm command
-  ${GOSU} aio/develop/npm-command.sh
+  ${GOSU} hack/develop/npm-command.sh
 fi

hack/develop/npm-command.sh

@@ -13,20 +13,9 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-# Install dependencies
-echo "Install dependencies"
-npm ci
-
 # Run npm command if K8S_DASHBOARD_NPM_CMD is set,
 # otherwise start dashboard.
-if [[ -n "${K8S_DASHBOARD_NPM_CMD}" ]] ; then
-  # Run npm command
-  echo "Run npm '${K8S_DASHBOARD_NPM_CMD}'"
-  npm ${K8S_DASHBOARD_NPM_CMD} \
-    --bind_address=${K8S_DASHBOARD_BIND_ADDRESS} \
-    --sidecar_host=${K8S_DASHBOARD_SIDECAR_HOST} \
-    --port=${K8S_DASHBOARD_PORT}
-else
+if [[ -v "${K8S_DASHBOARD_NPM_CMD}" ]] ; then
   if [[ "${K8S_OWN_CLUSTER}" != true ]] ; then
     # Stop cluster.
     echo "Stop cluster"
@@ -43,24 +32,22 @@ else
     sed -e "s/127.0.0.1:[0-9]\+/${KIND_ADDR}:6443/g" /tmp/kind.kubeconfig > ~/.kube/config
     # Deploy recommended.yaml to deploy dashboard-metrics-scraper sidecar
     echo "Deploy dashboard-metrics-scraper into kind cluster"
-    kubectl apply -f aio/deploy/recommended.yaml
+    kubectl apply -f hack/deploy/recommended.yaml
     # Kill and run `kubectl proxy`
     KUBECTL_PID=$(ps -A|grep 'kubectl'|tr -s ' '|cut -d ' ' -f 2)
     echo "Kill kubectl ${KUBECTL_PID}"
     kill ${KUBECTL_PID}
     nohup kubectl proxy --address 127.0.0.1 --port 8000 >/tmp/kubeproxy.log 2>&1 &
-    export K8S_DASHBOARD_SIDECAR_HOST="http://localhost:8000/api/v1/namespaces/kubernetes-dashboard/services/dashboard-metrics-scraper:/proxy/"
+    export SIDECAR_HOST="http://localhost:8000/api/v1/namespaces/kubernetes-dashboard/services/dashboard-metrics-scraper:/proxy/"
     # Inform how to get token for logging in to dashboard
     echo "HOW TO GET TOKEN FOR LOGGING INTO DASHBOARD"
     echo "1. Run terminal for dashboard container."
     echo "  docker exec -it k8s-dashboard-dev gosu user bash"
     echo "2. Run following to get token for logging into dashboard."
     echo "  kubectl -n kubernetes-dashboard create token kubernetes-dashboard"
   fi
-  # Start dashboard.
-  echo "Start dashboard in production mode"
-  npm run start:prod \
-    --bind_address=${K8S_DASHBOARD_BIND_ADDRESS} \
-    --sidecar_host=${K8S_DASHBOARD_SIDECAR_HOST} \
-    --port=${K8S_DASHBOARD_PORT}
 fi
+
+# Start dashboard.
+echo "Start dashboard in production mode"
+make run

hack/develop/run-npm-on-container.sh renamed to hack/develop/run-dev-container.sh

@@ -25,6 +25,7 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 # User and group ID to execute commands.
 LOCAL_UID=$(id -u)
 LOCAL_GID=$(id -g)
+DOCKER_GID=$(getent group docker|cut -d ":" -f 3)
 
 # K8S_DASHBOARD_NPM_CMD will be passed into container and will be used
 # by run-npm-command.sh on container. Then the shell sciprt will run `npm`
@@ -95,11 +96,13 @@ docker run \
   -e K8S_DASHBOARD_CMD="${K8S_DASHBOARD_CMD}" \
   -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 KUBECONFIG=${K8S_DASHBOARD_KUBECONFIG} \
+  -e SIDECAR_HOST=${K8S_DASHBOARD_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} \
   ${DOCKER_RUN_OPTS} \

modules/web/i18n/ja/README.md

@@ -112,11 +112,11 @@ Kubernetes Dashboard の和訳を実施するにあたって、下記の配慮
 * **[和訳ファイル](./messages.ja.xlf)の `<target>` タグの中身を和訳／修正します。
   原文は `<source>` タグで、これにあたる和訳／修正を実施します。
   その際、翻訳済みである印として、`<target>` タグ内に `state="new"` の属性があれば、この属性を削除します。**
-* `npm run start:prod` を実行して Kubernetes Dashboard をビルド、実行して、和訳／修正した結果をブラウザから確認します。
-  + Dashboard の開発環境コンテナを利用して、`kind` を利用した Kubernetes クラスタの構築、Dashboard のビルドと起動を一括で行うには、下記を実行します。
+* `make run` を実行して Kubernetes Dashboard をビルド、実行して、和訳／修正した結果をブラウザから確認します。
+  + Dashboard の開発環境コンテナを利用して Dashboard をビルドし、ご自身の Kubernetes クラスタに接続する Dashboard を起動するには、下記を実行します。
     > :warning: **`K8S_DASHBOARD_BIND_ADDRESS=0.0.0.0`を付けることで、Dashboard はコンテナ外部からのアクセスを許可しています。信頼できるネットワーク上にある環境で実行してください。**
 
-    `K8S_DASHBOARD_BIND_ADDRESS=0.0.0.0 aio/develop/run-npm-on-container.sh`
+    `K8S_DASHBOARD_KUBECONFIG=<path to kubeconfig file> K8S_DASHBOARD_BIND_ADDRESS=0.0.0.0 hack/develop/run-dev-container.sh`
 * Pull Request を `kubernetes/dashboard` リポジトリに提出します。
 * 新たに翻訳すべき原文の追加や修正が発生しているかは、[`kubernetes/dashboard` リポジトリの`language/ja` ラベルが付いた Pull Request](https://github.com/kubernetes/dashboard/pulls?utf8=%E2%9C%93&q=is%3Apr+label%3Alanguage%2Fja) を監視することで行います。