肩并肩开发自己的微应用

若@木 · 2022年 Nov 14日 18:30

在《好家伙！零代码平台真好用》和手摸手搞定 SaaS 权限管理，通过涂鸦零代码平台可快速创建属于我们自己的 SaaS（零开发），满足我们常规的业务需求。

本文将会介绍：如何开发自定义微应用，并将其加入 SaaS 体系中。

操作步骤

创建部分托管 SaaS
搭建本地部分托管 SaaS 运行环境
创建微应用
完全托管 SaaS与部分托管 SaaS 对比
在零代码平台创建 "我的 SaaS 应用"

创建部分托管 SaaS

之前文章中创建的 SaaS 是完全托管到涂鸦的应用，这种类型的 SaaS 不能添加自己开发的微应用，接下来我们先创建一个部分托管的SaaS。

如之前文章的SaaS创建操作步骤，选择创建 "部分托管 SaaS"
创建流程中，在左侧菜单 "OEM 信息配置" 中配置应用所需信息

域名配置： https://my-micro-app.com

搭建本地部分托管 SaaS 运行环境

创建完线上 SaaS 项目后，我们需要在本地将项目运行环境搭建起来。

Docker 环境安装并启动

安装Git, 获取安装脚本

Code: Select all

  git clone https://github.com/tuya-sat/sdf-deploy.git

Code: Select all

  # sdf-deploy 目录结构
    ├── LICENSE
    ├── README.md
    ├── docker-compose
    │   ├── README.md
    │   └── docker-compose.yml
    │   └── redis

修改脚本配置

进入 docker-compose 目录下, 创建配置文件 .env，并配置开发者 App Key 和 Secret Key

Code: Select all

  cd sdf-deploy/docker-compose/    # 进入docker-compose目录
  cp _env .env                     # 从_env文件复制一份.env配置文件
  vi .env                          # 编辑 .env 配置文件

修改 .env

Code: Select all

    # developer 配置信息
    DEVELOPER_CODE=开发者 App Key
    DEVELOPER_KEY=开发者 Serect Key

    # （可选）CustomAPI（自己的后端服务,提供微应用接口服务） 服务域名，示例：https://api-gateway.com  
    CUSTOM_API_URL=

进入我的微应用，点击查看开发凭证, 复制进行替换

启动本地运行环境

在当前目录（sdf-deploy/docker-compose）下通过 docker-compose up 启动服务
Code: Select all
```
  docker-compose up
```
域名本地映射

修改本机host

127.0.01 my-micro-app.com

访问 http://my-micro-app.com:3000

创建微应用

创建微应用模版

Node 环境安装

创建微应用模版

Code: Select all

  npx @tuya-sat/create-micro-app@latest micro-app-demo -t react-ts

本地开发微应用

进入项目，进行开发调试,更多信息，请参考微应用开发调试

修改 micro.config.js 配置

Code: Select all

module.exports = {
  /**@type {DebuggerConfig} */
  debuggerConfig: {
    target: 'http://my-micro-app.com:3000', // 需要代理的协议+host
    username: '你的管理员用户名', // 对应域名的超级管理员账户名
    password: '你的管理员密码', //  超级管理员密码
    logSign: true, // 打印请求头
    mockPermissions: ['REGISTER', 'EDIT', 'DELETE'],
  },
  /**@type {WebpackCombineFunction} */
  webpack(config, { isDev, isBuild }) {
    config.output.publicPath = isDev ? '/' : './';
    return config;
  },
  /**@type {CustomDevServer} */
  devServer(config) {
    return config;
  },
};

获取管理员,参考《好家伙！零代码平台真好用》

Code: Select all