Vue项目打包完后如何自动上传至服务器

写在开头

我先说下一下,为啥要写这个,由于之前在写不见面开标5.0系统,修改完bug后,然后前端通过npm run build打包后生成文件,然后在通过FTP工具上传至服务器,整个过程,我还需要手动拷贝到服务器,如果一天打包好几次,就要手动拷贝好几次,非常繁琐

前端部署项目方案

前端部署

  1. 通过npm run build,构建前端静态资源文件
  2. 只需上传构建后的资源文件,然后上传至服务器指定目录
  3. 配置相关nginx或者其他相关服务,访问资源文件

服务器部署

  1. 上传前端项目文件
  2. 构建服务器前端环境,一般需要执行npm i,安装构建依赖
  3. 执行package.json中的scripts中配置打包相关命令
  4. 然后将打包的文件放置指定目录中
  5. 配置相关nginx或者其他相关服务,访问资源文件

前端部署VS服务器部署

  1. 服务器部署会通过npm i,安装一系列依赖包,这些依赖包很可能因为服务器上打包环境和本地打包环境不一致出现bug,前端部署本身开发机器已经安装好一切环境了,前端部署来发布其实是比较高效的选择,但我并不推荐这样做,这样源文件(当然源文件也在git或者svn上)是在本地开发者的电脑,而且有的公司会有专门的打包服务器部署
  2. 前端部署,后端部署人员不需要关注前端一些构建命令,以及环境变量等等问题

如何操作

已不见面5.0开标系统为列子

创建连接服务器文件

在根目录创建upload.server.js文件

// 服务器配置信息
const server = {
    host: 'xxx.xxx.xx.xx', // 服务器ip
    port: '22', // 端口一般默认22
    username: 'xxxxx', // 用户名
    password: 'xxxxx', // 密码
    pathNmae: 'bidopen5', // 上传到服务器的位置
    locaPath:'./test/' // 本地打包文件的位置
}

// 引入scp2
const client = require('scp2');
const ora = require('ora');
const spinner = ora('正在发布到服务器...');

const Client = require('ssh2').Client; // 创建shell脚本
const conn = new Client();

console.log('正在建立连接');
conn.on('ready', function () {
    console.log('已连接')
    if(!server.pathNmae){
        console.log('连接已关闭');
        conn.end()
        return false;
    }
    // 这里我拼接了放置服务器资源目录的位置 ,首选通过rm -rf删除了这个目录下的文件
    conn.exec('rm -rf /xxxx/' + server.pathNmae + '/*', function (err, stream) {
        console.log('删除文件');
        stream.on('close', function (code, signal) {
            console.log('开始上传')
            spinner.start();
            client.scp(server.locaPath, {
                "host": server.host,
                "port": server.port,
                "username": server.username,
                "password": server.password, 
                "path": '/xxxx/'+ server.pathNmae
            }, err => {
                spinner.stop();
                if (!err) {
                    console.log('项目发布完毕');
                } else {
                    console.log("err", err)
                }
                conn.end() // 结束命令
            })
        })
    })
}).connect({
    host: server.host,
    port: server.port,
    username: server.username,
    password: server.password
    //privateKey: '' //使用 私钥密钥登录 目前测试服务器不需要用到
});
const client = require('scp2');

scp2是一个命令行工具,可以连接到服务器上,能快速执行文件拷贝、下载、上传等

scp2具体API

const Client = require('ssh2').Client;

ssh2连接服务,能执行一些相关命令等等,其实就使用ssh2也能够完成文件的上传,下载等等,不要用到scp2

ssh2具体API参数github

配置启动项

在package.json中启动

这里我以测试环境为例子

"scripts": {
    "test": "vue-cli-service build --mode test", // 构建测试包
    "upload": "node upload.server.js", // 上传服务器文件
    "publish": "npm run test && npm run upload" // 发布命令(执行以上两个命令)
},

在命令行中执行npm run publish,效果如下
首选执行了vue-cli-service build --mode test命令

image.png

然后在执行完毕后,执行了node upload.server.js

image.png

查看服务器文件也是更新后

image.png

通过webpack执行node脚本

如果你的项目是以vue-cli构建的项目,在vue.config.js中的configureWebpack模块中

configureWebpack:config=>{
         const plugins = [];
    apply:(compiler)=>{
                    // 编译完成后
                    compiler.hooks.done.tap('DonePlugin', compilation => {
                        console.log('编译完成')
                        // 通过配置 package.json , 执行指定node.js脚本
                        exec('npm run upload', {stdio: 'inherit'});
                    });
       }
    return { plugins }
}

compiler.hooks.done.tap 是webpack提供的api,DonePlugin是构建完成的一个指令,详细webpack构建命令,然后在执行node脚本程序

直接通过node执行文件

直接执行的化,需要两步走,一步需要先获得前端编译好的静态资源文件,二步在调用上传脚本

npm run test
node upload.server.js

其实package.json就是执行了指定的node脚本,只不过整理的更有规范了

服务端部署

可以使用Jenkins,具体使用参考,实战笔记:Jenkins打造强大的前端自动化工作流,可视化管理,推荐使用

总结

服务器连接配置应当放在.env.xxx环境文件中做配置,这样可以针对不同的项目自动上传不同环境服务器文件
以上前端部署,只是刚好适应了公司目前前端打包现状


vipbic
vipbic是一个关注前端开发、网址导航、学习视屏免费下载、HTML5、CSS3、JavaScript、PHP的前端杨航开发...
1.7k 声望
805 粉丝
0 条评论
推荐阅读
关于'es' | 'cjs' | 'umd' | 'iife' 相关介绍
ECMAScript Module,现在使用的模块方案,使用 import export 来管理依赖浏览器直接通过 <script type="module"> 即可使用该写法。NodeJS 可以通过使用 mjs 后缀或者在 package.json 添加 "type"...

vipbic阅读 751

真香!GitHub Action一键部署
GitHub Action持续集成服务,目前已经免费开放使用,由于大部分人的个人项目都是放在github上,那么使用它来发布、测试、部署,是非常方便的。

HerryLo3阅读 6.1k评论 17

耗时一年半才出第一版,这个工具会一统前端么?
大家好,我卡颂。前端领域从不缺少热点,基本每过半年,就会出现新的工具。在这样快节奏的浪潮中,有个工具却显得格格不入,他就是Rome。从名字中我们就能窥探出一丝端倪,看看别的工具:vite(法语中快的的意思...

卡颂3阅读 1.2k评论 1

封面图
Turbopack 发布后的各方反应:Vite/Webpack/围观群众
上周整理了一下 Turbopack 发布后的各方反应,以便让自己和各位同学下一步做决策的时候能有所参考。接着忙碌的一周过去,我发现博客这周还没更,于是赶紧来补一下。

Meathill6阅读 839评论 1

封面图
想弄懂Babel?你必须得先弄清楚这几个包
相信很多人都知道Babel,知道它是用来编译ES6+的东西。但是再深入一点,大家都清楚我们平时项目中Babel用到的那些包作用是什么吗?为什么要用那几个包?

limingcan1阅读 549

封面图
前端脚手架开发入门
脚手架是一个通用开发工具,之前自己写一下原生web工程时总是需要重复搭建开发环境、重复写几乎相同的配置文件。为了避免每次的重复工作,统一开发环境、规范,于是想到自己写一个脚手架用用,顺便记录一下。

coderLeo1阅读 433

封面图
前端微服务跨域配置解决办法,devServer为例
前言Nginx: 在上一篇我提到的跨域配置是正式上线的时候使用nginx做为配置的参考。Webpack: 而我们更多的时候是在开发阶段就需要通过跨域进行联合开发各个子应用部分功能DevServer配置解决跨域子应用静态资源跨域...

smallStone1阅读 1k评论 4

1.7k 声望
805 粉丝
宣传栏