寫在開頭

我先説下一下，為啥要寫這個，由於之前在寫不見面開標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命令

然後在執行完畢後，執行了node upload.server.js

查看服務器文件也是更新後

通過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環境文件中做配置，這樣可以針對不同的項目自動上傳不同環境服務器文件
以上前端部署，只是剛好適應了公司目前前端打包現狀