Gitlab静态页面Pages

动机

项目不直观，无法明确感知是哪个项目。

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