前端(SPA应用)自动化部署脚本（Shelljs）

目录

一、背景

二、现状

三、解决方案

 1.首先安装shelljs和ssh2-sftp-client

2.package.json里面新增命令

3.新建upload文件夹 里面新建config.js和index.js文件

config.js配置

index.js配置

执行脚本，部署上线

​重启nginx

访问主机 

---

一、背景

在前后端还没有分离的时代下，前端项目通常时放在后端项目的静态资源目录下一起部署的，那个时候并没有专门的前端程序员，或者也可以说前端程序员不需要自己部署网站。通常前端人员只需要把网站源文件如.html文件结尾的资源包发给后端或者运维即可，剩下的事便交给后端或运维搞定了。

二、现状

前后端分离开发后，前后端项目也通常分离部署了，这个时候可能就需要前端人员自己部署前端项目，然后前端人员可能很少接触到服务器等知识，所以部署网站时总是捉襟见肘。

三、解决方案

这边文章主要就是讲解如何将一个前端项目部署到服务器，并且外网可以访问，前端项目就以vue项目为例，React，Angular同理。过程会用到以下依赖库。

shelljs

这个库能够让我们在js文件中执行shell命令。shelljs做的事就是自动化，从耗时的重复性常规动作里解放出来，提升开发效率和工作心情。

ssh2-sftp-client

一个用于node.js的SFTP客户端，一个用于SSH2的包装程序（提供高级便利抽象）以及一个基于Promise的API。

 1.首先安装shelljs和ssh2-sftp-client

cnpm i shelljs ssh2-sftp-client --save-dev
或者
npm i shelljs ssh2-sftp-client --save-dev

NPM地址：ssh2-sftp-client - npm 

2.package.json里面新增命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "upload": "node upload/index.js",
    "lint": "vue-cli-service lint"
  },

3.新建upload文件夹 里面新建config.js和index.js文件

config.js配置

module.exports = {
  ip: "", // ssh地址
  username: "", // ssh 用户名
  port: "",      //端口
  password: "", // ssh 密码
  path: '/usr/local/nginx/html/code-nav/', // 操作开始文件夹 可以直接指向配置好的地址
  rmpath: '/usr/local/nginx/html/code-nav/' // 需要删除的文件夹
}

index.js配置

const config = require('./config.js')
const shell = require('shelljs')
const path = require('path')
let Client = require('ssh2-sftp-client')
// 打包 npm run build
const compileDist = async () => {
  if (shell.exec(`npm run build`).code == 0) {//判断是否打包完成
    console.log("打包成功")
  }
}

async function connectSSh () {
  let sftp = new Client()
  sftp.connect({
    host: config.ip, // 服务器 IP
    port: config.port,
    username: config.username,
    password: config.password
  }).then(() => {
    console.log("先执行删除服务器文件")
    return sftp.rmdir(config.rmpath, true)
  }).then(() => {
    // 上传文件
    console.log("开始上传")
    return sftp.uploadDir(path.resolve(__dirname, '../dist'), config.path)
  }).then(() => {
    console.log("上传完成")
    sftp.end()
  }).catch((err) => {
    console.log(err, '失败')
    sftp.end()
  })
}
async function runTask () {
  await compileDist()     //打包完成
  await connectSSh()      //提交上传
}
runTask()

 执行脚本，部署上线

npm run upload

服务器查看文件是否上传成功。

  重启nginx

./nginx -s reload

访问主机 

程序员导航-CODENAV

本文只实现了简单的本地构建、打包 、服务器上传等功能，大家可以根据个人需求扩展定制所需的功能。

完整的自动化流程可参考以下流程：

1. 从代码仓库拉取最新代码。
2. 执行构建脚本，生成构建结果。
3. 执行测试脚本，确保构建结果符合预期。
4. 打包构建结果，准备部署。
5. 将构建结果拷贝到目标服务器。
6. 执行部署脚本，部署构建结果。
7. 执行测试脚本，确保部署结果符合预期。
8. 完成部署。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。 

来源：程序员摸鱼导航