当前位置： 前端自动化构建工具-前端自动部署工具
git config --global --unset http.proxy
git config --global --unset https.proxy配置詹金斯
需要提前安装JDK。 网上有很多JDK的安装教程，请自行搜索。
打开 Jenkins 下载页面。
安装时遇到Logon Type，选择第一个。
默认端口是8080，这里我填8000。安装后会自动打开:8000网站。 这时候需要等待一段时间进行初始化。
按照提示找到对应的文件（直接复制路径在我的电脑打开），里面有管理员密码。
要安装插件，请选择第一个。
创建一个admin用户，点击Finish and Save，继续下一步。
配置完成后会自动进入首页，然后点击Manage Jenkins->Manage plugins安装插件。
单击可选插件，键入 nodejs，搜索插件并安装它。
安装完成后，返回首页，点击Manage Jenkins->Global Tool Configuration配置nodejs。 如果你的电脑是win7，nodejs版本最好不要太高，选择v12左右即可。
创建静态服务器
创建一个空目录，在里面执行npm init -y，初始化项目。
执行 npm i express 下载 express。
然后使用以下代码创建一个 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文件夹，访问该网站是一个空白页面。
不过不用担心，稍后您会看到内容。
自动构建+部署到服务器
下载Jenkins提供的demo工程building-a-multibranch-pipeline-project，然后在你的Gitea中新建一个仓库，将内容clone进去，提交到Gitea服务器。
打开Jenkins主页，点击New Item创建项目。
选择Source Code Management，输入你在Gitea上的仓库地址。
您也可以尝试计划构建，下面的代码表示每 5 分钟构建一次。
选择你的构建环境，这里选择刚才配置的nodejs。
点击添加构建步骤，windows选择execute windows batch command，linux选择execute shell。
输入npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y，这行命令的作用是安装依赖，构建项目，复制构建好的静态资源 进入指定目录G:\node-server\dist\。 该目录是静态服务器资源目录。
保存后返回首页。 单击项目旁边的小三角形，然后选择立即构建。
开始构建项目，我们可以点击项目查看构建过程。
构建成功，打开：8080/可以看到结果。
由于我们只是设置了每5分钟构建一次，所以我们可以更改网站的内容，然后什么都不做，等一会再打开网站看看。
将修改后的内容提交到Gitea服务器，稍等片刻。 打开网站，发现内容变了。
使用流水线构建项目
使用pipeline构建项目可以结合Gitea的webhook hook在执行git push时自动构建项目。
单击主页右上角的用户名，然后选择“设置”。
添加token，记得保存token。
打开Jenkins主页，点击New Item创建项目。
点击Build Trigger，选择Trigger Remote Build，填写刚才创建的token。
选择管道，根据提示输入内容，单击“保存”。
打开Jenkins安装目录下的jenkins.xml文件，找到tag，添加-Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。 它的作用是关闭CSRF验证。 如果不关闭，Gitea的webhook会一直报403错误，无法使用。 添加参数后，在目录命令行输入jenkins.exe restart 重启Jenkins。
返回主页并配置全局安全选项。 检查匿名用户是否有读取权限，然后保存。
打开您的 Gitea 存储库页面并选择存储库设置。
点击Manage web hooks前端自动化构建工具，添加web hooks，hook选项选择Gitea。
目标 URL 根据 Jenkins 的提示输入内容。 然后单击添加网络挂钩。
单击创建的 Web 钩子，向下滚动，然后单击测试推送。 毫不奇怪，您应该能够看到推送成功的消息。 这时候回到Jenkins主页，发现项目已经在构建中了。
由于没有配置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' // 这里需要改成你的静态服务器资源目录
}
}
}
}每当你的 Gitea 项目执行 push 操作时，Gitea 会通过 webhook 向 Jenkins 发送一个 post 请求，让它执行构建和部署操作。
概括
如果你的操作系统是Linux，你可以在Jenkins打包后使用ssh远程登录阿里云，将打包后的文件复制到阿里云上的静态服务器，实现阿里云的自动部署。 远程登录阿里云的方法详见下文“Github Actions Deployed to Alibaba Cloud”部分。
Github Actions自动构建前端项目并部署到服务器
如果你的项目是 Github 项目，那么使用 Github Actions 可能是更好的选择。
部署到 Github 页面
接下来我们看看如何使用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变量需要自己配置。
打开Github网站，点击右上角你的头像，选择设置。
点击左下角的开发者设置。
在左侧边栏中，单击个人访问令牌。
单击生成新令牌。
输入名称并检查 repo。
滚动到底部，单击生成令牌，并保存生成的令牌。
打开你的 Github 项目，点击设置。
点击秘密->新秘密。
创建一个key，填写name（中间用下划线隔开），content填写刚刚创建的token。
将上面代码中的 ACCESS_TOKEN: ${{ secrets.VUE_ADMIN_TEMPLATE }} 替换为您刚刚创建的秘密名称。 替换后的代码如下 ACCESS_TOKEN: ${{ secrets.TEST_A_B }}。 保存后，提交到 Github。
以后只要你的项目执行git push，Github Actions就会自动构建项目并发布到你的Github Page上。
点击仓库中的Actions选项，可以查看Github Actions的执行详情。
具体可以参考我的demo项目github-actions-demo。
构建成功后，打开Github Page网站，可以发现内容已经发布成功。
Github Actions部署到阿里云初始化阿里云服务器
买阿里云服务器，选操作系统，我选ubuntu
在云服务器管理控制台中，选择实例->更多->密钥->重置实例密码（用于稍后登录）
选择Remote Connection -> VNC，会弹出一个密码，记住，以后远程连接用（ctrl+alt+f1~f6切换终端，比如ctrl+alt+f1是第一个终端）
进去之后就是命令行输入root（默认用户名），密码就是你刚才重置的实例密码
登录成功，更新安装源 sudo apt-get update && sudo apt-get upgrade -y
安装 npm sudo apt-get install npm
安装 npm 管理包 sudo npm install -gn
安装最新稳定版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，回车），更多使用方法请自行搜索。
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。
点击新秘密
secret的名字是SERVER_SSH_KEY，内容填写刚才的阿里云密钥。
单击添加秘密以完成。
在你的项目下创建.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主要做了两件事：
克隆您的项目、下载依赖项和打包。
使用您的阿里云私钥通过SSH登录阿里云，将打包好的文件上传（使用rsync）到阿里云指定的文件夹中。
如果还是不明白，建议你看看我的demo。
ci.yml配置文件解释
name，表示这个工作流（workflow）的名称。
on，表示监听，后面可以跟各种事件，比如推送事件。
下面这段代码的意思是监听master分支的push事件。 当 Github Actions 监听到推送事件时，它会执行一系列由下面的作业定义的操作。
name: Build app and deploy to aliyun
on:
#监听push操作
push:
branches:
# master分支，你也可以改成其他分支
- master
jobs:
...Jobs，字面意思就是一系列的工作，你可以在jobs字段下定义很多个工作，比如job1，job2等，它们是并行执行的。
jobs:
job1:
...
job2:
...
job3:
...回头看ci.yml文件，它只有一个工作，就是build。 job的名字是自己定义的，随便叫就好了。
runs-on 表示你的工作流将在什么操作系统上运行，ci.yml 文件定义了 ubuntu 的最新稳定版本。 除了ubuntu之外，它还有Mac或者Windows的选择。
steps，字面意思是一系列的步骤，也就是说这个工作是由一系列的步骤完成的。 比如先执行step1，再执行step2...
设置步骤说明
setps 实际上是一个数组。 在 YAML 语法中，以 - 开头的是一个数组项。 例如 ['a', 'b', 'c'] 在 YAML 语法中表示为：
- a
- b
- c所以 setps 是一系列步骤，从上到下执行。 从 ci.yml 文件来看，每个小步骤都有几个相关的选项：
name，小步的名字。
uses，小步使用的actions库的名称或路径，Github Actions允许你使用别人写的Actions库。
运行，shell 命令以小步骤执行。
env，设置与小步骤相关的环境变量。
with，提供参数。
综上所述，ci.yml文件中的setps很容易理解。 让我们从头到尾解释一下：
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使用 actions/checkout@v1 库将代码克隆到 ubuntu。
使用actions/setup-node@v1库安装nodejs，提供一个参数node-version来表示要安装的nodejs版本。
在 ubuntu shell 上执行 npm install 以下载依赖项。
执行 npm run build 打包项目。
使用 easingthemes/ssh-deploy@v2.1.5 库。 该库的作用是通过SSH远程登录阿里云服务器，将打包后的文件夹复制到阿里云指定的目录下。
从env可以看出，这个actions库需要我们提供几个环境变量：
SSH_PRIVATE_KEY：阿里云密钥对中的私钥（需要提前写在github secrets上）前端自动化构建工具，
ARGS: '-rltgoDzvO --delete'，没仔细研究，估计是复制文件后删除的。
SOURCE：打包后的文件夹名称
REMOTE_HOST：阿里云公网IP地址
REMOTE_USER：阿里云服务器用户名
TARGET：要复制到阿里云服务器的目录名称
如果想了解其他动作库的实现，可以直接复制动作库的名称，在搜索引擎中搜索即可。 例如，搜索 actions/checkout 的结果是：
我看过这个，给个赞然后走。
参考
·结尾·
图克社区
汇集精彩免费实用教程
上一篇 
