如何使用 Argo CD 实现 Vue 3 应用在 Kubernetes 上的自动化持续部署？

当 Vue 3 项目从本地开发走向生产环境，部署环节往往成为最容易出问题的部分。手动执行 npm run build、构建镜像、推送仓库、再 kubectl apply 更新集群，这一套流程繁琐且容易遗漏。更麻烦的是，如果有人直接在线上修改了 Deployment 配置，集群实际状态就会与代码仓库脱节，产生所谓的配置漂移。Argo CD 正是为解决这类问题而生的 GitOps 持续部署工具，它以 Git 仓库作为部署状态的唯一事实来源，让整个交付过程变得可审计、可回滚、可观测。

一、理解 GitOps 与 Argo CD 的核心原理

GitOps 的核心思想是声明式部署：你不再通过命令行手动改变集群状态，而是在 Git 仓库中维护一份描述期望状态的配置文件，由自动化工具负责把集群的实际状态收敛到期望状态。Argo CD 就是这个收敛过程的执行者，它部署在 Kubernetes 集群内部，持续监听 Git 仓库的变化。

Argo CD 的工作流程可以概括为三步。首先，它定期拉取 Git 仓库中指定的应用配置；其次，它对比 Git 中的期望状态与集群的实时状态，计算出差异；最后，根据配置的同步策略，自动或手动将差异同步到集群。这个过程在 Argo CD 的 UI 界面上有非常直观的可视化展示，每个资源的实时状态、健康状态一目了然。

对于 Vue 3 前端项目来说，这套机制尤其合适。前端应用通常构建为静态资源后由 Nginx 托管，最终产物就是一个容器镜像。我们可以把镜像版本号写入 Git 中的 Kubernetes 清单文件，Argo CD 检测到版本变化后自动拉取新镜像并执行滚动更新，整条链路无需任何人工干预。

二、为 Vue 3 项目准备容器化与 Kubernetes 清单

要让 Argo CD 部署 Vue 3 应用，第一步是构建容器镜像。推荐使用多阶段构建：第一阶段使用 Node 环境安装依赖并执行构建，第二阶段把产物复制到轻量的 Nginx 镜像中，最终镜像体积可以控制在几十兆以内。

# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

其中 nginx.conf 需要特别处理 Vue Router 的 history 路由模式，把所有未匹配的路径重定向到 index.html：

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

第二步是编写 Kubernetes 清单。建议创建一个独立的部署仓库（例如 deploy-repo），存放 Deployment、Service 和 Ingress 的 YAML 文件。这里的关键技巧是：镜像 tag 不要写死为 latest，而是使用具体的版本号或 Git commit 哈希，这样才能让 Argo CD 感知到变化并触发更新。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: vue3-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: vue3-app
  template:
    metadata:
      labels:
        app: vue3-app
    spec:
      containers:
        - name: vue3-app
          image: registry.ipipp.com/myteam/vue3-app:1.2.0
          ports:
            - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: vue3-app
spec:
  selector:
    app: vue3-app
  ports:
    - port: 80
      targetPort: 80

三、安装 Argo CD 并创建应用实现自动同步

Argo CD 的安装非常简单，直接在集群中创建一个独立的命名空间并应用官方安装清单即可。官方安装源使用 argo-cd 命名空间部署，包含 API Server、Repository Server 和 Application Controller 三个核心组件，它们分别负责 API 交互、Git 仓库连接和状态协调。

kubectl create namespace argocd
kubectl apply -n argocd -f https://raw.githubusercontent.com/argoproj/argo-cd/stable/manifests/install.yaml

# 获取初始管理员密码
kubectl -n argocd get secret argocd-initial-admin-secret \
  -o jsonpath="{.data.password}" | base64 -d

# 端口转发访问 UI
kubectl port-forward svc/argocd-server -n argocd 8080:443

安装完成后有两种方式创建应用：通过 Web UI 操作，或者使用声明式的 Application 资源。更符合 GitOps 精神的是后者——把 Argo CD 的应用定义本身也放进 Git 仓库。下面是一个完整的应用定义，指定了 Git 仓库地址、目标分支、部署路径和同步策略。

apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: vue3-app
  namespace: argocd
spec:
  project: default
  source:
    repoURL: https://git.ipipp.com/myteam/deploy-repo.git
    targetRevision: main
    path: overlays/production
  destination:
    server: https://kubernetes.default.svc
    namespace: production
  syncPolicy:
    automated:
      prune: true
      selfHeal: true
    syncOptions:
      - CreateNamespace=true

其中几个配置项值得重点关注：automated 表示开启自动同步，Git 变更后无需人工点击同步按钮；prune 表示 Git 中删除的资源在集群中也会被删除；selfHeal 则是防漂移的关键，一旦有人手动修改了集群资源，Argo CD 会自动把它纠正回 Git 定义的版本。这三个选项组合起来，保证了 Git 仓库的绝对权威性。

四、打通完整流水线与多环境回滚策略

Argo CD 本身只负责部署阶段，镜像构建通常交给 CI 工具（如 GitLab CI、GitHub Actions）完成。推荐的流水线编排是：CI 阶段构建 Vue 3 项目、打包镜像并推送，随后使用 image updater 或 CI 脚本修改部署仓库中的镜像版本号并提交。这个提交动作就是整个部署的触发点，Argo CD 会在轮询间隔内感知到变更并自动同步。

# GitLab CI 示例：构建镜像并更新部署仓库
deploy:
  stage: deploy
  script:
    - docker build -t registry.ipipp.com/myteam/vue3-app:$CI_COMMIT_SHORT_SHA .
    - docker push registry.ipipp.com/myteam/vue3-app:$CI_COMMIT_SHORT_SHA
    # 更新部署仓库中的镜像版本
    - git clone https://oauth2:$TOKEN@git.ipipp.com/myteam/deploy-repo.git
    - cd deploy-repo
    - sed -i "s|vue3-app:.*|vue3-app:$CI_COMMIT_SHORT_SHA|" overlays/production/deployment-patch.yaml
    - git commit -am "release $CI_COMMIT_SHORT_SHA"
    - git push
  only:
    - main

多环境管理推荐使用 Kustomize 的 base 与 overlays 结构。base 目录存放通用的部署配置，overlays/production 与 overlays/staging 分别存放各环境的差异部分，比如副本数、域名、资源限制。每个环境对应一个独立的 Argo CD Application，指向不同的 path，这样测试环境与生产环境可以各自独立演进，互不干扰。

回滚是 Argo CD 的一大亮点。由于每次部署都对应部署仓库中的一次 Git 提交，回滚操作就是 git revert 一次版本提交，Argo CD 会自动把集群状态恢复到历史版本。也可以直接在 UI 界面的 History 中选择任意历史版本点击 Rollback，整个过程秒级完成，比传统的重新触发一次完整构建快得多。

最后补充几个实践建议：为私有镜像仓库配置 imagePullSecrets；在 Ingress 中配置 TLS 证书与域名；通过 Argo CD 的 Projects 功能隔离不同团队的权限；对生产环境可以考虑将自动同步改为手动审批模式，在自动化速度与变更安全之间取得平衡。搭建好这套流程后，Vue 3 项目的发布就从一系列手工操作变成了一个简单的 Git 提交动作，团队效率与部署可靠性都会显著提升。

Argo CDGitOpsKubernetes持续部署Vue 3修改时间：2026-08-31 12:16:35