如何为 Vue 应用配置自动化部署（CI/CD），例如集成到 Jenkins, GitLab CI 或 GitHub Actions？

各位观众老爷，大家好！我是今天的主讲人，咱们今天来聊聊Vue应用的自动化部署，让你的代码像坐火箭一样，嗖嗖地飞到服务器上。

说起自动化部署，那绝对是程序员的福音。手动部署？No way! 效率低下不说，还容易出错，简直是掉头发的罪魁祸首。所以，拥抱自动化，解放双手，才是王道！

咱们这次主要围绕Jenkins、GitLab CI和GitHub Actions这三个主流CI/CD平台，讲解如何为Vue应用配置自动化部署。我会尽量讲得通俗易懂，再配上代码示例，保证你听完就能上手。

一、为什么需要自动化部署？

在深入配置之前，咱们先来掰扯掰扯，为啥要搞自动化部署。

手动部署	自动化部署
容易出错，尤其是在复杂环境中	减少人为错误，提高部署质量
耗时耗力，效率低下	快速部署，节省时间
部署过程不透明，难以追踪	部署过程可追踪，方便问题排查
扩展性差，难以应对高并发需求	易于扩展，支持高并发部署
容易造成服务中断	减少服务中断时间，提升用户体验

结论：自动化部署，YYDS！

二、准备工作

工欲善其事，必先利其器。在开始配置之前，我们需要准备一些东西：

1. 一个Vue项目：这个不用多说，没有项目，巧妇也难为无米之炊。
2. 一个Git仓库：用于托管你的代码，比如GitHub、GitLab、Gitee等。
3. 一个服务器：用于部署你的Vue应用，可以是云服务器、VPS等。
4. 一个CI/CD平台账号：根据你选择的平台注册账号，比如Jenkins、GitLab、GitHub Actions。
5. Node.js 和 npm/yarn：服务器上需要安装Node.js和npm或yarn，用于构建Vue项目。
6. SSH密钥：用于CI/CD平台安全地连接到服务器。

三、Jenkins配置

Jenkins是一个开源的自动化服务器，可以用于自动化构建、测试和部署软件。

1. 安装Jenkins：

   • 你可以选择在本地安装Jenkins，也可以使用Docker安装。这里假设你已经安装好了Jenkins。

2. 安装插件：

   • 在Jenkins中，你需要安装一些插件来支持Vue项目的部署，比如：
     • NodeJS Plugin: 用于在Jenkins中管理Node.js环境。
     • SSH Plugin: 用于通过SSH连接到服务器。
     • Git Plugin: 用于从Git仓库拉取代码。

3. 配置Node.js环境：

   • 在Jenkins的全局工具配置中，配置Node.js环境，指定Node.js的安装路径。

4. 创建Jenkins Job：

   • 创建一个新的Jenkins Job，选择Freestyle project。

5. 配置Git仓库：

   • 在Source Code Management中，配置你的Git仓库地址，选择HTTPS或者SSH方式。

6. 配置构建触发器：

   • 在Build Triggers中，你可以选择不同的触发方式，比如Poll SCM（定时轮询代码仓库），或者使用GitHub hook trigger for GITScm polling（当代码仓库有push事件时触发）。

7. 配置构建步骤：

   • 在Build中，添加构建步骤，执行以下命令：

   #!/bin/bash
   echo "开始构建..."
   
   # 安装依赖
   npm install
   
   # 构建项目
   npm run build
   
   echo "构建完成..."
   
   # 通过 SSH 连接到服务器
   ssh user@your_server_ip "
       echo '开始部署...'
       # 进入部署目录
       cd /var/www/your_vue_app
   
       # 备份旧版本
       if [ -d 'backup' ]; then
           mv dist backup/$(date +%Y%m%d%H%M%S)
       else
           mkdir backup
       fi
   
       # 删除旧版本
       rm -rf dist
   
       # 创建新的 dist 目录
       mkdir dist
   
       # 将构建好的文件复制到服务器
       echo '正在上传文件...'
       exit 0  # 确保 scp 不会因为目录不存在而停止
   "
   
   # 上传文件
   scp -r dist/* user@your_server_ip:/var/www/your_vue_app/dist/
   
   ssh user@your_server_ip "
       echo '部署完成...'
       # 重启服务 (根据你的服务器配置)
       sudo systemctl restart your_service_name
   "
   
   echo "部署完成！"

   • 注意：你需要将user、your_server_ip、/var/www/your_vue_app和your_service_name替换成你自己的配置。
   • 更要注意，这里使用了scp命令进行文件上传，为了安全起见，建议使用SSH密钥认证，避免在脚本中暴露密码。

8. 配置SSH密钥：

   • 在Jenkins中配置SSH密钥，用于连接到服务器。
   • 首先，在Jenkins服务器上生成SSH密钥对：

   ssh-keygen -t rsa -b 4096 -C "[email protected]"

   • 然后，将公钥（~/.ssh/id_rsa.pub）复制到服务器的~/.ssh/authorized_keys文件中。
   • 最后，在Jenkins中配置SSH凭据，选择SSH Username with private key，将私钥（~/.ssh/id_rsa）粘贴到Key字段中。

9. 保存并运行Job：

   • 保存你的Jenkins Job，然后点击Build Now按钮，开始构建和部署你的Vue应用。

四、GitLab CI配置

GitLab CI是GitLab内置的CI/CD工具，使用.gitlab-ci.yml文件来定义pipeline。

1. 创建.gitlab-ci.yml文件：

   • 在你的Vue项目根目录下创建一个.gitlab-ci.yml文件，定义你的CI/CD pipeline。

   stages:
     - build
     - deploy
   
   build:
     stage: build
     image: node:16
     cache:
       key: npm-cache
       paths:
         - node_modules/
     script:
       - npm install
       - npm run build
     artifacts:
       paths:
         - dist/
   
   deploy:
     stage: deploy
     image: alpine/ssh
     before_script:
       - apk update && apk add openssh-client
       - mkdir -p ~/.ssh
       - echo "$SSH_PRIVATE_KEY" | tr -d 'r' > ~/.ssh/id_rsa
       - chmod 400 ~/.ssh/id_rsa
       - ssh-keyscan your_server_ip >> ~/.ssh/known_hosts
       - chmod 644 ~/.ssh/known_hosts
     script:
       - rsync -avz --delete dist/ user@your_server_ip:/var/www/your_vue_app/dist/
       - ssh user@your_server_ip "sudo systemctl restart your_service_name"
     only:
       - main

   • 注意：你需要将your_server_ip、/var/www/your_vue_app和your_service_name替换成你自己的配置。
   • 更要注意，这里使用了rsync命令进行文件上传，为了安全起见，建议使用SSH密钥认证，避免在脚本中暴露密码。
2. 配置GitLab CI/CD Variables：
   • 在GitLab项目的Settings -> CI/CD -> Variables中，配置以下变量：
     • SSH_PRIVATE_KEY: 你的SSH私钥。
3. 提交代码到GitLab仓库：
   • 将你的代码提交到GitLab仓库，GitLab CI会自动执行你的pipeline。

五、GitHub Actions配置

GitHub Actions是GitHub提供的CI/CD工具，使用.github/workflows目录下的YAML文件来定义workflow。

1. 创建.github/workflows/deploy.yml文件：

   • 在你的Vue项目的.github/workflows目录下创建一个deploy.yml文件，定义你的workflow。

   name: Deploy to Server
   
   on:
     push:
       branches: [ main ]
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
   
         - name: Use Node.js 16
           uses: actions/setup-node@v2
           with:
             node-version: '16'
   
         - name: Install dependencies
           run: npm install
   
         - name: Build
           run: npm run build
   
         - name: Deploy to Server
           uses: appleboy/scp-action@master
           with:
             host: ${{ secrets.SERVER_IP }}
             username: ${{ secrets.SERVER_USERNAME }}
             key: ${{ secrets.SSH_PRIVATE_KEY }}
             source: dist/
             target: /var/www/your_vue_app/dist/
             strip_components: 1
   
         - name: Restart Service
           uses: appleboy/ssh-action@master
           with:
             host: ${{ secrets.SERVER_IP }}
             username: ${{ secrets.SERVER_USERNAME }}
             key: ${{ secrets.SSH_PRIVATE_KEY }}
             script: sudo systemctl restart your_service_name

   • 注意：你需要将/var/www/your_vue_app和your_service_name替换成你自己的配置。
2. 配置GitHub Secrets：
   • 在GitHub项目的Settings -> Secrets -> Actions中，配置以下secrets：
     • SERVER_IP: 你的服务器IP地址。
     • SERVER_USERNAME: 你的服务器用户名。
     • SSH_PRIVATE_KEY: 你的SSH私钥。
3. 提交代码到GitHub仓库：
   • 将你的代码提交到GitHub仓库，GitHub Actions会自动执行你的workflow。

六、总结

通过上面的讲解，相信你已经对Vue应用的自动化部署有了初步的了解。无论你选择Jenkins、GitLab CI还是GitHub Actions，都需要掌握以下几个关键点：

• 配置CI/CD平台：安装必要的插件或者配置CI/CD variables。
• 编写构建脚本：定义构建过程，包括安装依赖、构建项目等。
• 配置SSH密钥：用于安全地连接到服务器。
• 编写部署脚本：定义部署过程，包括上传文件、重启服务等。

当然，自动化部署是一个持续迭代的过程，你需要根据你的实际情况不断优化你的pipeline。 比如可以加入单元测试，代码静态分析等步骤。

最后，希望这篇文章能够帮助你搭建起一套高效、稳定的自动化部署流程，解放你的双手，让你有更多的时间去摸鱼…我是说，去创造价值！ 感谢大家的收听，我们下次再见！