关于javascript:前端项目自动化部署超详细教程JenkinsGithub-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.proxygit 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 = 8080app.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 我的项目，那么应用 Ggithub Actions 兴许是更好的抉择。

部署到 Github Page

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

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

这个 yml 文件的内容如下：

name: Build and Deployon: # 监听 master 分支上的 push 事件  push:    branches:      - masterjobs:  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 expresstouch 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 aliyunon:  #监听push操作  push:    branches:      # master分支，你也能够改成其余分支      - masterjobs:  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 文档

更多文章，敬请关注