Развертывание приложения React через kubernetes с помощью Docker

#node.js #reactjs #docker #kubernetes

#node.js #reactjs #docker #kubernetes

Вопрос:

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

Для проекта я разработал приложение с узловым сервером и клиентом React, и у меня возникли некоторые проблемы с развертыванием react в Kubernetes.

После нескольких исследований я узнал, что для использования react docker мне нужно было запустить docker в интерактивном режиме с флагом -it . Итак, вот запросы, которые я использую для настройки своего интерфейса.

 docker build -t front-end .   
docker run -it -p 3000:3000 -d front-end 
 

И вот файл dockerfile.

 FROM node:12-slim

ENV NODE_ENV production

WORKDIR /usr/src/app/front-end

COPY ./package.json ./

RUN npm install 

COPY . . 

EXPOSE 3000

CMD ["npm", "start"]
 

В приложении docker эта настройка работает правильно. Однако у меня возникают некоторые проблемы при использовании Kubernetes. Я не могу запускать модули с контейнером в интерактивном режиме, я попробовал несколько методов, но вот мой последний:

 apiVersion: apps/v1
kind: Deployment
metadata: 
  name: front
spec:
  replicas: 1
  selector: 
    matchLabels: 
      app: webapps-front-test
      version: v01
  template:
    metadata:
      labels:
        app: webapps-front-test
        version: v01
    spec:
      volumes:
      containers:
      - name: front
        image: myRep/do_front
        stdin: true
        tty: true
        ports: 
        - containerPort: 3000
        args:
        - "-it"
 

Редактировать :
Это происходит в kubernetes :

 kubectl get pods                                                                                                                                  
NAME                     READY   STATUS             RESTARTS   AGE
front-76998f6794-xx  0/1     CrashLoopBackOff   11         33m
 

Это происходит, когда я запускаю docker (что не является проблемой с момента использования -it )

 > react-scripts start


ℹ 「wds」: Project is running at http://1xx.x.x.x/

ℹ 「wds」: webpack output is served from

ℹ 「wds」: Content not from webpack is served from /usr/src/app/front-end/public

ℹ 「wds」: 404s will fallback to /
 

Вы знаете, как решить эту проблему?
Спасибо,
добрый вечер / день

Комментарии:

1. Интерактивный режим используется при выполнении команды в контейнере. Он используется только для прикрепления контейнера, и вам не нужно stdin , tty или args для этого. После того, как модуль запущен и запущен, вы можете запустить оболочку kubectl exec -it POD_NAME -- /bin/bash .

2. спасибо @tentative, но я даже не могу получить модуль в рабочем состоянии. Я застрял в CrashLoopBackOff статусе.

3. Проверьте события с помощью этой команды kubectl describe pod front-76998f6794-xx или журналы с помощью kubectl logs front-76998f6794-xx

4. Можете ли вы сделать react-scripts start точку входа в свой образ myRep / do_front?

Ответ №1:

-i и -t являются конкретными параметрами docker run ; они соответствуют stdin_open: true настройкам модуля и tty: true Kubernetes. Вам не нужно повторять их args: .

Параметр Kubernetes args: фактически заменяет CMD в вашем Dockerfile (что несколько сбивает с толку, Kubernetes command: заменяет Docker ENTRYPOINT ), поэтому, когда вы предоставляете args: ['-it'] , вы фактически перезаписываете команду, которую пытается запустить контейнер. Вы должны увидеть ту же ошибку, что и в случае, если вы неправильно указали -it параметр после имени изображения, а не перед ним в docker run команде.

 stdin: true  # docker run -i
tty: true    # docker run -t
# args: ...  # docker run <image-name> arg1 arg2
 

Ответ №2:

посмотрите на мой файл Dockerfile:

Таким образом, я использую узел для сборки, а затем nginx для обслуживания html, css и статического javascript. Что является результатом сборки react:

 # Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM node:12 as build-stage

WORKDIR /app
COPY package*.json /app/

RUN npm install
COPY ./ /app/

RUN npm run build


# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15

COPY --from=build-stage /app/build/ /usr/share/nginx/html
# Copy the default nginx.conf provided by tiangolo/node-frontend
#COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf
 

Комментарии:

1. Могу ли я затем перенаправить этот контейнер nginx / frontend из моих правил входа? Я немного смущен тем фактом, что мой ingress использует nginx, а теперь и этот интерфейс docker?

2. NGINX — это прокси, поэтому естественно, что он контролирует вход. Тем не менее, также нормально использовать его для обслуживания статических файлов. Так что да, у вас есть nginx в ingress, а также для обслуживания статических файлов!

Ответ №3:

Я не уверен, делаете ли вы это в качестве теста. Но способ развертывания интерфейса не является лучшей практикой. Обычно для развертывания приложения react вы сначала создаете его, а затем можете обслуживать эти статические файлы с помощью сервера, такого как nginx. Таким образом, вам не нужно запускать какие-либо команды в контейнере. Вместо этого вы бы скопировали встроенные файлы в контейнер nginx, где он затем может их обслуживать. Основная причина этого заключается в том, что созданное приложение намного более производительно, и вы избегаете ненужного запуска всей цепочки инструментов разработки.Вот дополнительная информация: https://create-react-app.dev/docs/production-build/

Комментарии:

1. Хорошо, спасибо! Я буду искать что-то подобное!