在读这篇文档时，希望你对 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就可以了。
)
)
)
