首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >pm2:从小白到写出一键部署前后端工程

pm2:从小白到写出一键部署前后端工程

作者头像
贺贺V5
发布2021-07-08 14:59:05
7600
发布2021-07-08 14:59:05
举报

背景

基于公司KPI自我学习进步,以及我本人是负责后台管理系统开发维护的大环境背景下,我决定研究并开发了,拖拽生成代码的工具,目前完成的功能有: 拖拽生成 Table 页面和拖拽自动生成 Form 表单。

  1. 拖拽生成 Table 页面
  • 拖拽组件,从菜单栏到中间区域,或者同区域内更换位置,不同区域可以更换,只是目前,没有一个组件是会同时可以出现在 2 个区域的,所以此功能暂时无法看到;
  • 单击编辑属性
  • 右击删除
  • 生成代码
    • 可直接复制
    • 可生成文件并下载 zip 包
  1. 拖拽自动生成 Form 表单 拖拽生成 form 表单,从左侧菜单栏中,将 form 元素拖到中间区域,可根据右上角的「N 列布局」输入你想要的 N 列布局,中间区域的各个 form 表单元素,可自由拖拽更换位置。可以点击这里来使用。此功能第一个版本可以看到的有:
  • 可以生成是单列,双列或者 N([1,10]) 列
  • 可以拖拽生成组件
  • 添加普通校验:必填
  • 单击编辑属性
  • 右击删除
  • 生成代码
    • 可直接复制
    • 可生成文件并下载 zip 包
  • 解决拖拽过程中定位不准确的 bug

简介

该项目前后端分离,前端是react写的,后端是node写的一个非常小的服务,用于生成目录文件,以及压缩zip包来下载生成的代码。写这个项目也主要是为了自己走一遍前端从开发到部署的所有流程。

本人主业是前端工程师,node是自己感兴趣想学的,所以写的只能说功能上还能用,代码质量渣的xx。

学习步骤

项目目录介绍

image.png

原始农业

刚开始,只为满足功能,能跑起来就OK。 纯手工部署。步骤如下:

前端部分

先登录服务器,将,代码git clone 下来,然后cd service目录下执行npm install

# 在本地项目执行命令
# 正确来说,应该在服务器上执行这个命令,鉴于我的阿里云服务器内存很小,就在本地执行。但是基于工作经历来说,我们有的线上项目,大型后,在线上服务器进行build也会很慢,有时候还会卡死,所以在本地build也没什么薄饼。
npm run build

# 拷贝(在本地执行)
# 服务器上的路径,/srv/front,直接将文件夹重命名为front
# 注意:一定要在该项目目录下进行
scp -r build root@ssh root@47.105.170.226:/srv

# 在服务器执行
# 登录服务器
ssh root@47.105.xxx.xxx
cd /srv/
# 删除旧的文件
rm -rf front/
# 重命名build为front
mv build front

后端部分

# 登录远程服务器
ssh root@47.105.xxx.xx

# 更新代码
cd /srv/bms-code-auto-generate
git pull origin master

# 远程启动后端,如果已经启动着,需要先关闭再重新启动
nohup node index.js &
# 关闭后端服务
ps aux | grep node
kill -9 pid

近代农业

等完成部署后,就发现这样每次都很麻烦,因为不想每次更新了代码,再去手动重启一遍node,这时候想起来了pm2,它可以在监控到文件更新后,去自动重启服务,所以就想着应用上pm2。

PM2 是一个守护进程管理器,它将帮助您管理和保持您的应用程序在线。

第一版 简单使用pm2 去启动index.js文件

在服务器上。

# 启动后端服务,pm2版本,
## 全局安装pm2
npm install -g pm2
## 改用pm2来启动程序--watch表示,监控程序运行状态,一旦:服务异常:自动重启;服务发生变化:自动重启
pm2 start index.js --watch

这样启动的node进程,有个问题,就是我的下载文件xxx.zip文件是保存在tmp目录下,每当我一点下载的时候,node进程就会重启。

image.png

重启的时候有时候会导致下载链接失败。

image.png

这是在请教做node的同学时的聊天截图继续,所以moduleName一个是cvb,下载的zip文件名确是666600.zip,有点对不上,因为不是同一个时间段的,是后来写文的时候翻看的聊天记录。

后来发现,去掉--watch不会重启,并且下载链接不会报错,但是,这时候,又出现了一个问题,就是,当代码有更新时,node服务并不会自动重新启动,这就又回到了“原始农业”时代,我觉得应该监控文件是可配置的,这时候发现,得去学习一下pm2啦,于是我去翻看了pm2的官方文档,找到了ignore_watchecosystem.config.js文件。

于是有了,在/service/目录下添加文件:ecosystem.config.js

image.png

将代码更新到服务上去后,可以使用命令pm2 start ./service/ecosystem.config.js 进行启动,这样启动的就比较方便了。

现代农业

虽然上面的后端部署方式有了很大的改进,但是还是有个弊端就是,需要每次登陆服务器并且去手动拉代码,这样很麻烦。

于是写了一个一键部署的命令。

后端

在原有的文件:ecosystem.config.js中进行扩展。

module.exports = {
    apps: [
        {
            name: 'generate',
            script: './index.js',
            // instances: 1,
            watch: true,
            ignore_watch: ['[/\\]./', 'node_modules', 'tmp']
        }
    ],
    deploy: {
        daily: {
            user: 'root',
            host: ['47.105.xx.xx'],
            ref: 'origin/node',
            repo: 'git@github.com:springHyc/bms-code-auto-generate.git',
            path: '/srv/hehe/bms-code-auto-generate3',
            'post-deploy': 'git pull && cd service &&   npm install && npm run daily',
            env: {
                NODE_ENV: 'daily'
            }
        }
    }
};

配合package.json中添加命令:

"scripts": {
        "daily": "NODE_ENV=daily  pm2 startOrRestart ecosystem.config.js"
    },

这样直接在本地运行:pm2 deploy ./service/ecosystem.config.js daily,即可完成,自动拉取最新的代码,并且完成重启目的。

前端

待研究,稍后更新...

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • 简介
  • 学习步骤
    • 原始农业
      • 前端部分
      • 后端部分
    • 近代农业
      • 第一版 简单使用pm2 去启动index.js文件
    • 现代农业
      • 后端
    • 前端
    相关产品与服务
    对象存储
    对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档