前端理解CI/CD

用户3778711322114
425 阅读3分钟

image.png

docker打包

分布构建利用docker的构建镜像的缓存，缓存node_modules，减少依赖的在代码的变动，依赖没有变动的时候重新下载依赖

# 基础镜像选择，这里以 Node.js 镜像为例
FROM node:18 AS builder
# 设置工作目录
WORKDIR /app
# 将本地项目文件复制到容器内
COPY ./package.json /app
# 安装项目依赖
RUN npm install
FROM node:18 AS app
# 打包前端项目
WORKDIR /app
COPY --from=builder /app/node_modules ./node_modules
COPY . /app
RUN npm run build
# 使用 Nginx 官方镜像
FROM nginx:latest
# 删除 Nginx 默认的 html 目录内容
RUN rm -rf /usr/share/nginx/html/*
# 复制打包后的前端项目到 Nginx 目录
COPY --from=app /app/dist /usr/share/nginx/html
# 可以根据需要调整 Nginx 配置文件，如果需要自定义配置
# COPY nginx.conf /etc/nginx/nginx.conf

k8s部署

权限只要得到k8s的kubeconfig文件后使用在自己的电脑端安装kubectl使用 kubectl --kubeconfig /custom/path/kube.config

一、前提条件

非覆盖式打包

  1. 版本号管理实现非覆盖式更新

    • 手动管理版本号：

      • 可以在项目的package.json或者单独的配置文件中定义一个版本号。例如，在package.json中添加"myAppVersion": "1.0.0"。
      • 然后在 Vite 的配置文件vite.config.js中，修改输出文件名以包含版本号。例如：
import { defineConfig } from 'vite';
const packageJson = require('./package.json');

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                entryFileNames: `[name].${packageJson.myAppVersion}.js`,
                assetFileNames: `[name].${packageJson.myAppVersion}.[ext]`,
            },
        },
    },
});

  • 当需要更新时，手动修改package.json中的myAppVersion字段，如改为1.0.1，这样每次打包后的文件名都会带有不同的版本号，不会覆盖之前的文件。防止发版后造成的异步加载的老资源出现404的问题，过一段时间手动清理

  • 自定义目录结构和版本管理：

    • 可以创建一个更复杂的目录结构来管理打包文件。例如，按照版本号创建目录，并且在每个版本目录下再按照文件类型等进行分类。首先，在vite.config.js中配置如下：
import { defineConfig } from 'vite';
const packageJson = require('./package.json');

export default defineConfig({
    build: {
        outDir: `dist/${packageJson.myAppVersion}/assets`,
    },
});
  • 然后，当更新版本号后，打包文件会存放在新的版本目录下，不会覆盖之前版本的文件。可以结合服务器端的配置来正确地引用这些文件，例如，在服务器端根据请求的版本号来提供相应目录下的文件。
  1. 已安装并配置好 Kubernetes 集群，包括 Master 节点和 Worker 节点。可以通过多种方式安装，如 kubeadm、minikube 等。以 kubeadm 为例，它可以方便地在物理机或虚拟机上搭建集群，并且需要确保网络插件（如 Calico、Flannel）已正确安装，用于容器之间的网络通信。
  2. 已在本地或可以访问的镜像仓库中有 Nginx 镜像。可以从官方镜像仓库（如 Docker Hub）拉取 Nginx 镜像，命令为docker pull nginx。如果使用私有镜像仓库，需要配置好相关的认证信息，使 Kubernetes 集群能够访问，一般前端只需要在意创建Deployment的流程后续还有创建service,ingress等等

二、创建 Deployment（部署）对象

  1. 编写 Deployment 的 YAML 文件

    • 创建一个名为nginx - deployment.yaml的文件，内容类似如下：
    • apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx - deployment
  labels:
    app: nginx
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:latest
        ports:
        - containerPort: 80

可以使用命令kubectl set image deployment/nginx - deployment nginx = nginx:1.25。kubectl rollout undo来回滚镜像

avatar
文章
阅读
粉丝