express+webpack實現build以後把dist文件上傳到服務器（EC2）

用webpack搭建相關環境，如須要參考Webpack4+React+Typescript搭建開發環境
安裝客戶端所需包
1.用於發送請求，可自行選擇

npm install --save request
npm install --save request-promise-native

開始編寫客戶端上傳文件代碼
1.首先，用遞歸的方式獲取到指定要上傳得文件夾下得文件，須要用到node.js的相關模塊

function getFiles(dir: string, files_: string[]) {
    files_ = files_ || [];
    let files = fs.readdirSync(dir); //同步的方向讀取dir下的所有文件
    for (let i in files) {
        let name = dir + '/' + files[i];
        if (fs.statSync(name).isDirectory())//是文件夾，繼續遍歷
            getFiles(name, files_);
        else
            files_.push(name);
    }
    return files_;
}

2.建立formdata對象

//要讀取的文件路徑
let dir = path.resolve(__dirname, "../../dist");

let files = getFiles(dir, []);
let formData: any = {};

for (let f of files) {
    //存儲爲流的方式
    formData[f.substr(dir.length + 1)] = fs.createReadStream(f);
}
//須要請求的路徑
let url = `http://www.xxxxx.online:3000/upload`;

rq.post({ url, formData }, function optionalCallback(err, httpResponse, body) {
    if (err || !body || JSON.parse(body)['success'] !== "ok")
        return console.error('部署失敗!', err);
    else {
        console.info(`部署成功!`);
    }
});

以上是客戶端請求須要的代碼，能夠根據本身的實際須要進行調整.接下來寫服務端的代碼.
除了用到express外，還用了multer來上傳代碼
npm i multer --save

app.js

var express = require('express');
var path = require('path');

var indexRouter = require('./Routes/route');

var app = express();
app.all('*',(req,res,next)=>{
  res.header("Access-Control-Allow-Origin","*");
  res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers','Content-Type');
  res.header('Access-Control-Allow-Credentials',true);
  next();
})


//輸出服務器記錄
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

app.listen(3000,()=>{
  console.log('listening on port 3000!');
})

//路由
route.js

const express = require('express');
const path = require('path');
const fs = require('fs');
const router = express.Router();
const storage = require('../Utility/utility').storage;
// const createFolder = require('../Utility/utility').createFolder;
var multer = require('multer');

// 使用硬盤存儲模式設置存放接收到的文件的路徑以及文件名
exports.storage = multer.diskStorage({
  destination: function (req, file, cb) {
      // 接收到文件後輸出的保存路徑（若不存在則根據須要是否須要建立,這裏保存在ec2項目文件同級目錄下）
      cb(null, '../');    
  },
  filename: function (req, file, cb) {
      // 將保存文件名設置爲 時間戳 + 文件原始名，好比 151342376785-123.jpg
      cb(null, file.originalname);  
  }
});

// 建立 multer 對象
var upload = multer({ storage: storage });

//上傳
router.post('/upload', function (req, res, next) {
  let filePath = path.resolve(__dirname, '../');
  console.log('filePath: ', filePath);
  fs.readdir(filePath, (err, files) => {
    if (!err) {
        //由於build文件會根據項目更改而改變，因此先刪除舊的bundle文件
      files.forEach(f => {
        let tmpPath = path.join(filePath, f)
        if (f.indexOf("bundle.js") !== -1)
          fs.unlink(tmpPath, e => {
          });
      })
    }
    else {
      res.send({ success: "no" })
    }
  });
   //上傳文件
  upload.any()(req, res, err => {
    if (err)
      res.send({ success: "no" });
    else{
      console.log("上傳成功，上傳位置在"+filePath+"文件數："+req.files.length)
      res.send({ success: "ok" });
    }
  })
});
module.exports = router;

上傳服務端文件至虛擬服務器，node.js運行便可,
github地址

效果以下圖