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

本文主要是介绍纯前端低代码平台demo,vue框架,nodejs,简单的pm2纯前端部署实践,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

      • 目录结构说明
      • 本地运行
      • 项目启动后的页面demo
      • 前端部署
        • 打包
        • pm2
        • nginx
      • 后话

前段时间开发了一个纯前端的低代码平台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传送门

这篇关于纯前端低代码平台demo,vue框架,nodejs,简单的pm2纯前端部署实践的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/723765

相关文章

如何在Ubuntu 24.04上部署Zabbix 7.0对服务器进行监控

《如何在Ubuntu24.04上部署Zabbix7.0对服务器进行监控》在Ubuntu24.04上部署Zabbix7.0监控阿里云ECS服务器,需配置MariaDB数据库、开放10050/1005... 目录软硬件信息部署步骤步骤 1:安装并配置mariadb步骤 2:安装Zabbix 7.0 Server

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

MySQL 中 ROW_NUMBER() 函数最佳实践

《MySQL中ROW_NUMBER()函数最佳实践》MySQL中ROW_NUMBER()函数,作为窗口函数为每行分配唯一连续序号,区别于RANK()和DENSE_RANK(),特别适合分页、去重... 目录mysql 中 ROW_NUMBER() 函数详解一、基础语法二、核心特点三、典型应用场景1. 数据分

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是