动机
我的项目不直观,无奈明确感知是哪个我的项目。
yaml 配置
# .gitlab-ci.yml
image: node:latest # 针对前端,抉择适合的 node 镜像
# 定义各阶段的执行程序
stages:
- build
- deploy
# 在脚本执行前设置 npm 源
before_script:
- npm config set registry https://registry.npm.taobao.org/
- npm config set cache-folder .cache/
# 定义各阶段的具体执行命令
# artifacts 缓存在 gitlab 上的工件,用于将指定目录下的文件下载下来
build:
stage: build
script:
- npm i
- npm run build
artifacts:
paths:
- dist
pages: # 该工作命名必须是 pages,是 gitlab 外部工作
stage: deploy
approval: false
script:
- rm -rf public/*
- mv dist/* public
artifacts:
paths:
- public
only:
- bundler-rollup
cache: # 定义缓存文件
paths: # 定义缓存文件的门路
- node_modules # 在下一次触发 gitlab-ci 时,缓存会被还原,就不必反复装置依赖。- dist # 同时把 build 阶段生成的 dist 文件夹也缓存起来,在 deploy 阶段会用到。
Pages 流程介绍
在 push 源代码到仓库的时候,Gitlab
能够依据我的项目中的 .gitlab-ci.yml
文件来主动构建我的项目,而后部署到服务器中。
外围点
- 打包动态资源
- 配置指定工作
pages
,将动态资源迁徙到public
目录下
Notes:
**stage: deploy**
默认是须要审批的,能够通过:
stage
命名刻意回避deploy
- 通过
approval: false
回避审批
审批不能是本人,即便本人是代码拥有者,也无奈本人审批本人(审批按钮无奈应用)。
后果预览
参考文档
- 配置 Gitlab pages 和 Gitlab CI
- 利用 gitlab-ci 和 gitlab-pages 收费主动构建部署 vue 我的项目