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,就問你怕不怕？ .....