前端项目 GitLab CI/CD 持续集成部署指南(Mac 环境)
概要
在日常开发过程中,我们经常需要将打包后的 dist 包手动发送给后端部署,效率低且容易出错。CI(Continuous Integration,持续集成)可以自动化这一过程,本文将介绍如何通过 GitLab CI 实现持续集成部署。
一、安装 GitLab Runner
请参考官方文档:GitLab Runner 安装指南
二、本地注册 Runner
- 打开你的 GitLab 项目页面,进入 Settings → CI/CD,展开 Runners 部分。
- 记住显示的 URL 和 token,用于后续注册。
执行注册命令
按照提示依次输入以下信息:
- GitLab CI Coordinator URL:
https://gitlab.com
- GitLab CI Token:
xxx(从项目中复制)
- Tags:
my-tag,another-tag(自定义)
- Description:
my-runner(自定义)
- Executor:
shell(Mac 上建议选择 shell)
注册完成后,回到 GitLab CI/CD 设置页面,可看到 Runner 状态为绿色,说明已成功运行。如果不是绿色,请执行以下命令启动 Runner 服务:
三、编写 .gitlab-ci.yml 文件并提交
将以下内容保存为 .gitlab-ci.yml,并 push 到 GitLab:
1 2 3 4 5 6 7 8 9 10 11
| stages: - deploy
deploy_to_test: stage: deploy script: - yarn - rm -rf dist/ - yarn build - ls -l -t ./dist/ - rsync -avz ./dist/ root@xxx.xx.xx.xxx:/dist
|
- 这段 CI 脚本会自动打包项目,并使用
rsync 将 dist 目录部署到远程服务器。
四、通过 Docker 实现 CI(可选)
如果需要通过 Docker 实现更完整的 CI/CD 流程,继续以下步骤:
1. 安装 Docker(Mac)
1
| brew install --cask docker
|
2. 拉取 GitLab 镜像
1
| docker pull drud/gitlab-ce:v0.29.1
|
3. 创建 GitLab 容器
1
| docker run -d -p 8443:443 -p 8090:80 -p 8022:22 --restart always --name gitlab drud/gitlab-ce:v0.29.1
|
说明:
-p 8443:443:映射 HTTPS 端口
-p 8090:80:映射 HTTP 端口
-p 8022:22:映射 SSH 端口
--restart always:容器崩溃或主机重启时自动恢复
--name gitlab:容器命名为 gitlab
访问地址:
五、Docker 模式下的 .gitlab-ci.yml 示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| variables: TEST_NAME: "tips" OUT_PORT: "8081" IN_PORT: "8081"
stages: - deploy
deploy_to_test: stage: deploy before_script: - if [ $(docker ps -aq --filter name=$CI_PROJECT_NAME) ]; then docker rm -f $CI_PROJECT_NAME; fi script: - docker build -f Dockerfile -t $TEST_NAME:latest . - docker run -d -p $OUT_PORT:$IN_PORT --name $TEST_NAME $TEST_NAME:latest
|
部署成功后,在 GitLab 的 CI/CD Pipelines 页面可看到构建过程,在 Containers 页面会生成新容器,点击对应端口即可访问部署后的页面。