一、前端常规部署基本流程(个人版)

首次部署:

  1. 打包前端项目
  2. 域名申请
  3. 编写nginx配置 应用nginx配置
  4. 放置服务器配置的nginx路径上

后续部署:

  1. 打包前端项目
  2. 放置服务器配置的nginx路径上

这是最基本的单机部署流程 但是页面会经过不断的迭代 每次都要手动打包 很麻烦 因为重复性太高了 而且可能后续会维护更多的项目或页面

所以我使用jenkins 在后续部署上 

构建部署任务:拉取最新的gitee仓库数据->cnpm i 检查依赖->npm run build->远程部署到服务器上->飞书通知返回部署结果

二、使用jenkins 减少重复操作

        一、jenkins安装(linux)

        一文搞懂jenkins安装部署(Docker)

        如果不使用docker直接在本机上安装的话 可以去官网上下载windows版本

        https://www.jenkins.io/download/

        二、进入界面

这是我负责维护的项目所以我点击一下按钮就自动更新到最新到公网上与内网上

jenkins 前端项目指定构建分支_git

        三、插件安装

        在左侧面板中找到系统管理 并点击然后进入插件管理->点击available plugins

jenkins 前端项目指定构建分支_git_02

安装插件
  • Git client  (用于拉取git仓库)
  • Publish Over ssh(发布打包后的文件到服务器上 并且执行shell的操作)
  • NodeJS Plugin(npm依赖)
  • 飞书通知插件

插件配置 

配置node与ssh账号

ssh配置 

系统管理->系统配置 添加远程服务器的账号

jenkins 前端项目指定构建分支_前端_03

node配置

系统管理->全局工具配置

安装cnpm 和 yarn 并且设置安装源为淘宝源 由于是存在docker中 而且每次运行的环境包不会保存到全局中 所以提前安装好后 并且设置保存时间设置为9999小时 防止每次打包都要下载

windows下 不要安装这个插件 因为你开发本来有nodejs环境

在Execute Windows batch command可以直接使用 而且可以使用全局包 不像nodejs plugins下它在temp文件夹下创了一个模拟环境

jenkins 前端项目指定构建分支_前端_04

四、 编写jenkins任务

左侧面板->新建任务->选择构建一个自由风格的软件项目 后续一个配置完毕后 只需要在下方输入已经配置好的项目名称 即可创建一个复制配置的项目(只需要修改打包文件夹文位置 git地址即可使用)

jenkins 前端项目指定构建分支_运维_05

配置git地址与凭证 源码管理中填写git地址

jenkins 前端项目指定构建分支_运维_06

 点击添加即可添加git凭证

构建步骤使用node 提前构建node环境 方便后续安装依赖

jenkins 前端项目指定构建分支_git_07

添加shell命令 安装更新依赖 并打包

jenkins 前端项目指定构建分支_jenkins 前端项目指定构建分支_08

 调用远程传输功能

jenkins 前端项目指定构建分支_jenkins 前端项目指定构建分支_09

要打开这个 不然打包日志不会输出远程日志传输的信息

jenkins 前端项目指定构建分支_jenkins 前端项目指定构建分支_10

保存配置 打包

jenkins 前端项目指定构建分支_jenkins_11

飞书机器人配置请查看上面给的插件网址说明

这样我们减少了每次重复操作的行为(且功能不止这一点 还可以脱离这个界面 利用jenkins的api打包unity 并附带自己编写的行为)