当前位置:首页 » 《资源分享》 » 正文

纯前端低代码平台demo,vue框架,nodejs,简单的pm2纯前端部署实践

2 人参与  2024年05月26日 12:25  分类 : 《资源分享》  评论

点击全文阅读


文章目录

目录结构说明本地运行项目启动后的页面demo前端部署打包pm2nginx 后话
前段时间开发了一个纯前端的低代码平台demo,vue框架,nodejs,pm2纯前端部署实践。为此记录一下开发过程以及各方面遇到的问题,并作说明。

表单用了若依的开源代码https://gitee.com/y_project/RuoYi-Vue,由于这个没有表格等组件,所以在此基础上又开发了一些表格、分页等相关组件,并实现了代码导出的功能)。支持保存当前设计的配置代码,支持读取该配置重新渲染成预览表单。

目录结构说明

low_code_plantform├─ .env├─ babel.config.js├─ jsconfig.json├─ package.json├─ README.md├─ service   // node相关的文件夹,为了方便演示将node文件放在vue项目中了│  ├─ ecosystem.config.js   // pm2管理文件│  ├─ gulpfile.js│  ├─ package.json│  ├─ server.bundle.js│  ├─ server.js   // node启动文件│  └─ webpack.config.js├─ service-files   // service-files文件夹是模拟服务器文件用来存放要保存的模板配置的文件│  └─ templates.json├─ src│  ├─ api│  │  └─ index.js│  ├─ App.vue│  ├─ assets│  │  ├─ demo_edit.png│  │  └─ demo_preview.png│  ├─ components│  │  ├─ build│  │  └─ Index.vue│  ├─ main.js│  ├─ router│  │  └─ index.js│  └─ utils└─ vue.config.js

本地运行

根目录下启动vue:

$ npm run serve

service文件下启动node:

$ node server.js

项目启动后的页面demo

在这里插入图片描述
在这里插入图片描述

前端部署

打包

根目录下vue打包,将生成的 dist 文件夹

$ npm run build

service文件下node打包,将生成的 server.bundle.js 文件

$ npm run build
pm2

pm2是用来管理服务器上的多个node进程,这里如果没有配置过需要生成一个pm2配置文件ecosystem.config.js:

$ pm2 init simple

然后根据PM2官网说明进行配置就好了。

module.exports = {  apps : [{    name   : "form-design",  // 设置启动项目名称    port: '9001', // 启动端口    instances: 'max', // 集群实例数    autorestart: true, // 程序崩溃后自动重启    script : "./service.js" // 这里写好服务器文件夹要启动的相对路径就行,比如这个项目就是要写当前文件相对service.js文件的路径  }]}

如果本来就存在pm2的配置文件,只需要在后面添加一个当前要启动的node配置对象就好了。

配置好后,就可以启动pm2尝试是否配置正确。常用命令有:

$ pm2 list  // 查看所有node状态

在这里插入图片描述

$ pm2 start id号   // 启动$ pm2 stop id号   // 暂停 (服务器如果要替换新的文件,需要先stop,替换文件后,再start。否则会报无法删除/被占用等)

前端通过pm2启动:

$ pm2 serve D:\xxxx\low_code_plantform\dist 9003 --spa     // 9003是指定端口,为了之后配nginx

至此,前端在9003端口,node在9001端口

nginx

nginx配置如下:
首先nginx启动在9004端口,配置正确的话,此时打开localhost:9004会显示Welcome To Nginx!
然后先将所有的请求转发到9003端口下,即前端项目所在端口;在前端项目运行时,请求/form-design/api/的接口转发到node启动的端口9001。
此时访问localhost:9004/ 就能访问到前端页面了。至此配置完成。

#user  nobody;worker_processes  1;#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {  worker_connections  1024;}http {  include mime.types;  default_type application/octet-stream;  server {    listen 9004;       # nginx启动端口    server_name localhost;    location / {        #root   html;        #index  index.html index.htm;        proxy_pass http://localhost:9003; # 前端项目端口    }    location /form-design/api/ {        proxy_pass http://localhost:9001; # node启动端口    }  }}

后话

因为在服务器部署好之后,在终端访问不到。这里有个配置的地方:
win开放可访问端口的方法
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
然后一路确定就可以了。

然后再添加出站规则,填写的内容跟入站规则一致,这样就可以从终端访问了。


github传送门


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/113809.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 全文我死遁后,族长悔疯了:结局+番外优质全章(战痕音音)列表_全文我死遁后,族长悔疯了:结局+番外优质全章
  • [完结]顾昕瑶裴司珩唐念慈彩蛋(又名:怎甘心扬汤止沸)全
  • 换嫁成寡妇,我靠经商旺全家+后续+苏妙妙完本_换嫁成寡妇,我靠经商旺全家+后续+(苏妙妙)
  • (番外)+(全书)一念情深一念婚烬:全文+结局+番外***_(傅青青卢振庭温素素)一念情深一念婚烬:全文+结局+番外列表_笔趣阁(傅青青卢振庭温素素)
  • 换嫁战死的小公爷后,夫君回来了(顾青柠陆景煜)_换嫁战死的小公爷后,夫君回来了
  • 觉醒签到系统后冷宫皇子杀疯了李吟霜秦天在线(又名:觉醒签到系统后冷宫皇子杀疯了)赏析_觉醒签到系统后冷宫皇子杀疯了李吟霜秦天在线(又名:觉醒签到系统后冷宫皇子杀疯了)赏析
  • 出国后前妻对我穷追不舍后续(又名:我提出离婚两清后总裁妻子全家慌了)倾心编著(顾迟云云晚晚)
  • 顾君蘅孟昭宁(又名:时光烬余温)潜心更新完本_完本顾君蘅孟昭宁(又名:时光烬余温)潜心更新
  • 穿越星海说爱你:结局+番外,林雪羽梁淮序列表_穿越星海说爱你:结局+番外,林雪羽梁淮序
  • 「重生后,我和老公双双悔婚」后续已完结_「陆知归明星温欣柔」章节分享
  • 轻弹一首别离梁慕白苏洛沈亦琛番外霜珑
  • 全文穿越星海说爱你:结局+番外免费品鉴(林雪羽梁淮序)列表_全文穿越星海说爱你:结局+番外免费品鉴

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1