关于代码自动更新的一次实验

2021-08-14 分类：前端之旅 / 后端之路阅读(1302) 评论(0)

也是懒了, 之前 nuxt.js 的项目, 每次 build 完了之后, 都要手动把.nuxt 目录上传到服务端执行重启, 随着项目越来越大, 编译文件上传cdn 后已经有 500 第一个了, 从本地传服务器太慢了得几分钟, 之前一直想做个自动发布 , 但是太忙了没有做, 今天实在是忍不了了, 就简单做个自动发布,

自动上传还没有做, 后面打算依托七牛云或者 git 来做, 把资源包传上去再更新下来!

首先上传慢第一步是因为文件太多了,. 所以我们先把本地文件压缩一下: 简单实用 nodejs 做个脚本, 当然调用系统命令来压缩也是可以的!

const fs = require('fs');
const archiver = require('archiver');
const path = require('path')
const sonDir = path.resolve(__dirname,  './');
const outFile = sonDir + '/nuxt.zip';
try {
  fs.unlinkSync(outFile)
} catch (e) {}

let output = fs.createWriteStream(outFile);
let archive = archiver('zip', {
  zlib: {level: 9}
})

output.on('close', function () {
  console.log(`总共 ${archive.pointer()} 字节`)
  console.log('archiver完成文件的归档，文件输出流描述符已关闭')
})
output.on('end', function () {
  console.log('数据源已耗尽')
})
archive.on('warning', function (err) {
  if (err.code === 'ENOENT') {
    console.warn('stat故障和其他非阻塞错误')
  } else {
    throw err
  }
})
archive.on('error', function (err) {
  throw err
})
archive.pipe(output)
const appendDir = sonDir + '/.nuxt/';
console.log('appendDir', appendDir);
archive.directory(appendDir, '.nuxt', {})
archive.finalize();

const fs = require('fs');

const archiver = require('archiver');

const path = require('path')

const sonDir = path.resolve(__dirname, './');

const outFile = sonDir + '/nuxt.zip';

try {

fs.unlinkSync(outFile)

} catch (e) {}

let output = fs.createWriteStream(outFile);

let archive = archiver('zip', {

zlib: {level: 9}

})

output.on('close', function () {

console.log(`总共 ${archive.pointer()} 字节`)

console.log('archiver完成文件的归档，文件输出流描述符已关闭')

})

output.on('end', function () {

console.log('数据源已耗尽')

})

archive.on('warning', function (err) {

if (err.code === 'ENOENT') {

console.warn('stat故障和其他非阻塞错误')

} else {

throw err

}

})

archive.on('error', function (err) {

throw err

})

archive.pipe(output)

const appendDir = sonDir + '/.nuxt/';

console.log('appendDir', appendDir);

archive.directory(appendDir, '.nuxt', {})

archive.finalize();

压缩完成后, 本地就会多出一个 nuxt.zip, 可以实用七牛的资源公布功能把压缩包同步上去, 再触发服务端的下载, 下载后解压, 目前还没有做, 先手动上传!

直接上传 nuxt.zip 也就是一秒钟的事情,

传完了之后我也不想手动去解压然后重启pm2 , 简单用 php 做个本地服务端来解决吧!

$http = new Swoole\Http\Server('0.0.0.0', 8421);
$http->on('Request', function ($request, $response) {
  list($controller, $action) = explode('/', trim($request->server['request_uri'], '/'));
  $response->header('Content-Type', 'text/html; charset=utf-8');
  if ($controller == 'update' && $action == 'vr') {
    // 代码发布使用
    exec('unzip -o ./nuxt.zip', $return);
    sleep(1);
    exec('pm2 reload 6', $return2);
    print_r($return);
    print_r($return2);
    $response->end($return2);
  }
});
$http->start();

$http = new Swoole\Http\Server('0.0.0.0', 8421);

$http->on('Request', function ($request, $response) {

list($controller, $action) = explode('/', trim($request->server['request_uri'], '/'));

$response->header('Content-Type', 'text/html; charset=utf-8');

if ($controller == 'update' && $action == 'vr') {

// 代码发布使用

exec('unzip -o ./nuxt.zip', $return);

sleep(1);

exec('pm2 reload 6', $return2);

print_r($return);

print_r($return2);

$response->end($return2);

}

});

$http->start();

使用 pm2 启动这个 php 文件, 然后监听 8421 端口, 如果端口遇到路径为 /update/vr 的, 就执行解压操作, 然后重启pm2

因为我服务端已经存在文件, 因此解压时候需要带 -o 覆盖文件,

然后在以后的项目里新增一个控制器, 调用本地的 127.0.0.1:8421/update/vr来执行解压重启操作,

因为我们的 8421 端口没有对外开放, 所以使用内网其他服务器来调起服务器, 这样也比较安全一些~

可以使用 php 在本地起一个 curl 来访问一下新增的控制器,触发解压, 当然也可直接使用 node, 因为前端项目, 所以用 node 吧~

const axios = require('axios')
axios.get('https://嘻嘻嘻嘻嘻嘻.html?key=xxx').then(res=>{
  console.log(res.data)
})

const axios = require('axios')

axios.get('https://嘻嘻嘻嘻嘻嘻.html?key=xxx').then(res=>{

console.log(res.data)

})

大概如下, 本地调用一下, 加了个 key, 防止被恶意使用,

这样我们本地执行这个文件, 就可以触发服务端的代码解压和更新操作了~

最终的 script 如下:

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "zip": "node zip.js",
    "deploy": "node deploy.js",
    "build-upload": "nuxt build && node upload.js && node zip.js",
    "start": "nuxt start",
    "upload": "node upload.js",
    "generate": "nuxt generate"
  },