gitlab本地部署优化 gitlab 持续部署

请先搭建集成环境，可以参考我上一篇文章

配置vue项目

在vue项目根目录下配置.gitlab-ci.yml文件，具体配置选项请看文档。我的配置如下：

# 构建阶段
stages:
  - install_deps
#  - test
  - build
#  - deploy_test
#  - deploy_production

image: node:latest

# 缓存（默认情况下，每个pipelines和jobs中可以共享一切，从GitLab 9.0开始）
cache:
#  key: ${CI_BUILD_REF_NAME}
  # windows下？？？
#  key: "%CI_COMMIT_REF_SLUG%"
#  key: ${CI_BUILD_STAGE}
# 缓存每个分支
#  key: "$CI_COMMIT_REF_NAME"
  paths:
    # 缓存node_mudules将大大提高ci运行的速度
    - node_modules/
    - dist/

# 构建工作-安装依赖
job_install_deps:
  stage: install_deps
  # 匹配使用哪个tag的runner(注册时填写的)
  tags:
    - ciTest-tag
  only:
    - develop
    - master
  script:
    - npm install


# 构建工作-运行测试用例
#job_test:
#  stage: test
#  only:
#    - develop
#    - master
#  script:
#    - npm run test


# 构建工作-编译
job_build:
  stage: build
  # 匹配使用哪个tag的runner
  tags:
    - ciTest-tag
  # 所有操作只在如下分支上进行
  only:
    - dev
    - master
  # 阶段运行的脚本
  script:
    # 你自己的package.json中scripts中的脚本
    - npm run build:prod
  # 工件，可以缓存在gitlab的流水线记录中，供直接下载
  artifacts:
    # 使用当前stage和分支名称作为存档名称
    # name: "${CI_JOB_NAME}_${CI_COMMIT_REF_NAME}"
    name: "%CI_JOB_STAGE%_%CI_COMMIT_REF_NAME%"
    # 工件缓存的有效时间
    expire_in: 3 days
    # 路径
    paths:
      # 工件指向的目录，这里指整个dist目录
      - dist


# 构建工作-部署测试服务器
#job_deploy_test:
#  stage: deploy_test
#  only:
#    - develop
#  script:
#    - pm2 delete app || true
#    - pm2 start app.js --name app


# 构建工作-部署生产服务器
#job_deploy_production:
#  stage: deploy_production
#  only:
#    - master
#  script:
#    - bash scripts/deploy/deploy.sh

上面的配置把一次 Pipeline 分成五个阶段：

• 安装依赖(install_deps)
• 运行测试(test)
• 编译(build)
• 部署测试服务器(deploy_test)
• 部署生产服务器(deploy_production)

不可以自行添加job，我这次实际上只是用了install_deps和build这两个阶段，所以其他的都注释掉了，后面还会持续更新，包括部署脚本等等。

查看效果

进入项目的CI/CD栏目就可以看到pipeline、job了，点击去查看详情。

可以下载工件（不过我用浏览器都提示是未知的，用迅雷下载是可以的）：

持续部署到Gitlab pages

vue cli 官网页面也有关于部署的，请先看一看。 https://cli.vuejs.org/zh/guide/deployment.html#gitlab-pages

我们既然用了Gitlab 那就直接使用 gitlab pages部署静态页面就可以了，当然你也可以自己写脚本发布到nginx等。

搭建 pages 必须满足的配置条件:

• 所有静态文件必须放到 public 目录下
• .gitlab-ci.yml 文件必须配置 artifacts 的 paths 为 public

添加一个job：

# 构建工作-部署到gitlab pages
job_deploy_pages:
  stage: deploy_pages
  tags:
      - ciTest-tag
  only:
    - master
  script:
    - echo 'nothing to do'
#    - mv public public-vue # GitLab Pages 的钩子设置在 public 文件夹
#    - mv dist public # 重命名 dist 文件夹 (npm run build 之后的输出位置)
    # linux命令，递归无询问删除public目录下所有文件
#    - rm -rf public
    # 新建文件夹public
#    - mkdir public
    # 将dist目录下的所有文件都移动到public目录下
#    - mv dist/* public
  artifacts:
    paths:
      - public # artifact path 一定要在 /public , 这样 GitLab Pages 才能获取

提交了代码之后就可以在setting-pages下面看到了

动态配置后端api地址

由于后端的地址会变化，为了方便修改，需要通过修改gitlab上的ci的环境变量来动态修改axios的baseURL

......

最后代码（持续更新）

推荐根据上面的教程一步一步来，如果你不想，那么也可以直接用下面代码。

# 构建阶段
stages:
  - install_deps
#  - test
  - build
  - deploy_pages
#  - deploy_test
#  - deploy_production

# 缓存（默认情况下，每个pipelines和jobs中可以共享一切，从GitLab 9.0开始）
cache:
#  key: ${CI_BUILD_REF_NAME}
  # windows下？？？
#  key: "%CI_COMMIT_REF_SLUG%"
#  key: ${CI_BUILD_STAGE}
# 缓存每个分支
#  key: "$CI_COMMIT_REF_NAME"
  paths:
    # 缓存node_mudules将大大提高ci运行的速度
    - node_modules/
    - dist/

# 构建工作-安装依赖
job_install_deps:
  stage: install_deps
  # 匹配使用哪个tag的runner(注册时填写的)
  tags:
    - ciTest-tag
  only:
    - develop
    - master
  script:
    - npm install


# 构建工作-运行测试用例
#job_test:
#  stage: test
#  only:
#    - develop
#    - master
#  script:
#    - npm run test


# 构建工作-编译
job_build:
  stage: build
  # 匹配使用哪个tag的runner
  tags:
    - ciTest-tag
  # 所有操作只在如下分支上进行
  only:
    - dev
    - master
  # 阶段运行的脚本
  script:
    # 你自己的package.json中scripts中的脚本
    - npm run build:prod
  # 工件，可以缓存在gitlab的流水线记录中，供直接下载
  artifacts:
    # 使用当前stage和分支名称作为存档名称
    # name: "${CI_JOB_NAME}_${CI_COMMIT_REF_NAME}"
    name: "%CI_JOB_STAGE%_%CI_COMMIT_REF_NAME%"
    # 工件缓存的有效时间(默认好像是30天)
    expire_in: 3 days
    # 路径
    paths:
      # 工件指向的目录，这里指整个dist目录
      - dist

# 构建工作-部署到gitlab pages
job_deploy_pages:
  stage: deploy_pages
  tags:
      - ciTest-tag
  only:
    - master
  script:
    - mv public public-vue # GitLab Pages 的钩子设置在 public 文件夹
    - mv dist public # 重命名 dist 文件夹 (npm run build 之后的输出位置)
  artifacts:
    paths:
      - public # artifact path 一定要在 /public , 这样 GitLab Pages 才能获取


# 构建工作-部署测试服务器
#job_deploy_test:
#  stage: deploy_test
#  only:
#    - develop
#  script:
#    - pm2 delete app || true
#    - pm2 start app.js --name app


# 构建工作-部署生产服务器
#job_deploy_production:
#  stage: deploy_production
#  only:
#    - master
#  script:
#    - bash scripts/deploy/deploy.sh

使用docker(持续更新)