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

Это будет короткая статья о том, как запустить приложение Create React на k8s.

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

Создайте приложение React · Настройте современное веб-приложение, выполнив одну команду.
Вам не нужно изучать и настраивать множество инструментов сборки. Мгновенные перезагрузки помогут вам сосредоточиться на разработке. Когда придет время…create-react-app.dev

Если вы не знакомы, это удивительный инструмент, позволяющий создавать и разрабатывать прогрессивные веб-приложения, не зная, как что-то работает. Давайте будем честными, никто не знает, как работает Webpack, и когда вы думаете, что знаете, через 5 минут появляется новый плагин или лучший способ его использования.

Если вы использовали его раньше, он немного изменился за последние месяцы. Я, наконец, удалил все свои PWA, чтобы использовать его, что было непросто, но теперь все просто работает.

Вы можете использовать npx, если хотите, но я, кажется, использую create-react-app так часто, что быстрее установить его локально. Просто запустите create-react-app my-pwa и все готово.

k8s для всего

Около года назад я принял k8s для всего. Я думаю, что это удивительный инструмент. Я хотел запустить его локально, чтобы лучше имитировать мой кластер k8s.

Вот ссылка на локальный запуск k8s и helm

Локальная разработка Kubernetes
В этом блоге я хочу помочь людям разрабатывать Kubernetes локально. Вы должны быть в состоянии перейти от ничего к полноценному…medium.com

Я написал это сам и с тех пор не проверял microk8s, но шаги все еще работают для меня.

Я предполагаю, что вы либо настроили вышеуказанное, либо имеете что-то подобное. Я уверен, что вы сможете заполнить пробелы по мере продвижения следующих шагов. Важная часть заключается в том, что у вас есть локальный реестр и том, настроенный в вашем кластере на локальную файловую систему, для меня объем равен /home/$USER/Projects:/projects, но вы, вероятно, можете заполнить пробелы для вашей локальной настройки.

Запустите локальную разработку

НЕ ЗАБУДЬТЕ обновить package.json на homepage, например, значение равно /my-pwa.

Обычно вы бы запускали npm start, а затем пашете. Это до тех пор, пока вы не упретесь в стену на CORS. У меня есть много микросервисов, которые все работают на k8s, так что это проблема для меня почти сразу. Итак, давайте запустим приложение в k8s локально, тогда вам больше никогда не придется беспокоиться о CORS.

Предположение: все эти микросервисы работают в одном домене. Вот это http://localhost:8080

Оказывается, это очень легко сделать. Просто запустите kubectl apply my-pwa.local.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: my-pwa-local
  labels:
    app: my-pwa-local
spec:
  selector:
    matchLabels:
      app: my-pwa-local
  template:
    metadata:
      labels:
        app: my-pwa-local
    spec:
      containers:
        - name: my-pwa-local
          image: node:latest
          imagePullPolicy: IfNotPresent
          workingDir: /usr/src/app
          command:
            - "/bin/sh"
            - "-c"
          args:
            - "npm i && CI=true npm start"
          ports:
            - name: http
              containerPort: 3000
          volumeMounts:
            - mountPath: /usr/src/app
              name: my-pwa-local
      volumes:
        - name: my-pwa-local
          hostPath:
            path: /projects/my-pwa
            type: Directory
---
apiVersion: v1
kind: Service
metadata:
  name: my-pwa-local-service
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: http
  selector:
    app: my-pwa-local
  type: NodePort
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: my-pwa-local-ingress
  annotations:
    nginx.ingress.kubernetes.io/proxy-body-size: 50g
    nginx.ingress.kubernetes.io/proxy-buffering: "off"
    nginx.ingress.kubernetes.io/proxy-request-buffering: "off"
spec:
  rules:
    - http:
      paths:
        - path: /my-pwa
          backend:
            serviceName: my-pwa-local-service
            servicePort: 80
        - path: /sockjs-node
          backend:
          serviceName: my-pwa-local-service
          servicePort: 80

Теперь вы можете перейти на http://localhost:8080/my-pwa-local, и ваше приложение для разработки будет запущено с горячей перезагрузкой.

Это так приятно, когда это просто работает.

Альтернатива

Я предвосхищаю некоторые комментарии. Вы можете настроить NGINX в качестве прокси на вашем локальном компьютере. Это совершенно прекрасное решение. Затем вы можете запустить npm start, и все будет работать нормально. Раньше я делал это с помощью docker-compose, и это было довольно хорошо.

Однако k3s поставляется с входом, который делает это за вас. Все локальные решения k8s, которые я нашел, также поставляются с входом, так что вам не нужно делать что-то подобное самостоятельно.

Другая причина, по которой вы это сделаете, заключается в том, что вы можете протестировать свое производственное приложение локально в среде, подобной той, в которой вы будете развертывать, которую локальный NGINX может не предложить.

Разверните производственное приложение на k8s

Развернуть PWA невероятно просто.

Выполнить npm run build
Создайте Dockerfile в /home/$USER/Projects/my-pwa

FROM nginx:1.17.3-alpine
WORKDIR /usr/share/nginx/html
COPY build /usr/share/nginx/html/docs

3. Создайте и разверните в своем реестре

docker build -t my-pwa /home/$USER/Projects/my-pwa
docker tag my-pwa:latest registry.local:5000/my-pwa
docker push registry.local:5000/my-pwa

4. запустить kubectl apply my-pwa.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
name: my-pwa
labels:
  app: my-pwa
spec:
  selector
    matchLabels:
      app: my-pwa
  template:
    metadata:
      labels:
        app: my-pwa
    spec:
      containers:
      - name: my-pwa
        image: registry.local:5000/my-pwa
        imagePullPolicy: Always
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: my-pwa-service
spec:
  ports:
  - port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: my-pwa
  type: NodePort
---
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: my-pwa-ingress
  annotations:
    nginx.ingress.kubernetes.io/proxy-body-size: 50g
    nginx.ingress.kubernetes.io/proxy-buffering: "off"
    nginx.ingress.kubernetes.io/proxy-request-buffering: "off"
spec:
  rules:
    - http:
      paths:
        - path: /my-pwa
          backend:
            serviceName: my-pwa-service
            servicePort: 80

Теперь перейдите по адресу http://localhost:8080/my-pwa, и ваше производственное приложение будет работать в рабочей среде, что значительно упрощает отладку и тестирование, чем развертывание в реальной среде.

Вот собственно и все, проще не бывает.

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