Gitlab 持续集成/部署2——持续集成Vue项目

请先搭建集成环境，能够参考我上一篇文章 http://www.javashuo.com/article/p-ayssgsez-dh.html

配置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(持续更新)

这但是docker,就问你怕不怕？ .....