說明&用途

該插件是應對小規(guī)模開發(fā)而開發(fā)的快速部署工具。該工具是基于ubuntu服務(wù)器進行配置的。需要服務(wù)器安裝nginx并配置index的轉(zhuǎn)發(fā)地址。同時為指定的cos bucket創(chuàng)建外部鏈接 如 https://static.test.com

發(fā)布邏輯

將index文件發(fā)布到服務(wù)器指定位置，靜態(tài)文件發(fā)布到騰訊cos上。（打包時注意靜態(tài)文件路徑，見備注）

安裝

$  npm install maike-deploy -g

配置

在前端項目的根目錄創(chuàng)建deploy.json文件，配置參數(shù)如下：

{
  "pre": { // 環(huán)境名，可自定義，下面工具執(zhí)行時會用到
    "index":"index.html", // 入口html文件
    "serverParams":{
      "host": "", // 服務(wù)器地址
      "port": 22, // ssh端口 
      "username": "",  // 用戶名
      "password": "", // 服務(wù)器密碼
      "path": "",// 靜態(tài)html文件存放位置
    },
    "cosParams":{
      "SecretId":"", // cos secretId
      "SecretKey":"", // cos secretKey
      "Bucket":"", // bucket名稱
      "Region":"ap-beijing", // COS所在region
      "Path":"testProduct" // cos目錄 如 test 或 test/test2 ,不建議放在根目錄,此處testProduct是示例，需要與下面.env配置同(備注)
    }
  },
  "prod": {
    "index":"index.html", 
    "serverParams":{
      "host": "", 
      "port": 22,
      "username": "", 
      "password": "",
      "path": "",
    },
    "cosParams":{
      "SecretId":"", 
      "SecretKey":"",
      "Bucket":"", 
      "Region":"ap-beijing", 
      "Path":"" 
    }
  },
}

執(zhí)行命令 （先執(zhí)行對應的打包命令生成dist文件夾）

直接執(zhí)行，不用再package.json中配置啟動命令

$ deploy dev || deploy prod

備注

webpakc打包時需要配置相關(guān)的文件，如在根目錄創(chuàng)建 .env.pre

NODE_ENV = 'production'
VUE_APP_STATIC_URL=https://static.test.com/testProduct // 此處以vue舉例

在webpack的配置文件中指定,這樣打包出來的靜態(tài)文件引用地址會自動添加VUE_APP_STATIC_URL

publicPath: process.env.VUE_APP_STATIC_URL

package.json 的script中添加執(zhí)行指令

"pre": "vue-cli-service build --mode pre", // 執(zhí)行npm run pre的時候會自動引用.env.pre配置文件

其他

作者：張boy
其他問題可聯(lián)系微信: maikeshequ
歡迎關(guān)注簡書 張boy 和公眾號 麥殼前端技術(shù) 更多好玩好用的前端開發(fā)技術(shù)持續(xù)更新中