nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss(精华)

2020-03-17 14:21:31

参考地址 nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss

在读这篇文档时,希望你对 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",
      // 服务器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 + "/",
    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就可以了。


  • 2020-04-03 19:10:56

    nodejs与javascript中的aes加密

    aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用。高级加密标准已然成为对称密钥加密中最流行的算法之一。

  • 2020-04-03 19:13:05

    Express-session的使用

    当浏览器访问服务器并发送第一次请求时,服务器端会创建一个 session 对象,生成一个类似于 key,value 的键值对,然后将 key(cookie)返回到浏览器(客户)端,浏览器下次再访问时,携带 key(cookie), 找到对应的 session(value)。 客户的信息都保存在 session 中

  • 2020-04-08 22:46:28

    Element的操作方法

    Element 是一个通用性非常强的基类,所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如, HTMLElement 接口是所有 HTML 元素的基本接口,而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级(hierarchy)的接口中被进一步制定的。

  • 2020-04-12 17:42:43

    Node.js设置CORS跨域请求中多域名白名单的方法

    在Node.js中,res的响应头Header中的 Access-Control-Allow-Origin 属性不能匹配除 (*) 以外的正则表达式的,域名之间不能也用逗号分隔。也就是说, Access-Control-Allow-Origin 的属性值只允许设置为单个确定域名字符串或者 (*)。

  • 2020-04-14 09:40:59

    CSS3实现文字描边的2种方法

    首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke     该属性是一个复合属性,可以设置文字宽度和文字描边颜色      该属性使用很简单:text-stroke:1px #f00;(1px是文字宽度,#ff是文字描边颜色)

  • 2020-04-14 09:42:47

    用 TypeScript 编写 npm 模块

    自从开始使用 Node.js 已经一年多,写的代码越多,越是觉得自己提高的越慢。想来应该有没有将单一功能的代码封装在一个独立模块,而导致代码稍微多一点就维护困难的原因。