Блог Лаборатории

Мультидоменный React в Kubernetes

В предыдущей статье мы автоматизировали создание сертификатов в Kubernetes с помощью cert-manager, ingress и Let’s encrypt. Мы также настроили cert-manager на работу с wildcard сертификатом.
В этой статье пойдем глубже в кроличью нору и настроим приложение на React в Kubernetes на работу с несколькими доменами. Это удобно, если вы хотите показывать определенный набор данных в зависимости от субдомена. Например, каждый пользователь получает свой домен или же для каждого города вы выводите релевантную информацию.
Чтобы все получилось, вам будет желательно повторить настройки cert-manager из предыдущей статьи. Так вы получите валидный TLS сертификат.
Наша цель:
  1. Запустить приложение в Kubernetes
  2. Приложение должно
  3. Открываться по любому домену из *.myreact.l3k.io
  4. Выводить на экран субдомен
  5. Например, для supertest.myreact.l3k.io мы должны увидеть supertest.
  6. Каждый домен имеет валидный сертификат
Все файлы из этой статьи доступны в этом git репозитории.

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

Директория и само приложение:
% mkdir k8s-react-multidomain && cd k8s-react-multidomain
% npx create-react-app k8s-react-multidomain
...
We suggest that you begin by typing:

  cd k8s-react-multidomain
  npm start

Happy hacking!

Учим его работать с несколькими доменами

Итак, нам теперь нужно, чтобы приложение выводило субдомен на экран. 
function App() {
 const url = window.location.href;
 const subdomain = url.split(".")[0].split("//")[1];

 return (
   <div className="App">
     <span>{subdomain}</span>
   </div>
 );
}

export default App;
const subdomain = url.split(".")[0].split("//")[1]; - выкусывает нужный субдомен.
В случае если вы запустите приложение через npm start, то на экране увидите
localhost:3000/

Приложение в docker

Чтобы запустить приложение в Kubernetes, нужно его “докеризировать” - положить в контейнер. Чтобы это сделать необходимы два важных файла: Dockerfile и .dockerignore.
  • Dockerfile - набор команд, который соберет образ контейнера
  • .dockerignore - файлы и директории, которые не нужны в образе.
Файлы создаются в корневой директории ReactJS проекта. В .dockerignore указываем все лишнее:
npm-debug.log
.dockerignore
**/.git
**/.DS_Store
**/node_modules
В Dockerfile:
# Стянуть последний alpine linux
FROM node:alpine AS builder
# Выставить env
ENV NODE_ENV production
# Любая директория для приложения
WORKDIR /app
# Установить npm зависимости
COPY ./package.json ./
RUN npm install
# Скопировать файлы
COPY . .
# Собрать приложение
RUN npm run build
# Стянуть последний nginx 
FROM nginx
# Скопировать что собрали
COPY --from=builder /app/build /usr/share/nginx/html
# Скопировать nginx.com (см в репе)
COPY nginx.conf /etc/nginx/conf.d/default.conf
Сначала, билдим React приложение. Потом складываем его в nginx. Можно было бы обойтись и без nginx, но он сильно уменьшает размер конечного образа.
Собираем образ:
docker build -t myreact:1.0 .
Можно проверить и запустить контейнер локально:
docker run -d -p 3000:80 --name react myreact:1.0
Попробуем обратиться к странице:
curl http://127.0.0.1:3000
...
<title>React App</title><script defer="defer" src="/static/js/main.753507f7.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript>
Все работает.
Вы можете загрузить образ в docker hub или другой контейнерный реестр (например, Yandex Container Registry). Вот как это выглядело у меня для docker hub:
docker tag 9428b361d428 spl3k/myreact:1.0
docker push spl3k/myreact:1.0
Вот образ, который я создал выше: https://hub.docker.com/r/spl3k/myreact

Оборачиваем все в Kubernetes

Мы считаем, что ingress и прочие компоненты уже настроены по инструкции из предыдущей статьи.
Поэтому все что нам остается, это развернуть React приложение и создать ingress ресурс.
YAML манифест для приложения и ingress:
Применяем их друг за другом:
$ kubectl apply -f 00-react.yaml
$ kubectl apply -f 01-ingress.yaml
Если попробовать открыть приложение в браузере (например, http://supertest.myreact.l3k.io), то увидим на странице supertest. Теперь приложение может выводить контент специфичный для данного субдомена. Все зависит от вашей фантазии.
Для упрощения и укорачивания статьи, мы не будем описывать добавление HTTPs. Смотрите предыдущую статью.

Заключение

В конечном итоге, настройка многодоменного приложения на React в Кубернетес является мощным инструментом для предоставления пользовательского контента на основе субдомена. Это руководство не только показывает, как настроить приложение для работы с несколькими доменами, но и подчеркивает важность безопасности с помощью TLS сертификатов. Теперь у вас есть знания и инструменты для создания гибких и безопасных веб-приложений в современной инфраструктуре.
Все еще не получается? Мы здесь, мы поможем.
2024-03-10 23:57