前端项目自动化部署——超详细教程（Jenkins、Github Actions）

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。

1. 第一部分是使用 Gitea 配置局域网 git 服务器，再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。
2. 第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。

阅读本教程并不须要你提早了解 Jenkins 和 Github Actions 的知识，只要按照本教程的指引，就可以实现自动化部署项目。

PS：本人所用电脑操做系统为 windows，即如下全部的操做均在 windows 下运行。其余操做系统的配置大同小异，不会有太大差异。

Gitea + Jenkins 自动构建前端项目并部署到服务器

Gitea 用于构建 Git 局域网服务器，Jenkins 是 CI/CD 工具，用于部署前端项目。

配置 Gitea

1. 下载 Gitea，选择一个喜欢的版本，例如 1.13，选择 gitea-1.13-windows-4.0-amd64.exe 下载。
2. 下载完后，新建一个目录（例如 gitea），将下载的 Gitea 软件放到该目录下，双击运行。
3. 打开 localhost:3000 就能看到 Gitea 已经运行在你的电脑上了。
4. 点击注册，第一次会弹出一个初始配置页面，数据库选择 SQLite3。另外把 localhost 改为你电脑的局域网地址，例如个人电脑 IP 为 192.168.0.118。

1. 填完信息后，点击当即安装，等待一会，便可完成配置。
2. 继续点击注册用户，第一个注册的用户将会成会管理员。
3. 打开 Gitea 的安装目录，找到 custom\conf\app.ini，在里面加上一行代码 START_SSH_SERVER = true。这时就可使用 ssh 进行 push 操做了。

1. 若是使用 http 的方式没法克隆项目，请取消 git 代理。

git config --global --unset http.proxy
git config --global --unset https.proxy

配置 Jenkins

1. 须要提早安装 JDK，JDK 安装教程网上不少，请自行搜索。
2. 打开 Jenkins 下载页面。

1. 安装过程当中遇到 Logon Type 时，选择第一个。

1. 端口默认为 8080，这里我填的是 8000。安装完会自动打开 http://localhost:8000 网站，这时须要等待一会，进行初始化。
2. 按照提示找到对应的文件（直接复制路径在个人电脑中打开），其中有管理员密码。

1. 安装插件，选择第一个。

1. 建立管理员用户，点击完成并保存，而后一路下一步。

1. 配置完成后自动进入首页，这时点击 Manage Jenkins -> Manage plugins 安装插件。

1. 点击 可选插件，输入 nodejs，搜索插件，而后安装。
2. 安装完成后回到首页，点击 Manage Jenkins -> Global Tool Configuration 配置 nodejs。若是你的电脑是 win7 的话，nodejs 版本最好不要过高，选择 v12 左右的就行。

建立静态服务器

1. 创建一个空目录，在里面执行 npm init -y，初始化项目。
2. 执行 npm i express 下载 express。
3. 而后创建一个 server.js 文件，代码以下：

const express = require('express')
const app = express()
const port = 8080

app.use(express.static('dist'))

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

它将当前目录下的 dist 文件夹设为静态服务器资源目录，而后执行 node server.js 启动服务器。

因为如今没有 dist 文件夹，因此访问网站是空页面。

不过不要着急，一会就能看到内容了。

自动构建 + 部署到服务器

1. 下载 Jenkins 提供的 demo 项目 building-a-multibranch-pipeline-project，而后在你的 Gitea 新建一个仓库，把内容克隆进去，并提交到 Gitea 服务器。

1. 打开 Jenkins 首页，点击 新建 Item 建立项目。

1. 选择源码管理，输入你的 Gitea 上的仓库地址。

1. 你也能够尝试一下定时构建，下面这个代码表示每 5 分钟构建一次。

1. 选择你的构建环境，这里选择刚才配置的 nodejs。

1. 点击增长构建步骤，windows 要选 execute windows batch command，linux 要选 execute shell。

1. 输入 npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y，这行命令的做用是安装依赖，构建项目，并将构建后的静态资源复制到指定目录 G:\node-server\dist\ 。这个目录是静态服务器资源目录。

1. 保存后，返回首页。点击项目旁边的小三角，选择 build now。

1. 开始构建项目，咱们能够点击项目查看构建过程。

1. 构建成功，打开 http://localhost:8080/ 看一下结果。

1. 因为刚才设置了每 5 分钟构建一次，咱们能够改变一下网站的内容，而后什么都不作，等待一会再打开网站看看。

1. 把修改的内容提交到 Gitea 服务器，稍等一会。打开网站，发现内容已经发生了变化。

使用 pipeline 构建项目

使用流水线构建项目能够结合 Gitea 的 webhook 钩子，以便在执行 git push 的时候，自动构建项目。

1. 点击首页右上角的用户名，选择设置。

1. 添加 token，记得将 token 保存起来。

1. 打开 Jenkins 首页，点击 新建 Item 建立项目。

1. 点击构建触发器，选择触发远程构建，填入刚才建立的 token。

1. 选择流水线，按照提示输入内容，而后点击保存。

1. 打开 Jenkins 安装目录下的 jenkins.xml 文件，找到 <arguments> 标签，在里面加上 -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的做用是关闭 CSRF 验证，不关的话，Gitea 的 webhook 会一直报 403 错误，没法使用。加好参数后，在该目录命令行下输入 jenkins.exe restart 重启 Jenkins。

1. 回到首页，配置全局安全选项。勾上匿名用户具备可读权限，再保存。

1. 打开你的 Gitea 仓库页面，选择仓库设置。

1. 点击管理 web 钩子，添加 web 钩子，钩子选项选择 Gitea。
2. 目标 URL 按照 Jenkins 的提示输入内容。而后点击添加 web 钩子。

1. 点击建立好的 web 钩子，拉到下方，点击测试推送。不出意外，应该能看到推送成功的消息，此时回到 Jenkins 首页，发现已经在构建项目了。

1. 因为没有配置 Jenkinsfile 文件，此时构建是不会成功的。因此接下来须要配置一下 Jenkinsfile 文件。将如下代码复制到你 Gitea 项目下的 Jenkinsfile 文件。jenkins 在构建时会自动读取文件的内容执行构建及部署操做。

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {  // window 使用 bat， linux 使用 sh
                bat 'npm i'
                bat 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 这里须要改为你的静态服务器资源目录
            }
        }
    }
}

1. 每当你的 Gitea 项目执行 push 操做时，Gitea 都会经过 webhook 发送一个 post 请求给 Jenkins，让它执行构建及部署操做。

小结

若是你的操做系统是 Linux，能够在 Jenkins 打包完成后，使用 ssh 远程登陆到阿里云，将打包后的文件复制到阿里云上的静态服务器上，这样就能实现阿里云自动部署了。具体怎么远程登陆到阿里云，请看下文中的 《Github Actions 部署到阿里云》 一节。

Github Actions 自动构建前端项目并部署到服务器

若是你的项目是 Github 项目，那么使用 Github Actions 也许是更好的选择。

部署到 Github Page

接下来看一下如何使用 Github Actions 部署到 Github Page。

在你须要部署到 Github Page 的项目下，创建一个 yml 文件，放在 .github/workflow 目录下。你能够命名为 ci.yml，它相似于 Jenkins 的 Jenkinsfile 文件，里面包含的是要自动执行的脚本代码。

这个 yml 文件的内容以下：

name: Build and Deploy
on: # 监听 master 分支上的 push 事件
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false

      - name: Install and Build # 下载依赖 打包项目
        run: |
          npm install
          npm run build

      - name: Deploy # 将打包内容发布到 github page
        uses: JamesIves/github-pages-deploy-action@3.5.9 # 使用别人写好的 actions
        with:  # 自定义环境变量
          ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} # VUE_ADMIN_TEMPLATE 是个人 secret 名称，须要替换成你的
          BRANCH: master
          FOLDER: dist
          REPOSITORY_NAME: woai3c/woai3c.github.io # 这是个人 github page 仓库
          TARGET_FOLDER: github-actions-demo # 打包的文件将放到静态服务器 github-actions-demo 目录下

上面有一个 ACCESS_TOKEN 变量须要本身配置。

1. 打开 Github 网站，点击你右上角的头像，选择 settings。

1. 点击左下角的 developer settings。

1. 在左侧边栏中，单击 Personal access tokens（我的访问令牌）。

1. 单击 Generate new token（生成新令牌）。

1. 输入名称并勾选 repo。

1. 拉到最下面，点击 Generate token，并将生成的 token 保存起来。

1. 打开你的 Github 项目，点击 settings。

点击 secrets->new secret。

建立一个密钥，名称随便填（中间用下划线隔开），内容填入刚才建立的 token。

将上文代码中的 ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} 替换成刚才建立的 secret 名字，替换后代码以下 ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。保存后，提交到 Github。

之后你的项目只要执行 git push，Github Actions 就会自动构建项目并发布到你的 Github Page 上。

Github Actions 的执行详情点击仓库中的 Actions 选项查看。

具体详情能够参考一下个人 demo 项目 github-actions-demo。

构建成功后，打开 Github Page 网站，能够发现内容已经发布成功。

Github Actions 部署到阿里云

初始化阿里云服务器

1. 购买阿里云服务器，选择操做系统，我选的 ubuntu
2. 在云服务器管理控制台选择实例->更多->密钥->重置实例密码（一会登录用）
3. 选择远程链接->VNC，会弹出一个密码，记住它，之后远程链接要用（ctrl + alt + f1~f6 切换终端，例如 ctrl + alt + f1 是第一个终端）
4. 进入后是一个命令行 输入 root（默认用户名），密码为你刚才重置的实例密码
5. 登录成功， 更新安装源 sudo apt-get update && sudo apt-get upgrade -y
6. 安装 npm sudo apt-get install npm
7. 安装 npm 管理包 sudo npm install -g n
8. 安装 node 最新稳定版 sudo n stable

建立一个静态服务器

mkdir node-server // 建立 node-server 文件夹
cd node-server // 进入 node-server 文件夹
npm init -y // 初始化项目
npm i express
touch server.js // 建立 server.js 文件
vim server.js // 编辑 server.js 文件

将如下代码输入进去（用 vim 进入文件后按 i 进行编辑，保存时按 esc 而后输入 :wq，再按 enter），更多使用方法请自行搜索。

const express = require('express')
const app = express()
const port = 3388 // 填入本身的阿里云映射端口，在网络安全组配置。

app.use(express.static('dist'))

app.listen(port, '0.0.0.0', () => {
    console.log(`listening`)
})

执行 node server.js 开始监听，因为暂时没有 dist 目录，先不要着急。

注意，监听 IP 必须为 0.0.0.0 ，详情请看部署Node.js项目注意事项。

阿里云入端口要在网络安全组中查看与配置。

建立阿里云密钥对

请参考建立SSH密钥对和绑定SSH密钥对 ，将你的 ECS 服务器实例和密钥绑定，而后将私钥保存到你的电脑（例如保存在 ecs.pem 文件）。

打开你要部署到阿里云的 Github 项目，点击 setting->secrets。

点击 new secret

secret 名称为 SERVER_SSH_KEY，并将刚才的阿里云密钥填入内容。

点击 add secret 完成。

在你项目下创建 .github\workflows\ci.yml 文件，填入如下内容：

name: Build app and deploy to aliyun
on:
  #监听push操做
  push:
    branches:
      # master分支，你也能够改为其余分支
      - master
jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.16.2'
    - name: Install npm dependencies
      run: npm install
    - name: Run build task
      run: npm run build
    - name: Deploy to Server
      uses: easingthemes/ssh-deploy@v2.1.5
      env:
          SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
          ARGS: '-rltgoDzvO --delete'
          SOURCE: dist # 这是要复制到阿里云静态服务器的文件夹名称
          REMOTE_HOST: '118.190.217.8' # 你的阿里云公网地址
          REMOTE_USER: root # 阿里云登陆后默认为 root 用户，而且所在文件夹为 root
          TARGET: /root/node-server # 打包后的 dist 文件夹将放在 /root/node-server

保存，推送到 Github 上。

之后只要你的项目执行 git push 操做，就会自动执行 ci.yml 定义的脚本，将打包文件放到你的阿里云静态服务器上。

这个 Actions 主要作了两件事：

1. 克隆你的项目，下载依赖，打包。
2. 用你的阿里云私钥以 SSH 的方式登陆到阿里云，把打包的文件上传（使用 rsync）到阿里云指定的文件夹中。

若是仍是不懂，建议看一下个人 demo。

参考资料

• Jenkins 用户手册
• GitHub Actions 文档
• GitHub Pages 文档
• Gitea 文档

更多文章，敬请关注