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

基德船长 發表於 2020-10-26 10:38:00

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

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。
<ol>
<li>第一部分是使用 Gitea 配置局域网 git 服务器，再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。</li>
<li>第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。</li>
</ol>
阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识，只要按照本教程的指引，就能够实现自动化部署项目。
PS：本人所用电脑操作系统为 windows，即以下所有的操作均在 windows 下运行。其他操作系统的配置大同小异，不会有太大差别。
<h2 id="gitea--jenkins-自动构建前端项目并部署到服务器">Gitea + Jenkins 自动构建前端项目并部署到服务器</h2>
Gitea 用于构建 Git 局域网服务器，Jenkins 是 CI/CD 工具，用于部署前端项目。
<h3 id="配置-gitea">配置 Gitea</h3>
<ol>
<li>下载 Gitea，选择一个喜欢的版本，例如 1.13，选择 <code>gitea-1.13-windows-4.0-amd64.exe</code> 下载。</li>
<li>下载完后，新建一个目录（例如 gitea），将下载的 Gitea 软件放到该目录下，双击运行。</li>
<li>打开 <code>localhost:3000</code> 就能看到 Gitea 已经运行在你的电脑上了。</li>
<li>点击注册，第一次会弹出一个初始配置页面，数据库选择 <code>SQLite3</code>。另外把 <code>localhost</code> 改成你电脑的局域网地址，例如我的电脑 IP 为 <code>192.168.0.118</code>。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201024201812776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
<img src="https://img-blog.csdnimg.cn/20201024201823563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
5. 填完信息后，点击立即安装，等待一会，即可完成配置。 
6. 继续点击注册用户，第一个注册的用户将会成会管理员。 
7. 打开 Gitea 的安装目录，找到 <code>custom\conf\app.ini</code>，在里面加上一行代码 <code>START_SSH_SERVER = true</code>。这时就可以使用 ssh 进行 push 操作了。
<img src="https://img-blog.csdnimg.cn/20201024204210656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
8. 如果使用 http 的方式无法克隆项目，请取消 git 代理。
<pre><code class="language-git">git config --global --unset http.proxy
git config --global --unset https.proxy
</code></pre>
<h3 id="配置-jenkins">配置 Jenkins</h3>
<ol>
<li>需要提前安装 JDK，JDK 安装教程网上很多，请自行搜索。</li>
<li>打开 Jenkins 下载页面。 
<img src="https://img-blog.csdnimg.cn/20201024190126288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>安装过程中遇到 <code>Logon Type</code> 时，选择第一个。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201024190417868.png#pic_center">
<ol start="4">
<li>端口默认为 8080，这里我填的是 8000。安装完会自动打开 <code>http://localhost:8000</code> 网站，这时需要等待一会，进行初始化。</li>
<li>按照提示找到对应的文件（直接复制路径在我的电脑中打开），其中有管理员密码。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/202010231737076.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
6. 安装插件，选择第一个。
<img src="https://img-blog.csdnimg.cn/20201024190745341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<ol start="7">
<li>创建管理员用户，点击完成并保存，然后一路下一步。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201023174247431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
8. 配置完成后自动进入首页，这时点击 <code>Manage Jenkins</code> -> <code>Manage plugins</code> 安装插件。
<img src="https://img-blog.csdnimg.cn/20201023174408585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
9. 点击 <code>可选插件</code>，输入 nodejs，搜索插件，然后安装。 
10. 安装完成后回到首页，点击 <code>Manage Jenkins</code> -> <code>Global Tool Configuration</code> 配置 nodejs。如果你的电脑是 win7 的话，nodejs 版本最好不要太高，选择 v12 左右的就行。
<img src="https://img-blog.csdnimg.cn/20201024201146657.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<h3 id="创建静态服务器">创建静态服务器</h3>
<ol>
<li>建立一个空目录，在里面执行 <code>npm init -y</code>，初始化项目。</li>
<li>执行 <code>npm i express</code> 下载 express。</li>
<li>然后建立一个 <code>server.js</code> 文件，代码如下：</li>
</ol>
<pre><code class="language-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}`)
})
</code></pre>
它将当前目录下的 <code>dist</code> 文件夹设为静态服务器资源目录，然后执行 <code>node server.js</code> 启动服务器。
由于现在没有 <code>dist</code> 文件夹，所以访问网站是空页面。 
<img src="https://img-blog.csdnimg.cn/20201024111904540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
不过不要着急，一会就能看到内容了。
<h3 id="自动构建--部署到服务器">自动构建 + 部署到服务器</h3>
<ol>
<li>下载 Jenkins 提供的 demo 项目 building-a-multibranch-pipeline-project，然后在你的 Gitea 新建一个仓库，把内容克隆进去，并提交到 Gitea 服务器。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201024110332115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
2. 打开 Jenkins 首页，点击 <code>新建 Item</code> 创建项目。 
<img src="https://img-blog.csdnimg.cn/20201023175111305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
3. 选择<code>源码管理</code>，输入你的 Gitea 上的仓库地址。 
<img src="https://img-blog.csdnimg.cn/20201024110442602.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<ol start="4">
<li>你也可以尝试一下定时构建，下面这个代码表示每 5 分钟构建一次。 
<img src="https://img-blog.csdnimg.cn/20201023180258775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>选择你的构建环境，这里选择刚才配置的 nodejs。 
<img src="https://img-blog.csdnimg.cn/20201023180731556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>点击增加构建步骤，windows 要选 <code>execute windows batch command</code>，linux 要选 <code>execute shell</code>。 
<img src="https://img-blog.csdnimg.cn/20201023180812105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>输入 <code>npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y</code>，这行命令的作用是安装依赖，构建项目，并将构建后的静态资源复制到指定目录 <code>G:\node-server\dist\ </code>。这个目录是静态服务器资源目录。 
<img src="https://img-blog.csdnimg.cn/20201023181021562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>保存后，返回首页。点击项目旁边的小三角，选择 <code>build now</code>。 
<img src="https://img-blog.csdnimg.cn/20201024110713915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>开始构建项目，我们可以点击项目查看构建过程。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201024110738802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
10. 构建成功，打开 <code>http://localhost:8080/</code> 看一下结果。 
<img src="https://img-blog.csdnimg.cn/20201024110849403.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
<img src="https://img-blog.csdnimg.cn/20201024110920521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
11. 由于刚才设置了每 5 分钟构建一次，我们可以改变一下网站的内容，然后什么都不做，等待一会再打开网站看看。 
<img src="https://img-blog.csdnimg.cn/2020102411110363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
12. 把修改的内容提交到 Gitea 服务器，稍等一会。打开网站，发现内容已经发生了变化。 
<img src="https://img-blog.csdnimg.cn/20201024111506386.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<h3 id="使用-pipeline-构建项目">使用 pipeline 构建项目</h3>
使用流水线构建项目可以结合 Gitea 的 <code>webhook</code> 钩子，以便在执行 <code>git push</code> 的时候，自动构建项目。
<ol>
<li>
点击首页右上角的用户名，选择<code>设置</code>。 
<img src="https://img-blog.csdnimg.cn/2020102421163071.png#pic_center">
</li>
<li>
添加 token，记得将 token 保存起来。 
<img src="https://img-blog.csdnimg.cn/20201024211710433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
</li>
<li>
打开 Jenkins 首页，点击 <code>新建 Item</code> 创建项目。
</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201024211251618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
4. 点击<code>构建触发器</code>，选择<code>触发远程构建</code>，填入刚才创建的 token。 
<img src="https://img-blog.csdnimg.cn/2020102421184858.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
5. 选择流水线，按照提示输入内容，然后点击<code>保存</code>。
<img src="https://img-blog.csdnimg.cn/20201024211948718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
6. 打开 Jenkins 安装目录下的 <code>jenkins.xml</code> 文件，找到 <code><arguments></code> 标签，在里面加上 <code>-Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true</code>。它的作用是关闭 <code>CSRF</code> 验证，不关的话，Gitea 的 <code>webhook</code> 会一直报 403 错误，无法使用。加好参数后，在该目录命令行下输入 <code>jenkins.exe restart</code> 重启 Jenkins。
<img src="https://img-blog.csdnimg.cn/20201024212509363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
7. 回到首页，配置全局安全选项。勾上<code>匿名用户具有可读权限</code>，再保存。 
<img src="https://img-blog.csdnimg.cn/20201024213402186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
<img src="https://img-blog.csdnimg.cn/20201024213422775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<ol start="8">
<li>打开你的 Gitea 仓库页面，选择<code>仓库设置</code>。 
<img src="https://img-blog.csdnimg.cn/20201024212055143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>点击<code>管理 web 钩子</code>，添加 web 钩子，钩子选项选择 <code>Gitea</code>。</li>
<li>目标 URL 按照 Jenkins 的提示输入内容。然后点击<code>添加 web 钩子</code>。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/20201024212217870.png#pic_center"> 
<img src="https://img-blog.csdnimg.cn/20201024212851423.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
11. 点击创建好的 web 钩子，拉到下方，点击测试推送。不出意外，应该能看到推送成功的消息，此时回到 Jenkins 首页，发现已经在构建项目了。 
<img src="https://img-blog.csdnimg.cn/20201024213039447.png#pic_center"> 
12. 由于没有配置 <code>Jenkinsfile</code> 文件，此时构建是不会成功的。所以接下来需要配置一下 <code>Jenkinsfile</code> 文件。将以下代码复制到你 Gitea 项目下的 <code>Jenkinsfile</code> 文件。jenkins 在构建时会自动读取文件的内容执行构建及部署操作。
<pre><code>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' // 这里需要改成你的静态服务器资源目录
 }
 }
}
}
</code></pre>
<ol start="13">
<li>每当你的 Gitea 项目执行 <code>push</code> 操作时，Gitea 都会通过 <code>webhook</code> 发送一个 post 请求给 Jenkins，让它执行构建及部署操作。 
<img src="https://img-blog.csdnimg.cn/20201024214742463.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
</ol>
<h3 id="小结">小结</h3>
如果你的操作系统是 Linux，可以在 Jenkins 打包完成后，使用 ssh 远程登录到阿里云，将打包后的文件复制到阿里云上的静态服务器上，这样就能实现阿里云自动部署了。具体怎么远程登录到阿里云，请看下文中的《Github Actions 部署到阿里云》一节。
<h2 id="github-actions-自动构建前端项目并部署到服务器">Github Actions 自动构建前端项目并部署到服务器</h2>
如果你的项目是 Github 项目，那么使用 Github Actions 也许是更好的选择。
<h3 id="部署到-github-page">部署到 Github Page</h3>
接下来看一下如何使用 Github Actions 部署到 Github Page。
在你需要部署到 Github Page 的项目下，建立一个 yml 文件，放在 <code>.github/workflow</code> 目录下。你可以命名为 <code>ci.yml</code>，它类似于 Jenkins 的 <code>Jenkinsfile</code> 文件，里面包含的是要自动执行的脚本代码。
这个 yml 文件的内容如下：
<pre><code class="language-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 目录下

</code></pre>
上面有一个 <code>ACCESS_TOKEN</code> 变量需要自己配置。
<ol>
<li>打开 Github 网站，点击你右上角的头像，选择 <code>settings</code>。 
<img src="https://img-blog.csdnimg.cn/20201024221953416.png#pic_center"></li>
<li>点击左下角的 <code>developer settings</code>。 
<img src="https://img-blog.csdnimg.cn/2020102422203618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>在左侧边栏中，单击 <code>Personal access tokens（个人访问令牌）</code>。 
<img src="https://img-blog.csdnimg.cn/20201024222144306.png#pic_center"></li>
<li>单击 <code>Generate new token（生成新令牌）</code>。 
<img src="https://img-blog.csdnimg.cn/20201024222230631.png#pic_center"></li>
<li>输入名称并勾选 <code>repo</code>。 
<img src="https://img-blog.csdnimg.cn/20201024222332554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"></li>
<li>拉到最下面，点击 <code>Generate token</code>，并将生成的 token 保存起来。</li>
</ol>
<img src="https://img-blog.csdnimg.cn/2020102422240156.png#pic_center"> 
7. 打开你的 Github 项目，点击 <code>settings</code>。
<img src="https://img-blog.csdnimg.cn/20201024220451842.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
点击 <code>secrets</code>-><code>new secret</code>。 
<img src="https://img-blog.csdnimg.cn/20201024220533424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
创建一个密钥，名称随便填（中间用下划线隔开），内容填入刚才创建的 token。 
<img src="https://img-blog.csdnimg.cn/2020102422271079.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<img src="https://img-blog.csdnimg.cn/20201024220817121.png#pic_center"> 
将上文代码中的 <code>ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }}</code> 替换成刚才创建的 secret 名字，替换后代码如下 <code>ACCESS_TOKEN: ${{ secrets.TEST_A_B }}</code>。保存后，提交到 Github。
以后你的项目只要执行 <code>git push</code>，Github Actions 就会自动构建项目并发布到你的 Github Page 上。
Github Actions 的执行详情点击仓库中的 <code>Actions</code> 选项查看。
<img src="https://img-blog.csdnimg.cn/20201024221224827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
<img src="https://img-blog.csdnimg.cn/20201024221439379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
具体详情可以参考一下我的 demo 项目 github-actions-demo。
构建成功后，打开 Github Page 网站，可以发现内容已经发布成功。
<img src="https://img-blog.csdnimg.cn/20201024222949136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<h3 id="github-actions-部署到阿里云">Github Actions 部署到阿里云</h3>
<h4 id="初始化阿里云服务器">初始化阿里云服务器</h4>
<ol>
<li>购买阿里云服务器，选择操作系统，我选的 ubuntu</li>
<li>在云服务器管理控制台选择实例->更多->密钥->重置实例密码（一会登陆用）</li>
<li>选择远程连接->VNC，会弹出一个密码，记住它，以后远程连接要用（ctrl + alt + f1~f6 切换终端，例如 ctrl + alt + f1 是第一个终端）</li>
<li>进入后是一个命令行输入 <code>root</code>（默认用户名），密码为你刚才重置的实例密码</li>
<li>登陆成功，更新安装源 <code>sudo apt-get update && sudo apt-get upgrade -y</code></li>
<li>安装 npm <code>sudo apt-get install npm</code></li>
<li>安装 npm 管理包 <code>sudo npm install -g n</code></li>
<li>安装 node 最新稳定版 <code>sudo n stable</code></li>
</ol>
<h4 id="创建一个静态服务器">创建一个静态服务器</h4>
<pre><code class="language-js">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 文件
</code></pre>
将以下代码输入进去（用 vim 进入文件后按 i 进行编辑，保存时按 esc 然后输入 :wq，再按 enter），更多使用方法请自行搜索。
<pre><code class="language-js">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`)
})
</code></pre>
执行 <code>node server.js</code> 开始监听，由于暂时没有 <code>dist</code> 目录，先不要着急。
注意，监听 IP 必须为 <code>0.0.0.0</code> ，详情请看部署Node.js项目注意事项。
阿里云入端口要在网络安全组中查看与配置。
<img src="https://img-blog.csdnimg.cn/20201025231038107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center">
<h4 id="创建阿里云密钥对">创建阿里云密钥对</h4>
请参考创建SSH密钥对和绑定SSH密钥对，将你的 ECS 服务器实例和密钥绑定，然后将私钥保存到你的电脑（例如保存在 ecs.pem 文件）。
打开你要部署到阿里云的 Github 项目，点击 setting->secrets。
<img src="https://img-blog.csdnimg.cn/20201025225129634.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
点击 new secret 
<img src="https://img-blog.csdnimg.cn/20201025225246884.png#pic_center"> 
secret 名称为 <code>SERVER_SSH_KEY</code>，并将刚才的阿里云密钥填入内容。
<img src="https://img-blog.csdnimg.cn/20201025225434432.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E0MTEwMjAzODI=,size_16,color_FFFFFF,t_70#pic_center"> 
点击 add secret 完成。
在你项目下建立 <code>.github\workflows\ci.yml</code> 文件，填入以下内容：
<pre><code class="language-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
</code></pre>
保存，推送到 Github 上。
以后只要你的项目执行 <code>git push</code> 操作，就会自动执行 <code>ci.yml</code> 定义的脚本，将打包文件放到你的阿里云静态服务器上。
这个 Actions 主要做了两件事：
<ol>
<li>克隆你的项目，下载依赖，打包。</li>
<li>用你的阿里云私钥以 SSH 的方式登录到阿里云，把打包的文件上传（使用 rsync）到阿里云指定的文件夹中。</li>
</ol>
如果还是不懂，建议看一下我的 demo。
<h3 id="ciyml-配置文件讲解"><code>ci.yml</code> 配置文件讲解</h3>
<ol>
<li><code>name</code>，表示这个工作流程（workflow）的名称。</li>
<li><code>on</code>，表示监听的意思，后面可以加上各种事件，例如 <code>push</code> 事件。</li>
</ol>
下面这段代码表示要监听 <code>master</code> 分支的 <code>push</code> 事件。当 Github Actions 监听到 <code>push</code> 事件发生时，它就会执行下面 <code>jobs</code> 定义的一系列操作。
<pre><code class="language-yml">name: Build app and deploy to aliyun
on:
#监听push操作
push:
branches:
 # master分支，你也可以改成其他分支
 - master
jobs:
...
</code></pre>
<ol start="3">
<li><code>jobs</code>，看字面意思就是一系列的作业，你可以在 <code>jobs</code> 字段下面定义很多作业，例如 <code>job1</code>、<code>job2</code> 等等，并且它们是并行执行的。</li>
</ol>
<pre><code class="language-yml">jobs:
job1:
...
job2:
...
job3:
...
</code></pre>
回头看一下 <code>ci.yml</code> 文件，它只有一个作业，即 <code>build</code>，作业的名称是自己定义的，你叫 <code>good</code> 也可以。
<ol start="4">
<li>
<code>runs-on</code>，表示你这个工作流程要运行在什么操作系统上，<code>ci.yml</code> 文件定义的是最新稳定版的 <code>ubuntu</code>。除了 ubuntu，它还可以选择 Mac 或 Windows。 
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa286b043d2f455d81c1ac034387481c~tplv-k3u1fbpfcp-watermark.image">
</li>
<li>
<code>steps</code>，看字面意思就是一系列的步骤，也就是说这个作业由一系列的步骤完成。例如先执行 <code>step1</code>，再执行 <code>step2</code>...
</li>
</ol>
<h4 id="setps-步骤讲解"><code>setps</code> 步骤讲解</h4>
<code>setps</code> 其实是一个数组，在 YAML 语法中，以 <code>-</code> 开始就是一个数组项。例如 <code>['a', 'b', 'c']</code> 用 YAML 语法表示为：
<pre><code class="language-yml">- a
- b
- c
</code></pre>
所以 <code>setps</code> 就是一个步骤数组，从上到下开始执行。从 <code>ci.yml</code> 文件来看，每一个小步骤都有几个相关选项：
<ol>
<li><code>name</code>，小步骤的名称。</li>
<li><code>uses</code>，小步骤使用的 actions 库名称或路径，Github Actions 允许你使用别人写好的 Actions 库。</li>
<li><code>run</code>，小步骤要执行的 <code>shell</code> 命令。</li>
<li><code>env</code>，设置与小步骤相关的环境变量。</li>
<li><code>with</code>，提供参数。</li>
</ol>
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71864f3ffec24798a7ccb1ca6eb3b1cf~tplv-k3u1fbpfcp-watermark.image">
综上所述，<code>ci.yml</code> 文件中的 <code>setps</code> 就很好理解了，下面从头到尾解释一边：
<pre><code class="language-yml"> 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
</code></pre>
<ol>
<li>使用 <code>actions/checkout@v1</code> 库克隆代码到 <code>ubuntu</code> 上。</li>
<li>使用 <code>actions/setup-node@v1</code> 库安装 nodejs，<code>with</code> 提供了一个参数 <code>node-version</code> 表示要安装的 nodejs 版本。</li>
<li>在 <code>ubuntu</code> 的 <code>shell</code> 上执行 <code>npm install</code> 下载依赖。</li>
<li>执行 <code>npm run build</code> 打包项目。</li>
<li>使用 <code>easingthemes/ssh-deploy@v2.1.5</code> 库，这个库的作用就是用 <code>SSH</code> 的方式远程登录到阿里云服务器，将打包好的文件夹复制到阿里云指定的目录上。</li>
</ol>
从 <code>env</code> 上可以看到，这个 actions 库要求我们提供几个环境变量：
<ol>
<li><code>SSH_PRIVATE_KEY</code>: 阿里云密钥对中的私钥（需要你提前写在 github secrets 上），</li>
<li><code>ARGS: '-rltgoDzvO --delete'</code>，没仔细研究，我猜是复制完文件就删除掉。</li>
<li><code>SOURCE</code>：打包后的文件夹名称</li>
<li><code>REMOTE_HOST</code>: 阿里云公网 IP 地址</li>
<li><code>REMOTE_USER</code>: 阿里云服务器的用户名</li>
<li><code>TARGET</code>: 你要拷贝到阿里云服务器指定目录的名称</li>
</ol>
如果你想了解一下其他 actions 库的实现，可以直接复制 actions 库的名称去搜索引擎搜索一下，例如搜索 <code>actions/checkout</code> 的结果为：
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2e353600ce54f1e8b0517c13d596b9c~tplv-k3u1fbpfcp-watermark.image">
都看到这了，给个赞再走吧。
<h2 id="参考资料">参考资料</h2>
<ul>
<li>Jenkins 用户手册</li>
<li>GitHub Actions 文档</li>
<li>GitHub Pages 文档</li>
<li>Gitea 文档</li>
<li>GitHub 操作的工作流程语法</li>
</ul>
<h3 id="更多文章敬请关注">更多文章，敬请关注</h3> 
来源：https://www.cnblogs.com/woai3c/p/13877239.html

頁: [1]

琼殿技术论坛's Archiver

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