使用 Docker 通过 kubernetes 部署 React 应用程序

Posted 2023-03-07

【中文标题】使用 Docker 通过 kubernetes 部署 React 应用程序

【英文标题】：Deploy React app throught kubernetes with Docker

【发布时间】：2021-04-01 14:30:36

【问题描述】：

晚上好，首先，对不起，如果我不尊重所有 *** 代码，这是我第一次发布我的问题。

对于一个项目，我开发了一个带有节点服务器和 React 客户端的应用程序，但在 Kubernetes 上部署 react 时遇到了一些问题。

经过多次研究，我了解到要使用 react docker，我必须以交互模式启动 docker，并带有标志 -it。 所以这里是我用来 dockersize 我的前面的查询。

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 时遇到了一些问题。我无法在交互模式下使用容器启动 Pod，我尝试了几种方法，但这是我的最后一种：

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 /

你知道如何解决这个问题吗？ 谢谢， 晚上好/每天

【问题讨论】：

在容器中执行命令时使用交互模式。它仅用于附加容器，您不需要stdin、tty 或args。一旦 pod 启动并运行，您就可以使用 kubectl exec -it POD_NAME -- /bin/bash 启动一个 shell。

感谢@tentative，但我什至无法让吊舱处于运行状态。我陷入了CrashLoopBackOff 状态。

使用kubectl describe pod front-76998f6794-xx这个命令检查事件或使用kubectl logs front-76998f6794-xx查看日志

你能把你的图片的react-scripts start入口点设为myRep/do_front吗？

【参考方案1】：

-i 和-t 是docker run 的特定选项；它们对应于 stdin_open: true 和 tty: true Kubernetes pod 设置。您无需在args: 中重复它们。

Kubernetes args: 设置实际上替换了 Dockerfile 中的 CMD（有点令人困惑，Kubernetes command: 替换了 Docker ENTRYPOINT），所以当你提供 args: ['-it'] 时，你实际上覆盖了容器尝试的命令跑步。如果您在docker run 命令中错误地将-it 选项放在图像名称之后而不是之前，您应该会看到同样的错误。

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

【参考方案2】：

看看我的 Dockerfile 产品：

这样，我使用节点构建，然后使用 nginx 来提供 html、css 和静态 javascript。这是反应构建的结果：

# 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

【讨论】：

我可以从我的入口规则路由这个 nginx/前端容器吗？我对我的入口使用 nginx 而现在这个前端 docker 也有点困惑？

NGINX 是一个代理，所以自然要让它控制入口。尽管如此，使用它来提供静态文件也是正常的。所以是的，你有 nginx ingress 并且还提供静态文件！

【参考方案3】：

我不确定您是否将其作为测试。但是您部署前端的方式并不是最佳实践。通常要部署一个 React 应用程序，您首先构建它，然后您可以使用 nginx 等服务器提供这些静态文件。这样您就不必在容器中运行任何命令。 您要做的是将构建的文件复制到 nginx 容器中，然后它可以在其中提供它们。 主要原因是构建的应用程序性能更高，并且您避免了整个开发工具链不必要地运行。这里有更多信息：https://create-react-app.dev/docs/production-build/

【讨论】：

好的，谢谢！我会寻找类似的东西！