LowCode平台上线流程

项目上线演示地址： www.siyukenny.top:3011/cms-manage

Github项目地址： github.com/siyukenny/L…

申请云服务器并连接

云服务器比如阿里云或者腾讯云服务器租用即可，并安装镜像系统（这里我选用的是阿里云服务器，操作系统是CentOS 8.5 64位）

【Mac】在Mac自带的终端或者第三方Iterm中输入连接命令ssh [username]@[ipaddress]后按键盘enter键。您需要将username和ipaddress替换成ECS服务器的登录名和公网地址，比如ssh root@8.142.119.255 ,然后输入密码连接。

【Windows】使用MobalXterm，文件传输和ssh一体的，比较方便。

或者说，使用第三方网站管理平台宝塔面板，最省心。本次我是三者结合使用，效率更高。（安装宝塔面板网上有很多教程，可对比参考享用）

配置项目需要的数据库，安装nginx、安装Node.js环境

（安装教程网上一大堆，选择任何一种即可使用。然而宝塔面板可以可视化安装，就跟软件安装管家似的）

然而，我本次采用的是MySQL数据库，手动安装的；nginx也是以前手动安装的，Node命令行安装也很简单。
数据库的配置

应用【application】

id | name | application_string -----|------- | --------

页面【page】

id | application_id(外键) | name |cover(封面) | page_type(页面类型) | is_abled （是否启用）| page_string |update_time |create_time| creator（创建人）| share_desc（微信分享文案）| share_image （微信分享图片）| ---- | --------- | ---------|----------| -----|-----|------|-----|----|----|---|---

组件详情【components】

id | page_id(外键) | component_string | sort | name （组件名称） ------ | -------------|-----| ----------|--------------|-----|----

用户【user】

id | user_name(用户名) | password(密码) -----|-----|----

配置命令：

CREATE TABLE `application` (`id` INT (11) NOT NULL AUTO_INCREMENT COMMENT '主键',`name` VARCHAR (128) NOT NULL COMMENT '应用名称',`application_string` VARCHAR (256) DEFAULT NULL COMMENT '应用配置json',PRIMARY KEY (`id`)) ENGINE=INNODB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COMMENT='应用表';
CREATE TABLE `page` (`id` INT (11) NOT NULL AUTO_INCREMENT COMMENT '主键',`application_id` INT (10) NOT NULL COMMENT '应用表id',`name` VARCHAR (128) NOT NULL COMMENT '页面名称',`cover` VARCHAR (100) DEFAULT NULL COMMENT '封面图链接',`page_type` TINYINT (1) NOT NULL DEFAULT '0' COMMENT '页面类型 0标准活动；1首页',`is_abled` TINYINT (1) NOT NULL DEFAULT '0' COMMENT '是否启用 0未启用；1启用',`page_string` VARCHAR (256) NOT NULL COMMENT '页面配置json',`create_time` datetime DEFAULT NULL COMMENT '创建时间',`update_time` datetime DEFAULT NULL COMMENT '更新时间',`creator` VARCHAR (10) NOT NULL COMMENT '创建人',`share_desc` VARCHAR (100) NOT NULL COMMENT '微信分享文案',`share_image` VARCHAR (300) NOT NULL COMMENT '微信分享图片',PRIMARY KEY (`id`)) ENGINE=INNODB AUTO_INCREMENT=106 DEFAULT CHARSET=utf8mb4 COMMENT='页面详情表';
CREATE TABLE `components` (`id` INT (11) NOT NULL AUTO_INCREMENT COMMENT '主键',`page_id` INT (10) NOT NULL COMMENT '页面详情表id',`component_string` VARCHAR (5000) NOT NULL COMMENT '组件配置json',`sort` INT (3) NOT NULL COMMENT '排序',`name` VARCHAR (20) NOT NULL COMMENT '组件名称',PRIMARY KEY (`id`)) ENGINE=INNODB AUTO_INCREMENT=1389 DEFAULT CHARSET=utf8mb4 COMMENT='组件详情表';

安装好数据库之后一定要开放端口3306，阿里云服务器比较特殊，必须要在阿里云工作台安全组开放才能使用（虽然宝塔面板也有这项功能，仍需要在阿里云平台开放），后面前后端项目需要的端口这是同样方法开放。

前后端项目打包上传

1. cms-manage上线nginx处理

本项目中的cms-manage前端界面在上线前需要将图下地址改为服务器上线地址及端口。（第一个圈出来的地址改为http://8.142.119.255:3010,这是crs文件。第二个圈出来的地址改为http://8.142.119.255:3300/atlas-cms，这是cms-node后面接口地址。）

npm run build 打包好后，生成dist文件，然后有一些路径需要改，不然页面部署上去显示不成功(这也是我找bug最头大的一次)。就是在下图中index.html中js，css等的引用路径改为相对路径，截图是在宝塔面板在线文本编辑器看的，不太方便。我实际操作的时候是用VScode将代码自动格式化，将所有的/cms-manage/改为./即可。记住是所有的！

然后，将你打包的dist（这里我把文件名改为了cms-manage）上传到nginx文件目录。在这里通过试错，我发现需要在cms-manage文件夹下再建一个cms-manage文件夹（这也是我通过试错试出来的问题）。

- 最后，配置`nginx/conf`目录下的`nginx.conf`

cms-manage需要的3011地址在阿里云平台开放，至此，打开8.142.119.255:3011/cms-manage就可以看到登录界面了。

2. cms-node通过宝塔面板安装的Node管理器上线

首先，上传cms-node至服务器，记下存放的地址。
配置Node项目管理并成功启动（记得先提前开放3300端口）

运行成功后就可以了，可以在服务器终端使用lsof -i:3300检测这个端口是不是在监听

3. crs打包上传

crs和在本地运行不一样，它不需要node部署，这也是我试了很多次错才发现的。
第一步，修改crs中vue.config.js文件，如图改为服务器地址

第二步，npm run build之后，和cms-manage相似的方法更改相对路径来保证页面正常显示
第三步，将打包好的dist文件重命名为crs，放在在iginx部署的cms-manage目录下，与父文件夹cms-manage同名的cms-manage子文件夹作为兄弟文件存放（为什么这么放？因为通过报错调bug试出来的）

至此，通过登录界面就正常登录了

LowCode平台上线流程 | 青训营笔记