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

Question

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

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

经过几项研究，我了解到为了使用反应 docker，我必须使用标志 -it 以交互模式启动-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 /

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

Answer 1

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

The Kubernetes args: setting actually replaces the CMD in your Dockerfile (somewhat confusingly, Kubernetes command: replaces Docker ENTRYPOINT ), so when you provide args: ['-it'] you're actually overwriting the command the container's trying to run. 如果在docker run命令中错误地将-it选项放在图像名称之后而不是之前，您应该会看到相同的错误。

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

Answer 2

看看我的 Dockerfile 产品：

That way, I use the node to build and then nginx to serve html, css and static 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

Answer 3

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