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

• nuxt
• pm2

前期準備

安裝 pm2 及構建 nuxt

$ npm i pm2 -g $ npx create-nuxt-app <項目名>

ssh 密鑰配置

• pm2 代碼自動發布依賴于 git 工具，先將 ssh 密鑰配置再你的代碼倉庫（github 或者 gitLab），具體操作自行 google 或者點擊github 配置 ssh。
• 使用 ssh 密鑰鏈接服務器 s $ 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",// 服務器iphost: "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

參考文檔

• oss CDK node.js 版
• nuxt dist 文件上傳到 CDN 我們需要將 .nuxt/dist/client上傳至 cdn

上傳代碼

在根目錄新建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 + "/",delimiter: "/"});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就可以了。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ideaspringboot项目上传服务器_nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。