Как развернуть приложение React.js в Kubernetes с помощью Docker.

Полное руководство по развертыванию приложений React в Kubernetes.

Kubernetes (также сокращенно K8S, где 8 означает 8 букв между K и S) — это система с открытым исходным кодом, которая упрощает и ускоряет развертывание, масштабирование и управление контейнерными приложениями.

В этом руководстве вы узнаете, как развернуть приложение React.js в Kubernetes с помощью Docker и Minikube.

Предпосылки

Чтобы правильно выполнить шаги, описанные в этом руководстве, на вашем компьютере должно быть несколько вещей.

Вам необходимо установить LTS-версию Node.js.
Вам также необходимо установить Docker, а также создать учетную запись Docker Hub.
Вам необходимо установить Minikube. Minikube поможет вам создать кластеры Kubernetes. Следуйте инструкциям здесь, чтобы установить и настроить minikube на вашем компьютере.

4. Вам также необходимо взаимодействовать с кластерами Kubernetes локально на вашем компьютере, для этого вам нужно будет установить Kubectl. Kubectl — это инструмент командной строки Kubernetes, который вы можете использовать для запуска команд для взаимодействия с вашим компьютером. Кластер Kubernetes и развертывание, проверка и отладка кластера Kubernetes. следуйте инструкциям здесь, чтобы установить Kubectl на свой компьютер.

Контур

Настройте проект React.js
Настройте и запустите образ Docker.
Разверните образ Docker в Kubernetes
Заключение

Настройте проект React.js

В этом разделе вы создадите простой проект React.js с помощью инструмента vite. Вы можете использовать инструмент create-react-app, но в этом примере я буду использовать vite, потому что он быстрее.

Создайте папку для своего проекта и перейдите в каталог папки на терминале. Затем выполните команду ниже:

npm create vite

Это предложит вам выбрать имя для вашего проекта. Вы можете использовать любое имя, которое вам нравится, но я выбрал React-Kubernetes в качестве названия для этого проекта. Вам также будет предложено выбрать имя пакета для вашего проекта.

Затем вам будет предложено выбрать тип проекта. Прокрутите вниз до React и нажмите Enter. Наконец, выберите язык для своего проекта, выберите JavaScript и нажмите Enter. Это создаст проект React внутри каталога вашего проекта.

Наконец, вам нужно установить все пакеты, необходимые для запуска вашего приложения React, поэтому выполните команду ниже:

#move into your react project folder.
cd React-Kubernetes

#install dependencies and packages to your React-Project
npm install

В настоящее время у вас есть работающий проект React. Чтобы протестировать новый проект, выполните следующую команду:

#run your application.
npm run dev

Это откроет ваше приложение http://localhost:5173, и вы сможете просмотреть его в любом браузере по вашему выбору.

Теперь у вас есть работающий проект React.js.

Настройка и запуск образа Docker

В этом разделе вы создадите образ докера для вашего проекта React.js, который вы только что создали. Затем запустите образ докера с помощью nginx. В этом разделе есть три шага, а именно:

Создайте и настройте файл `Dockerfile`:

Файл Dockerfile — это файл без расширения. Файл Dockerfile не нуждается в каком-либо расширении, чтобы указать его как aDockerfile. Вы можете просто создать Dockerfile, вызвав простой текстовый файл Dockerfile. Инструкции, которые создадут образ Docker и настроят среду для вашего контейнера Docker, будут написаны внутри Dockerfile file. Таким образом, в корне каталог вашего проекта React.js, создайте файл a Dockerfile следующим образом:

Вы можете продолжить и добавить следующие инструкции в свой файл Dockerfile.

Первая инструкция вашего файла Dockerfile установит образ Node.js из концентратора Docker в качестве базового образа вашего приложения. Поскольку приложения React.js работают на Node.js, вы должны предоставить образ node.js, где он будет работать Docker,, добавив следующий код в файл your Dockerfile:

# Set the base image to build from 
FROM node:alpine

Следующая инструкция, которую вы добавите в файл your Dockerfile, создаст рабочий каталог. Этот каталог будет служить папкой Docker, в которой ваше приложение будет работать внутри контейнера. Чтобы создать рабочий каталог, добавьте в файл your Dockerfilefile приведенный ниже код:

# set the working directory
WORKDIR /app

Основываясь на приведенном выше коде, у нас есть две части. Первая часть — это команда WORKDIR, которая представляет собой команду docker для установки рабочего каталога в вашем контейнере (приложении). Затем вторая часть the /app, the /app служит каталогом, который вы хотите сделать рабочим каталогом. Вместе команда установит app как рабочий каталог вашего контейнера докеров.

Если для рабочего каталога задано значение app, следующим шагом будет копирование файлов package.json и package-lock.json в рабочий каталог вашего контейнера с помощью команды docker COPY command.

Добавьте приведенный ниже код в файл your Dockerfile file:

# copy package.json and package-lock.json files
COPY package.json ./
COPY package-lock.json ./

Приведенный выше код скопирует файлы package.json и package-lock.json в рабочий каталог (/app).

Следующая инструкция, которую вы добавите в файл Dockerfile, запустит команду установки, которая установит все зависимости из файлов package.json и package-lock.json в ваш каталог Docker app (рабочий каталог).

Добавьте приведенный ниже код, чтобы включить эту инструкцию в файл your Dockerfile:

# install dependencies
RUN npm install

Команда RUN выполнит команду установки npm и установит все зависимости и пакеты.

Добавьте приведенный ниже код в файл your Dockerfile:

# copy everything to /app directory
COPY ./ ./

Приведенный выше код скопирует все файлы из каталога вашего проекта React.js в каталог вашего приложения Docker.

Наконец, вы должны добавить инструкции, которые будут выполняться при запуске или запуске вашего контейнера. Для этого добавьте в файл your Dockerfile приведенный ниже код:

# run the app
CMD ["npm", "start"]

Ваш код Dockerfile должен выглядеть так, как показано ниже:

# Set the base image to build from 
FROM node:alpine

# set the working directory
WORKDIR /app

# copy package.json and package-lock.json files
COPY package.json ./
COPY package-lock.json ./

# install dependencies
RUN npm install

# copy everything to /app directory
COPY ./ ./

# run the app
CMD ["npm", "start"]

Добавьте инструкции для запуска вашего приложения с помощью Nginx:

На этом шаге вы настроите инструкции, которые будут запускать ваш скрипт Dockerfile с помощью Nginx. Nginx (произносится как engine-X) — это обратный прокси-сервер с открытым исходным кодом для протоколов HTTP, HTTPS, SMTP, POP3 и IMAP, который обслуживает веб-приложения с помощью Docker и создает облегченные образы для минимизации объема памяти.

Чтобы использовать Nginx, вы должны запустить приложение React.js в рабочем режиме и создать рабочую кодовую базу. Запустите приведенную ниже команду в каталоге вашего проекта React.js:

npm run build

Приведенная выше команда создаст папку dist в каталоге вашего проекта React.js, если вы используете инструмент vite при создании приложения React.js.

Теперь вы можете добавить следующий код в your Dockerfile, чтобы запустить приложение Docker с помощью Nginx:

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html

Создайте образ Docker для вашего приложения React:

На этом шаге вы создадите образ Docker для своего приложения React.js. В каталоге вашего проекта React.js выполните следующую команду:

docker build -t <image-name> < Dockerfile filepath>

<image-name> — это имя, которое вы хотите дать своему образу Docker, а <Dockerfile filepath> — это расположение вашего файла Dockerfile в вашем проекте, который в данном случае находится в корневом каталоге вашего проекта. Я также решил назвать свой образ Docker react-kubernetes-app., поэтому ваша команда должна выглядеть так, как показано ниже.

docker build -t react-kubernetes-app .

"." в конце команды представляет путь Dockerfile

Приведенный выше код создаст образ Docker с инструкциями, которые вы передали в the Dockerfile, где имя образа Docker будет react-kubernetes-app.. Я выбрал имя react-kubernetes-app в качестве имени образа Docker для этого руководства, но вы можете выбрать любое имя, которое вам подходит. Затем the. в конце указывает путь к файлу для the Dockerfile

После успешного создания образа Docker вы должны увидеть в терминале что-то вроде изображения ниже:

Вы можете проверить, успешно ли создан ваш образ Docker, выполнив следующую команду:

Приведенная выше команда предоставит вам список всех образов Docker, которые у вас есть, и вы должны увидеть что-то вроде приведенного ниже в терминале.

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

docker run -it -p 4000:3000 react-kubernetes-app

где 4000 представляет номер порта для вашего образа Docker, а 3000 представляет номер порта вашего хоста, а react-kubernetes-app — это имя вашего образа Docker. Эта команда вернет идентификатор контейнера на терминал в случае успешного выполнения.

Запуск образов Docker с помощью Kubernetes

На этом этапе вы собираетесь отправить образ Docker, созданный на шаге 3, в реестр Docker. Для этого вам понадобится учетная запись Docker hub. Если у вас нет учетной записи Docker Hub, создайте ее здесь.

В своем терминале в каталоге проекта React.js войдите в свою учетную запись концентратора Docker с помощью следующей команды:

docker login

Это попросит вас указать имя пользователя и пароль вашей учетной записи Docker Hub. Если имя пользователя и пароль, которые вы указали, верны, вы увидите сообщение “Login Succeeded” на своем терминале.

Теперь вы можете создать образ, используя имя пользователя своей учетной записи Docker Hub. Запустите приведенную ниже команду в том же каталоге, что и ваш проект React.js:

docker build -t <docker-hub-username>/react-kubernetes-app .

Замените <docker-hub-username> своим именем пользователя Docker Hub.

docker push <docker-hub-username>/react-app:latest

Не забудьте заменить <docker-hub-username> именем пользователя вашей учетной записи Docker Hub.

Разверните образ Docker в Kubernetes

В этом разделе вы собираетесь развернуть образ Docker, созданный в разделе 2, в кластере Kubernetes. Первым шагом в этом разделе будет создание файла развертывания. В корневом каталоге вашего проекта React.js создайте файл deployment.yaml и добавьте в него следующие конфигурации:

Установите количество pods, которое должно быть в вашем кластере Kubernetes. По умолчанию в вашем кластере Kubernetes должно быть два pods, рабочего и главного модуля. Добавьте приведенный ниже код в файл deployment.yaml, чтобы настроить кластер Kubernetes на 2 модуля:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-kubernetes-app
spec:
  replicas: 2
  selector:
    matchLabels:
     app: react-kubernetes-app
  template:
    metadata:
      labels:
        app: react-kubernetes-app
    spec:
      containers:
      - name: react-kubernetes-app
        image: <docker-hub-username>/react-kubernetes-app:latest
        imagePullPolicy: Always
        resources:
          limits:
            memory: "128Mi"
            cpu: "500m"
        ports:
        - containerPort: 80
---

Основываясь на приведенном выше коде, вы установили имя своего приложения для развертывания на react-kubernetes-app. и установили количество модулей на два. Затем укажите образ, который вы собираетесь использовать при создании своего приложения, то есть образ, который вы отправили в свой докер-хаб. Вы также указали порт, на котором должен работать ваш контейнер, как port 80.

Обратите внимание, что имя вашего образа должно начинаться с вашего имени пользователя Docker Hub, то есть в строке 17, замените <docker-hub-username> на имя пользователя вашей учетной записи Docker Hub.

Затем, наконец, добавьте конфигурацию службы развертывания с помощью приведенного ниже кода:

apiVersion: v1
kind: Service
metadata:
 name: react-kubernetes-app
spec:
  type: NodePort
  selector:
    app: react-kubernetes-app
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
      nodePort: 31000

Собрав все вместе, your deployment.yaml file должен выглядеть так:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: react-kubernetes-app
spec:
  replicas: 2
  selector:
    matchLabels:
     app: react-kubernetes-app
  template:
    metadata:
      labels:
        app: react-kubernetes-app
    spec:
      containers:
      - name: react-kubernetes-app
        image: <docker-hub-username>/react-kubernetes-app:latest
        imagePullPolicy: Always
        resources:
          limits:
            memory: "128Mi"
            cpu: "500m"
        ports:
        - containerPort: 80
---

apiVersion: v1
kind: Service
metadata:
 name: react-kubernetes-app
spec:
  type: NodePort
  selector:
    app: react-kubernetes-app
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
      nodePort: 31000

В терминале запустите код ниже:

minikube start

это запустит Minikube и убедитесь, что он работает и готов к использованию.

Затем используйте приведенный ниже код для развертывания образа докера:

kubectl apply -f deployment.yaml

Это развернет ваш образ докера, используя конфигурации развертывания в файле your deployment.yaml.

Чтобы убедиться, что развертывание образа Docker прошло успешно, запустите приведенный ниже код в терминале.

kubectl get pods

Это покажет вам все модули, которые есть в вашем кластере Kubernetes. Убедитесь, что статус ваших модулей — “Running”..

Если ваши модули находятся в состоянии “Running”,, запустите:

kubectl get service

Затем снова запустите команду kubernetes get pods. Теперь вы можете назначить кластеру Kubernetes статический URL-адрес, который можно использовать для доступа к вашему развернутому приложению в браузере, выполнив следующую команду:

minikube service react-kubernetes-app

Это создаст URL-адрес, который вы сможете использовать для доступа к развернутому приложению Kubernetes в своем браузере. Если вы нажмете на этот URL-адрес, вы сможете увидеть приложение React.js, которое вы развернули в Kubernetes.

Заключение

Kubernetes — отличная система с открытым исходным кодом для автоматизации развертывания, масштабирования и управления контейнерными приложениями. Она группирует контейнеры приложения в логические единицы для удобства управления.

В этом руководстве вы смогли создать и развернуть приложение React.js в Kubernetes с помощью Docker, minikube и kubectl.