前端 CI/CD 自动化部署 GitHub / GitLab 项目到服务器

GitHub 篇

参考资料：

1. GitHub Actions 入门教程 - 阮一峰
2. GitHub Actions Documentation
3. Workflow syntax for GitHub Actions
4. Actions 插件：ssh deploy 配置
5. GitHub Action 一键部署 - Yopai's Blog

1. 配置工作流程

• 在仓库的根目录，创建 .github/workflows 目录

• 在 .github/workflows 目录下 添加 xxx.yml 或 xxx.yaml 文件 (注意保持缩进, 文件名 xxx 随意，语法：参考资料 3. )

  

2. 配置服务器密钥：(密钥在文件在 ~/.ssh/ 目录下)

• 生成密钥：ssh-keygen -m PEM -t rsa -b 4096 -C "jserhub@icloud.com"（注意邮箱更换成自己 GitHub 上的邮箱, 一路回车就行）
• 将公钥保存到 authorized_keys 文件中：cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

3. 配置 GitHub SSH、Secrets

• 配置路径：当前仓库 -> Settings -> Secrets （这里配置的变量是 xxx.yml 文件中 ${{secrets.你配置的名称}} 需要用到的。请看参考资料 4. ）

  

• 配置 SSH 公钥 （将服务器公钥添加到 GitHub 账户的 SSH）

  

工作流程文件示例：

name: Tser CI

on:
  push:
    branches:
      - master

jobs:
  # 发布到 GitHub Pages
  # build-and-deploy-to-github-pages:
  #   runs-on: ubuntu-latest
  #   steps:
  #     - name: Checkout
  #       uses: actions/checkout@master

  #     - name: Build and Deploy to GitHub Pages
  #       uses: JamesIves/github-pages-deploy-action@master
  #       env:
  #         ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
  #         BRANCH: gh-pages
  #         FOLDER: build
  #         BUILD_SCRIPT: npm install && npm run build

  # 发布到服务器
  build-and-deploy-to-server:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Setup Node.js environment
        uses: actions/setup-node@v1
        with:
          node-version: 12.x

      - name: Install Dependencies
        run: npm install
        env:
          CI: true

      - name: Build Project
        run: npm run build
        env:
          CI: true

      - name: Deploy to Server
        uses: easingthemes/ssh-deploy@v2.1.2
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rltgoDzvO --delete'
          SOURCE: 'build/'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
复制代码

提交代码，在 仓库 -> Actions 下查看执行记录

GitLab 篇

以 windows 为例

参考资料：

1. Install GitLab Runner on Windows
2. GitLab CI/CD Pipeline Configuration Reference
3. Registering Runners

1. 安装 GitLab Runner

• 按 win + q 键，输入 powershell ，以管理员身份运行

  

• 安装 GitLab Runner （请看参考资料 1.）

  1. 在打开的 powershell 中 创建 C:\GitLab-Runner 目录 mkdir C:\GitLab-Runner
  2. 把下载的 gitlab-runner 安装包重命名成：gitlab-runner.exe 然后放到 C:\GitLab-Runner 目录下
  3. 在 powershell 中执行命令：cd C:\GitLab-Runner && .\gitlab-runner.exe install && .\gitlab-runner.exe start

  

• 注册 runners (同样以管理员身份在 powershell 中执行命令。请看参考资料 3.)

  注册所需 URL 和 token：（仓库 -> Settings -> CI/CD Pipelines）

  

  注册步骤：

  

2. 项目根目录下配置 .gitlab-ci.yml 文件

.gitlab-ci.yml 文件内容示例：（此文件不要随意起名，语法：请看参考资料 2.）

Deploy To Server:
  stage: deploy
  script:
    - ls
    - whoami
    - rm -r C:\inetpub\wwwroot\*
    - cp -r ./dist/* C:\inetpub\wwwroot\
  only:
    - master
  tags:
    - IFSDeploy
复制代码

注意： 我这里把打包之后的文件（dist 目录）也提交到仓库了，也可以把打包的步骤放到自动化部署中执行，需要去探索。