低码大前端 - 混合云集群部署 PagePlug

前情提要

老师之前布置了什么作业，完全忘了，本来觉得写作业可能也就一两个小时的事情，结果搞了半天，有一半的作业题目都没找到，mmp, 之前拖延症，搞到心态都炸了，今天不管怎么说都要搞定；维护下自己的混合云集群，然后部署下低代码的前端工具，真心不喜欢造轮子，PagePlug 是国庆前夕自己调研的一个产品，突然感觉我又可以了，之前就是觉得前端开发人员需要有点艺术天赋才可以，不然捏，每天加班排版吗？该做的是需要一步一步来才可以。

产品说明

1. PagePlug 是什么？

PagePlug 是一款低代码、开源的开发工具，用于快速构建内部应用程序。无需侵入客户架构，直接连接数据源（API、DB），无需学习任何第三方概念，使用基础 js 知识就可以快速生成多平台前端应用，包括 PC 端 web 应用、微信小程序等。

2. PagePlug工作原理

连接数据源：与数据库或 API 等数据源集成。PagePlug 具有对许多数据库的即插即用支持和 RESTful API 接口，可与大多数工具无缝连接。

构建 UI：使用可自定义的内置小部件快速构建应用布局。

访问数据：通过编写查询并将数据绑定到小部件，使用 JavaScript 将 UI 连接到数据源。

协作、部署、共享：PagePlug 还支持使用 Git 进行版本控制，以跟踪更改、创建回滚并使用 Git 分支进行协作。部署应用程序并与其他用户共享。

通过这些简单的步骤，您可以构建从简单的 CRUD 应用程序到复杂的多步骤工作流的任何东西。PagePlug 可以轻松构建与任何数据源连接的 UI。

操作实践

小记： 阴差阳错最近一段时间在搞低代码的业务建模的后端开发，一开始我对这块不明所以，做了一段时间突然发现，建模架构能力确实是我技术成长道路上比较欠缺的方面，不过就算后端建模的事情搞清楚了，每次做项目我最恶心的就是要写前端，我又是有一点强迫症，前端搞到最后身心疲惫，正好借这个机会把 PagePlug 熟悉下，后面就开始做自己的商业项目(赚钱最重要)。

1. 资源改造

官方给出的部署方式是通过 docker 部署，并且需要安装 docker-compose 那种，对于容器小白，这种方式很普世，但是我有自己的混合云管平台，给他改造下通过 k8s 部署；

version: "3"

services:
  pageplug:
    image: index.docker.io/cloudtogouser/pageplug-ce:v1.9.20
    container_name: pageplug
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./stacks:/appsmith-stacks
    environment:
      - TZ=Asia/Shanghai
    restart: unless-stopped
  #   # Uncomment the lines below to enable auto-update
  #   labels:
  #     com.centurylinklabs.watchtower.enable: "true"

备注: 此时呼唤 chatgpt ，让他帮忙转换成为 k8s 部署资源，当然需要自己再手动调整下:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: pageplug-deployment
spec:
  replicas: 1 # 调整副本数
  selector:
    matchLabels:
      app: pageplug
  template:
    metadata:
      labels:
        app: pageplug
    spec:
      containers:
        - name: pageplug
          image: index.docker.io/cloudtogouser/pageplug-ce:v1.9.20
          ports:
            - containerPort: 80
            - containerPort: 443
          volumeMounts:
            - name: appsmith-stacks-volume
              mountPath: /appsmith-stacks
      volumes:
        - name: appsmith-stacks-volume
          hostPath:
            path: /path/to/host/directory # 请将路径替换为宿主机上的实际目录
---
apiVersion: v1
kind: Service
metadata:
  name: pageplug-service
spec:
  selector:
    app: pageplug
  type: NodePort
  ports:
    - protocol: TCP
      name: http
      port: 80
      targetPort: 80
      nodePort: 30080
    - protocol: TCP
      name: https
      port: 443
      targetPort: 443
      nodePort: 30443

2. 部署运行

• 部署

kubectl apply -f xxx.yaml

• 资源查看

kubectl get pod -A
kubectl get svc -A

• 服务访问(浏览器打开)

http://192.168.65.65:30080/

3. 应用测试

总结

低代码大前端有必要学一下，虽说架构和建模逻辑大部分在后端，但是为了快速做到好看的用户预览效果，前端的基础知识还是要学习下的，这样就可以掌控全局了，不然就是废话太多的废物，环境已经构建好了，这个就慢慢来。