前端项⽬⾃动化部署——超详细教程（Jenkins、
GithubActions）
本教程主要讲解了怎么使⽤ 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. 下载，选择⼀个喜欢的版本，例如 1.13，选择gitea-1.下载。
2. 下载完后，新建⼀个⽬录（例如 gitea），将下载的 Gitea 软件放到该⽬录下，双击运⾏。
3. 打开localhost:3000就能看到 Gitea 已经运⾏在你的电脑上了。
4. 点击注册，第⼀次会弹出⼀个初始配置页⾯，数据库选择SQLite3。另外把localhost改成你电脑的局域⽹地址，例如我的电脑 IP 为
192.168.0.118。
5. 填完信息后，点击⽴即安装，等待⼀会，即可完成配置。
6. 继续点击注册⽤户，第⼀个注册的⽤户将会成会管理员。
7. 打开 Gitea 的安装⽬录，到custom\conf\app.ini，在⾥⾯加上⼀⾏代码START_SSH_SERVER = true。这时就可以使⽤ ssh 进⾏ push 操作了。
8. 如果使⽤ http 的⽅式⽆法克隆项⽬，请取消 git 代理。
git config --global --unset http.proxy
git config --global --unset https.proxy
配置 Jenkins
1. 需要提前安装 JDK，JDK 安装教程⽹上很多，请⾃⾏搜索。
2. 打开下载页⾯。
3. 安装过程中遇到Logon Type时，选择第⼀个。
4. 端⼝默认为 8080，这⾥我填的是 8000。安装完会⾃动打开localhost:8000⽹站，这时需要等待⼀会，进⾏初始化。
5. 按照提⽰到对应的⽂件（直接复制路径在我的电脑中打开），其中有管理员密码。
6. 安装插件，选择第⼀个。
7. 创建管理员⽤户，点击完成并保存，然后⼀路下⼀步。
8. 配置完成后⾃动进⼊⾸页，这时点击Manage Jenkins -> Manage plugins安装插件。
9. 点击可选插件，输⼊ nodejs，搜索插件，然后安装。
10. 安装完成后回到⾸页，点击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 localhost:${port}`)
})
它将当前⽬录下的dist⽂件夹设为静态服务器资源⽬录，然后执⾏node server.js启动服务器。
由于现在没有dist⽂件夹，所以访问⽹站是空页⾯。
不过不要着急，⼀会就能看到内容了。
⾃动构建 + 部署到服务器
1. 下载 Jenkins 提供的 demo 项⽬，然后在你的 Gitea 新建⼀个仓库，把内容克隆进去，并提交到 Gitea 服务器。
2. 打开 Jenkins ⾸页，点击新建 Item创建项⽬。
3. 选择源码管理，输⼊你的 Gitea 上的仓库地址。
4. 你也可以尝试⼀下定时构建，下⾯这个代码表⽰每 5 分钟构建⼀次。
5. 选择你的构建环境，这⾥选择刚才配置的 nodejs。
6. 点击增加构建步骤，windows 要选execute windows batch command，linux 要选execute shell。
7. 输⼊npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y，这⾏命令的作⽤是安装依赖，构建项⽬，并将构建后的静态资源复制
到指定⽬录G:\node-server\dist\ 。这个⽬录是静态服务器资源⽬录。
8. 保存后，返回⾸页。点击项⽬旁边的⼩三⾓，选择build now。
9. 开始构建项⽬，我们可以点击项⽬查看构建过程。
10. 构建成功，打开localhost:8080/看⼀下结果。
11. 由于刚才设置了每 5 分钟构建⼀次，我们可以改变⼀下⽹站的内容，然后什么都不做，等待⼀会再打开⽹站看看。
12. 把修改的内容提交到 Gitea 服务器，稍等⼀会。打开⽹站，发现内容已经发⽣了变化。
使⽤ pipeline 构建项⽬
使⽤流⽔线构建项⽬可以结合 Gitea 的webhook钩⼦，以便在执⾏git push的时候，⾃动构建项⽬。
1. 点击⾸页右上⾓的⽤户名，选择设置。
2. 添加 token，记得将 token 保存起来。
3. 打开 Jenkins ⾸页，点击新建 Item创建项⽬。
4. 点击构建触发器，选择触发远程构建，填⼊刚才创建的 token。
5. 选择流⽔线，按照提⽰输⼊内容，然后点击保存。
6. 打开 Jenkins 安装⽬录下的l⽂件，到<arguments>标签，在⾥⾯加上-
Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的作⽤是关闭CSRF验证，不关的话，Gitea 的webhook会
⼀直报 403 错误，⽆法使⽤。加好参数后，在该⽬录命令⾏下输⼊ restart重启 Jenkins。
7. 回到⾸页，配置全局安全选项。勾上匿名⽤户具有可读权限，再保存。
8. 打开你的 Gitea 仓库页⾯，选择仓库设置。
9. 点击管理 web 钩⼦，添加 web 钩⼦，钩⼦选项选择Gitea。
10. ⽬标 URL 按照 Jenkins 的提⽰输⼊内容。然后点击添加 web 钩⼦。
11. 点击创建好的 web 钩⼦，拉到下⽅，点击测试推送。不出意外，应该能看到推送成功的消息，此时回到 Jenkins ⾸页，发现已经在构建项⽬了。
12. 由于没有配置Jenkinsfile⽂件，此时构建是不会成功的。所以接下来需要配置⼀下Jenkinsfile⽂件。将以下代码复制到你 Gitea 项⽬下的Jenkinsfile⽂件。jenkins 在构建时会⾃动读取⽂件的内容执⾏构建及部署操作。
pipeline {
agent any
stages {
stage('Build') {
steps {  // window 使⽤ bat， linux 使⽤ sh
bat 'npm i'
bat 'npm run build'
}
linux安装jdk教程
}
stage('Deploy') {
steps {
bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 这⾥需要改成你的静态服务器资源⽬录
}
}
}
}
13. 每当你的 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。
2. 点击左下⾓的developer settings。
3. 在左侧边栏中，单击Personal access tokens（个⼈访问令牌）。
4. 单击Generate new token（⽣成新令牌）。
5. 输⼊名称并勾选repo。
6. 拉到最下⾯，点击Generate token，并将⽣成的 token 保存起来。
7. 打开你的 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 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，详情请看。
阿⾥云⼊端⼝要在⽹络安全组中查看与配置。
创建阿⾥云密钥对
请参考和，将你的 ECS 服务器实例和密钥绑定，然后将私钥保存到你的电脑（例如保存在 ecs.pem ⽂件）。
打开你要部署到阿⾥云的 Github 项⽬，点击 setting->secrets。
点击 new secret
secret 名称为SERVER_SSH_KEY，并将刚才的阿⾥云密钥填⼊内容。
点击 add secret 完成。
在你项⽬下建⽴.github\l⽂件，填⼊以下内容：
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）到阿⾥云指定的⽂件夹中。
如果还是不懂，建议看⼀下我的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。