Запуск приложения React в локальном кластере Kubernetes в Windows 10

В этом блоге мы не будем описывать процесс установки Docker Desktop и включение серверной части WSL2 . Предполагается, что читатели могут самостоятельно разобраться в процессе из предоставленных ресурсов. Я мог бы подробно осветить эти темы, если в будущих блогах будет достаточно спроса.

Linux Containers BackendПосле установки убедитесь, что вы работаете в Docker Desktop.

Запуск minikube

minikube настраивает локальный кластер kubernetes для разработки на локальном хосте (в данном случае Windows).

Поскольку мы будем использовать локальный образ докера и не будем передавать его в реестр докеров, а затем укажем то же самое во время развертывания kubernetes используется --insecure-registry=10.0.0.0/24 .

Выполните следующую команду, чтобы запустить локальный кластер Kubernetes в PowerShell (желательно в PowerShell администратора)

minikube start --insecure-registry="10.0.0.0/24"

Пример вывода

❯ minikube start --insecure-registry="10.0.0.0/24"

* minikube v1.18.1 on Microsoft Windows 10 Pro 10.0.21332 Build 21332
* Using the docker driver based on existing profile
* Starting control plane node minikube in cluster minikube
* Restarting existing docker container for "minikube" ...
* Preparing Kubernetes v1.20.2 on Docker 20.10.3 ...
* Verifying Kubernetes components...
  - Using image kubernetesui/dashboard:v2.1.0
  - Using image kubernetesui/metrics-scraper:v1.0.4
  - Using image gcr.io/k8s-minikube/storage-provisioner:v4
* Enabled addons: storage-provisioner, dashboard, default-storageclass
* Done! kubectl is now configured to use "minikube" cluster and "default" namespace by default

Создание приложение React

Убедитесь, что node и npm установлены в среде Windows

❯ node -v
v15.11.0

❯ npm -v
7.6.3

Затем используйте npx create-react-app test-react-app для создания тестового приложения react.

❯ npx create-react-app test-react-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

Creating a new React app in D:\work\test-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...

Убедитесь, что приложение работает должным образом.

test-react-app-running.png

Настройка локальной среды minikube docker

Выполните следующую команду, чтобы установить локальную конфигурацию для упрощения итерации разработки с помощью локальных образов doker.

ПРИМЕЧАНИЕ Это остается локальным для вашего терминала PowerShell, в котором мы запускаем следующую команду

& minikube -p minikube docker-env | Invoke-Expression

Для всех, кому интересно, Run, minikube docker-env чтобы увидеть, какие команды запускаются.

❯ minikube docker-env
$Env:DOCKER_TLS_VERIFY = "1"
$Env:DOCKER_HOST = "tcp://127.0.0.1:52175"
$Env:DOCKER_CERT_PATH = "C:\Users\Naren\.minikube\certs"
$Env:MINIKUBE_ACTIVE_DOCKERD = "minikube"
# To point your shell to minikube's docker-daemon, run:
# & minikube -p minikube docker-env | Invoke-Expression

Dockerize приложение react

Самый простой способ создать образ doker приложения react – добавить следующие файлы в корень папки приложения (репозиторий в случае git)

dockerize-react-app.png

Dockerfile

FROM node:10-alpine as build-step

RUN mkdir /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build

FROM nginx:1.17.1-alpine
COPY --from=build-step /app/build /usr/share/nginx/html

.dockerignore

docker build -t test-react-app .

Проверьте построенный образ

❯ docker images test-react-app
REPOSITORY TAG IMAGE ID CREATED SIZE
test-react-app latest e81a494ead2b About a minute ago 21.1MB

Развертывание Kubernetes

deployment И service ресурсы необходимы для развертывания приложений react на кластер kubernetes. Мы можем объединить обе спецификации в один yaml файл, разделив их ---

  • Обратите внимание на imagePullPolicy атрибут, помеченный как Never, указывающий, что не смотрите в реестр doker для извлечения image вызываемого test-react-app
  • Также мы будем использовать простейший service вызов NodePort для сопоставления порта узла в кластере Kubernetes с портом приложений.
Deploy_yaml.png

deployment.yaml

kind: Deployment
apiVersion: apps/v1
metadata:
  name: test-react-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: test-react-app
  template:
    metadata:
      labels:
        app: test-react-app
    spec:
      containers:
        - name: test-react-app
          image: test-react-app
          imagePullPolicy: Never
          ports:
            - containerPort: 80
      restartPolicy: Always

---

kind: Service
apiVersion: v1
metadata:
  name: test-react-app
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 32000
  selector:
    app: test-react-app
Развертывание

Мы используем kubectl apply -f <yaml> для развертывания и обслуживания

kubectl apply -f .\deployment.yaml

Пример вывода

❯ kubectl apply -f .\deployment.yaml
deployment.apps/test-react-app created
service/test-react-app created
Проверьте, работают ли стручки

Убедитесь, что все модули запущены с помощью kubectl get pods

❯ kubectl get pods
NAME READY STATUS RESTARTS AGE
test-react-app-9bf9cbcdb-h9zvj 1/1 Running 0 12s

Доступ к приложению React

Поиск URL-адреса службы

Мы используем, minikube чтобы узнать URL-адрес службы для развернутого приложения react.

minikube service test-react-app --url

Пример вывода

❯ minikube service test-react-app --url
🏃 Starting tunnel for service test-react-app.
|-----------|----------------|-------------|------------------------|
| NAMESPACE | NAME | TARGET PORT | URL |
|-----------|----------------|-------------|------------------------|
| default | test-react-app | | http://127.0.0.1:62352 |
|-----------|----------------|-------------|------------------------|
http://127.0.0.1:62352
❗ Because you are using a Docker driver on windows, the terminal needs to be open to run it.

Откройте приложение в браузере

реагировать-приложение-работает-на-k8s.png

Локальная панель управления Kubernetes

В то же время мы можем видеть результаты выполнения любых kubectl команд в локальной панели управления kubernetes.

minikube dashboard

Пример вывода

❯ minikube dashboard
🔌 Enabling dashboard ...
    ▪ Using image kubernetesui/dashboard:v2.1.0
    ▪ Using image kubernetesui/metrics-scraper:v1.0.4
🤔 Verifying dashboard health ...
🚀 Launching proxy ...
🤔 Verifying proxy health ...
🎉 Opening http://127.0.0.1:56135/api/v1/namespaces/kubernetes-dashboard/services/http:kubernetes-dashboard:/proxy/ in your default browser...

откроет панель в новой вкладке

minikube_dashboard.png

Очистка

Очистите deploymentи service, используя следующую команду

kubectl delete -f .\deployment.yaml

Закройте minikube (локальный кластер k8s) и удалите

minikube stop
minikube delete
+1
0
+1
0
+1
0
+1
0
+1
0
Просмотры: 855

Похожие записи

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *