动机

我的项目不直观，无奈明确感知是哪个我的项目。

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 我的项目