背景
前端代码通常涵盖 HTML、CSS 和 JavaScript 等内容，可能会运用诸如 React 或 Vue 之类的框架。Git 属于版本控制系统，开发者借助 git push 把代码上传至远程仓库，例如 GitLab 。GitLab Runner 是 GitLab 的 CI/CD 工具，主要负责运行管道中的任务。Docker 是一种容器化技术，能够保障应用在不同环境下的一致性。
流程分解
步骤 1：开发者推送代码到 Git
开发者完成代码编写后，使用 Git 将代码推送到 GitLab 仓库,想象你写了一篇小说草稿，你把它存到云端文档，让编辑和团队成员都能看到
步骤 2：GitLab Runner 被触发
在 GitLab 中，可以设置 CI/CD 管道，当代码推送时，GitLab Runner 会自动执行定义的阶段，如构建、测试和部署。就像你提交小说草稿后，编辑会自动检查语法、逻辑和排版错误。如果没问题，他们会准备印刷。
管道通常通过 .gitlab-ci.yml 文件定义，例如：
image: node:14
stages:
- build
- test
- deploy
build:
stage: build
script:
- npm install
- npm run build
artifacts:
paths:
- dist
test:
stage: test
script:
- npm run test
deploy:
stage: deploy
script:
- docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
- docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA .
- docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
- ssh root@server "docker stop myapp || true && docker rm myapp || true && docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA && docker run -d --name myapp -p 80:80 $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA"
以上是一个简化版本，展示了构建、测试和部署的流程。
步骤 3：构建前端代码
在 CI/CD 管道中，构建阶段会对前端代码进行编译或处理，从而生成用于生产环境的代码文件
Runner 运行 npm install 安装依赖，然后运行 npm run build 编译代码，生成 dist 文件夹。
步骤 4：测试构建结果
测试阶段运行脚本，确保构建的代码没有错误。
这可能包括单元测试、集成测试或端到端测试。如果测试失败，管道停止，开发者被通知修复。
步骤 5：创建 Docker 镜像
构建和测试通过后，创建 Docker 镜像，包含前端应用和运行所需的环境。
就像将印刷好的书籍装入标准的盒子中一样，以确保一致性。
使用 Dockerfile 定义镜像，例如：
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable
COPY --from=0 /app/dist /usr/share/nginx/html
Runner 运行 docker build -t myapp:latest . 创建镜像。
步骤 6：推送镜像到注册表
镜像创建完成后，推送到 Docker 注册表
像把装好的书送到仓库，方便分发。
使用 docker push myregistry.com/myapp:latest 命令，注册表可能是 Docker Hub 或私有仓库。
步骤 7：部署到服务器
最后，服务器拉取最新镜像，运行容器，让应用上线。
像把书摆上书店货架，供顾客购买。
涉及命令如
docker stop myapp
docker rm myapp
docker pull myregistry.com/myapp:latest
docker run -d --name myapp -p 80:80 myregistry.com/myapp:latest
为什么使用 Docker？
Docker 的核心优势在于环境一致性。传统部署可能因服务器配置不同导致问题，而 Docker 容器化确保了“一次构建，随处运行”。对于前端应用，这尤其重要，因为静态文件需要稳定的 Web 服务器环境。
虽然前端应用通常是静态文件，直接部署到 Web 服务器（如 NGINX 或 Apache）更常见，但使用 Docker 部署（比如容器化 NGINX）在云环境或 Kubernetes 场景中越来越普遍
实际应用中的变体
需要注意的是，前端应用的部署方式可能因项目而异：
如果是纯静态文件，直接部署到 Web 服务器，Docker 可能仅用于构建环境。
如果有服务器端组件（如 Node.js 的 SSR），或在云环境使用容器化，Docker 部署更常见。
结论
综上所述，前端代码从 Git 推送后，通过 GitLab Runner 构建和测试，再通过 Docker 打包并部署到服务器，确保了开发的效率和一致性
