nuxt+pm2 自動化部署及打包後檔案自動上傳阿里雲OSS

範兒發表於2019-01-28
UX阿里

在讀這篇文件時，希望你對 nuxt 及 pm2，有簡單的瞭解

前期準備

安裝 pm2 及構建 nuxt

$ npm i pm2 -g
$ npx create-nuxt-app <專案名>
複製程式碼

ssh 金鑰配置

  • pm2 程式碼自動釋出依賴於 git 工具，先將 ssh 金鑰配置在你的程式碼倉庫（github 或者 gitLab），具體操作自行 google 或者點選github 配置 ssh。
  • 使用 ssh 金鑰連結伺服器
    $ ssh-copy-id root@1.2.3.4
# 把本機的 SSH 祕鑰新增至伺服器，配置成功後，以後就不需要再執行這條 SSH 命令了
複製程式碼

pm2 自動部署

生成 pm2 配置檔案

$ pm2 ecosystem
複製程式碼

執行後會在專案根目錄生成 ecosystem.config.js 檔案

這是個簡單的配置檔案，供大家參考

module.exports = {
  apps: [
    {
      name: "my-app",
      autorestart: true,
      script: "server/index.js",
      env: {
        NODE_ENV: "development"
      },
      env_production: {
        NODE_ENV: "production"
      }
    }
  ],
  deploy: {
    dev: {
      // 伺服器操作使用者
      user: "root",
      // 伺服器ip
      host: "1.2.3.4",
      ref: "origin/master",
      repo: "https://github.com/faner11/angular-case.git",
      path: "/root/my-app",
      "post-deploy":
        "rm -rf node_modules && npm install && npm run build && pm2 startOrReload ecosystem.config.js --env production"
    }
};

複製程式碼

post-deploy中做了哪些操作

  • rm -rf node_modules 刪除 node_modules
  • npm install 重新安裝包
  • npm run build 執行打包
  • pm2 startOrReload ecosystem.config.js --env production pm2 啟動應用

初始化專案併發布

  • 本機初始化遠端伺服器上的專案pm2 deploy dev setup,命令中的dev是在上面配置檔案中寫的部署環境的名稱。
  • git 提交程式碼，git push origin master將程式碼提交至遠端倉庫。
  • 部署專案pm2 deploy dev，這個命令執行後伺服器把前面從本機提交至 git 倉庫上的最新程式碼拉下拉，並且執行post-deploy中的命令。一般沒什麼問題的話，經過這幾步操作，就能部署成功了。

打包後檔案上傳 oss

參考文件

上傳程式碼

在根目錄新建upload.js檔案

const OSS = require("ali-oss");
const fs = require("fs");
const path = require("path");
const os = require("os");
const PUBLIC_PATH = path.join(__dirname, "/");

const client = new OSS({
  accessKeyId: "your access key",
  accessKeySecret: "your access secret",
  bucket: "your bucket name",
  region: "oss-cn-hangzhou"
});

/**
 *獲取檔案目錄並刪除
 * @param {*} dir //檔案目錄
 */
async function deleteDir(dir) {
  let result = await client.list({
    prefix: dir
  });
  if (result.objects) {
    let aa = [];
    result.objects.forEach(function(obj) {
      aa.push(obj.name);
    });
    try {
      await client.deleteMulti(aa, {
        quiet: true
      });
      console.log("刪除成功");
    } catch (e) {
      console.log("檔案刪除失敗", e);
    }
  }
}

/**
 * 遍歷資料夾遞迴上傳
 * @param {path} src 本地路徑
 * @param {string} dist oos資料夾名 www|kouzi
 */
function addFileToOSSSync(src, dist) {
  let docs = fs.readdirSync(src);
  docs.forEach(function(doc) {
    let _src = src + "/" + doc,
      _dist = dist + "/" + doc;
    let st = fs.statSync(_src);
    // 判斷是否為檔案
    if (st.isFile() && doc !== ".DS_Store") {
      putOSS(_src, _dist);
    }
    // 如果是目錄則遞迴呼叫自身
    else if (st.isDirectory()) {
      addFileToOSSSync(_src, _dist);
    }
  });
}
/**
 *單個檔案上傳至oss
 */
async function putOSS(src, dist) {
  try {
    await client.put("/" + dist, src);
  } catch (e) {
    console.log("上傳失敗".e);
  }
}
/**
 *上傳檔案啟動
 *@param {string} dirName 將要上傳的檔名
 */
async function upFile(dirName) {
  try {
    await deleteDir(dirName);
    await addFileToOSSSync(PUBLIC_PATH + ".nuxt/dist/client", dirName);
    console.log(dirName + "上傳oss成功");
  } catch (err) {
    console.log(dirName + "上傳oss成功失敗", err);
  }
}

upFile("www");
複製程式碼

修改package.json

將scripts中的build改為如下：

{
  "scripts": {
    "build": "nuxt build && node upload.js"
  }
}
複製程式碼

修改nuxt.config.js

export default {
  build: {
    publicPath: "https://cdn.nuxtjs.org"
  }
};
複製程式碼

結束

至此我們的自動化部署加檔案自動上傳阿里雲 oss 就完成了。 以後只需執行pm2 deploy dev就可以了。

相關文章