BB-24/devsecops_ci_cd

# Tick-Tac-Toe (React + Vite) 与 DevSecOps CI/CD 一个简单的 **Tick-Tac-Toe** 网页游戏，使用 **React 18** 和 **Vite** 构建，通过 **Docker + Nginx** 打包，并由 **DevSecOps GitHub Actions 流水线**提供安全防护。 ## 包含内容 - **React 18 + Vite** 前端 - **Vitest** + Testing Library 用于单元测试 - **ESLint** 用于静态分析 - **Docker** 容器镜像由 **Nginx** 提供服务 - 位于 `k8s/` 中的 **Kubernetes 清单** - **GitHub Actions CI/CD** 用于构建、扫描、签名和 GitOps 部署 - **DevSecOps 控制**：依赖扫描、密钥扫描、配置扫描、镜像扫描、SBOM 和 Cosign 签名 ## 本地开发 安装依赖并启动 Vite 开发服务器： ``` npm install npm run dev ``` 打开终端中显示的本地 URL。 ## 脚本 - `npm run dev` — 启动开发服务器 - `npm run build` — 将生产文件构建到 `dist/` 目录中 - `npm run lint` — 在代码库上运行 ESLint - `npm test` — 运行 Vitest 测试 - `npm run preview` — 在本地预览生产构建 ## 构建与测试 ``` npm ci npm test npm run lint npm run build ``` ## 使用 Docker 运行 在本地构建并运行容器： ``` docker build -t tic-tac-toe:local . docker run --rm -p 8080:8080 tic-tac-toe:local ``` 然后打开 `http://localhost:8080`。 ## Kubernetes Kubernetes 部署和服务清单存储在 `k8s/` 中。 ``` kubectl apply -f k8s/ ``` ## DevSecOps CI/CD 实现 此代码库演示了一个完整实现的 GitHub Actions 流水线，该流水线将安全视为代码，并通过 GitOps PR 工作流自动执行发布提升。 ### 流水线实现细节 - 流水线源码：`.github/workflows/pipeline.yml` - GitOps 部署工作流：`.github/workflows/gitops-deploy.yml` - 运行时容器：`Dockerfile` - Kubernetes 清单：`k8s/deployment.yaml`、`k8s/service.yaml` ### Job 设计 - **ci** - 在针对 `main` 分支的 `pull_request` 和 `push` 时触发 - 安装 Node.js 20 并缓存依赖项 - 运行 `npm ci`、`npm test`、`npm run lint`、`npm run build` - 使用 `npm audit --audit-level=high` 强制执行依赖安全检查 - 使用 `gitleaks/gitleaks-action` 扫描源码中的密钥 - 使用 `aquasecurity/trivy-action` 的 `config` 模式验证 Kubernetes 清单配置 - **build-and-push** - 仅在对 `main` 的 push 事件时运行 - 构建标记为 `${{ github.sha }}` 的 Docker 镜像 - 使用 Trivy 扫描构建的镜像，并在发现 HIGH/CRITICAL 级别的问题时失败 - 将签名的容器镜像推送到 Registry - 使用 `anchore/sbom-action` 生成 SBOM - 安装 Cosign 并对镜像进行签名，以提供供应链来源证明 - **gitops-pr** - 依赖于成功的 `build-and-push` - 使用 `sed` 将 `k8s/deployment.yaml` 的镜像 tag 更新为 `${{ github.sha }}` - 创建一个新分支并使用 `gh pr create` 发起 PR - 由 `environment: production` 进行控制以实现审批门控 ### 安全控制 - 依赖扫描：`npm audit` - 密钥扫描：`Gitleaks` - 基础设施配置扫描：针对 `k8s/` 的 Trivy - 镜像扫描：带有严格退出码的 Trivy - SBOM 生成：Anchore SBOM action - 镜像签名：通过 OIDC 的 Cosign - GitOps 审批门：受保护的 `production` 环境 ### GitOps 部署 `gitops-deploy.yml` 工作流演示了以下部署路径： - 启动 Minikube 集群 - 安装 Argo CD - 将代码库配置为 Argo CD 应用 - 将 `k8s/` 清单同步到集群 - 对已部署的服务执行冒烟测试 ## 必需的 Secrets 在 GitHub 中设置以下 Repository Secrets： - `DOCKER_USERNAME` — Registry 命名空间/用户名 - `DOCKER_PASSWORD` — 具有推送权限的 Registry token/密码 - `GH_PAT` — 由 GitOps PR 创建步骤使用的 token - 细粒度 PAT 应包含 **Contents: Read/Write** 和 **Pull requests: Read/Write** 权限 ## 备注 - 该流水线需要 `id-token: write` 权限才能进行 Cosign 签名。 - 当仓库/组织策略限制 `GITHUB_TOKEN` 创建 PR 时，建议使用 `GH_PAT`。 - GitOps 部署工作流使用 Argo CD 和 Minikube 进行自动化部署和冒烟测试。

标签：Cosign签名, DevSecOps, Docker, ESLint, GitHub Actions, GitOps, GNU通用公共许可证, Nginx, Node.js, React, React 18, SamuraiWTF, SBOM生成, Syscalls, Vite, Vitest, Web截图, 上游代理, 井字棋, 依赖审计, 单元测试, 子域名突变, 安全即代码, 安全左移, 安全防御评估, 容器安全, 小游戏, 数据可视化, 活动识别, 特权提升, 自动化部署, 自动笔记, 请求拦截, 配置扫描, 镜像扫描