在讀這篇文檔時(shí)，希望你對(duì) nuxt 及 pm2，有簡(jiǎn)單的了解

• nuxt
• pm2

前期準(zhǔn)備

安裝 pm2 及構(gòu)建 nuxt

$ npm i pm2 -g $ npx create-nuxt-app <項(xiàng)目名>

ssh 密鑰配置

• pm2 代碼自動(dòng)發(fā)布依賴于 git 工具，先將 ssh 密鑰配置再你的代碼倉庫（github 或者 gitLab），具體操作自行 google 或者點(diǎn)擊github 配置 ssh。
• 使用 ssh 密鑰鏈接服務(wù)器 s $ ssh-copy-id root@1.2.3.4 # 把本機(jī)的 SSH 秘鑰添加至服務(wù)器，配置成功后，以后就不需要再執(zhí)行這條 SSH 命令了

pm2 自動(dòng)部署

生成 pm2 配置文件

$ pm2 ecosystem

運(yùn)行后會(huì)在項(xiàng)目根目錄生成 ecosystem.config.js 文件

這是個(gè)簡(jiǎn)單的配置文件，供大家參考

module.exports = {apps: [{name: "my-app",autorestart: true,script: "server/index.js",env: {NODE_ENV: "development"},env_production: {NODE_ENV: "production"}}],deploy: {dev: {// 服務(wù)器操作用戶user: "root",// 服務(wù)器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 運(yùn)行打包 + pm2 startOrReload ecosystem.config.js --env production pm2 啟動(dòng)應(yīng)用

初始化項(xiàng)目并發(fā)布

• 本機(jī)初始化遠(yuǎn)程服務(wù)器上的項(xiàng)目pm2 deploy dev setup,命令中的dev是在上面配置文件中寫的部署環(huán)境的名稱。
• git 提交代碼，git push origin master將代碼提交至遠(yuǎn)程倉庫。
• 部署項(xiàng)目pm2 deploy dev，這個(gè)命令執(zhí)行后服務(wù)器把前面從本機(jī)提交至 git 倉庫上的最新代碼拉下拉，并且運(yùn)行post-deploy中的命令。一般沒什么問題的話，經(jīng)過這幾步操作，就能部署成功了。

打包后文件上傳 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);}// 如果是目錄則遞歸調(diào)用自身else if (st.isDirectory()) {addFileToOSSSync(_src, _dist);}}); } /***單個(gè)文件上傳至oss*/ async function putOSS(src, dist) {try {await client.put("/" + dist, src);} catch (e) {console.log("上傳失敗".e);} } /***上傳文件啟動(dòng)*@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"} };

結(jié)束

至此我們的自動(dòng)化部署加文件自動(dòng)上傳阿里云 oss 就完成了。 以后只需執(zhí)行pm2 deploy dev就可以了。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。