serverless-cd / ui Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 11.0 1.16 MB

TypeScript 90.21% JavaScript 1.00% Less 8.77% SCSS 0.01%

ui's Introduction

serverless-cd 帮助文档

快速部署一个基于 Serverless 架构上的轻量级、易拓展、前端友好的 CI/CD 框架

前期准备

需要开通的产品：

函数计算 FC：整个系统的计算能力运行在 FC 上
日志服务 SLS：分布式日志存储服务，用于定位和发现问题
对象存储 OSS：用于存储日志信息
表格存储 Tablestore: 应用和任务的元数据信息存储

推荐您拥有以下的产品权限 / 策略：

服务/业务	权限/策略
函数计算 FC	AliyunFCFullAccess
日志服务 SLS	AliyunLogFullAccess
对象存储 OSS	AliyunOTSFullAccess
表格存储 Tablestore	AliyunOSSFullAccess

代码 & 预览

😺 源代码

部署 & 体验

🔥 通过 Serverless 应用中心，该应用。

通过 Serverless Devs Cli 进行部署：
- 安装 Serverless Devs Cli 开发者工具，并进行授权信息配置；注意： CLI 版本需要大于 2.1.7
- 初始化项目：s init serverless-cd -d serverless-cd
- 进入项目，并进行项目部署：cd serverless-cd && s deploy -y

应用详情

Serverless-cd 是一款基于 Serverless Devs 开发者工具打造，运行在 Serverless 架构上的轻量级、易拓展、前端友好的 CI/CD 框架。通过 Serverless-cd，开发者可以快速打造高性能、低成本的 Serverless CI/CD 能力，并对建设私有化的 Serverless 应用管理平台提供帮助。

部署完成后会生成一个对应的测试域名，格式为auto.serverless-cd.${uid}.{region}.fc.devsapp.net

快速体验

访问控制台：

auto.serverless-cd.${uid}.{region}.fc.devsapp.net

创建应用：

添加授权

获取 Token
在对应GitHub setting页面，添加个人 Token，并填入

导入应用:
- 选择 nodejs 模版应用: https://github.com/serverless-cd-demo/nodejs-ci，并 fork 到当前账号

创建应用

查看应用详情

可以看到刚创建的应用已经触发部署

并且可以看到详细的部署日志信息

webhook 触发部署

修改代码并且提交，查看自动化执行部署构建流程

开发者社区

您如果有关于错误的反馈或者未来的期待，您可以在 Serverless Devs repo Issues 中进行反馈和交流。如果您想要加入我们的讨论组或者了解 FC 组件的最新动态，您可以通过以下渠道进行：


微信公众号：`serverless`	微信小助手：`xiaojiangwh`	钉钉交流群：`33947367`

ui's People

Contributors

Stargazers

Watchers

Forkers

ohyee xsahxl kwtboom g-fengchen mahuipengf abuexclusive skywingozora

ui's Issues

【setting-ui】自定义组件 AsyncSelect

https://formilyjs.org/zh-CN/guide/advanced/async
https://fusion.formilyjs.org/zh-CN/components/select

比如依赖 region 进行异步请求

创建应用流程，第一次给仓库授权后，没有请求到仓库组织的数据，刷新页面就有了

模版初始化 UI规范

组件设计 Setting

【auth-ui】Auth组件

UI页面

serverless-cd现状
设计图
参考1
https://tailwindui.com/components/application-ui/forms/sign-in-forms
参考2
https://identity.netlify.com/

接口设计（初稿）

<Auth title={} 
	value={
       // 传统登录
		credentialProvider={
				credentials: {
					username: {label: "username", type: "username"},
					email: {label: "Email", type: "email"},
	                password: {label: "Password", type: "password"}
				},
				//  登录
				async signIn(credentials, req) {
	                return result;
	            },
				// 注册
				async signUp(credentials, req) {
	                //  校验
	                return result;
	            },
		},
		githubProvider: {
			url: 'https://github.com/login/oauth/authorize?client_id=86059a1b2bb20d3e5fc3&scope=repo,repo:status,delete_repo'
		},
		giteeProvider: {
			url: 'https://github.com/login/oauth/authorize?client_id=86059a1b2bb20d3e5fc3&scope=repo,repo:status,delete_repo'
		}
	}
	onChange=() => {}
>
</Auth>

技术推荐

console-conponent
react

【creating-ui】创建中UI

UI交互

接口设计

const dataSource = [{
	title:'同步仓库',
	child: [{
		title: '远程仓库创建成功',
		syncTask: () => {},
	},{
		title: '正在同步远程仓库，请稍后,
		syncTask: () => {},
	}]
},{
	title:'创建',
	child: [{
		title: '创建应用',
		syncTask: () => {},
	},{
		title: '创建流水线,
		syncTask: () => {},
	}]
},{
	title:'创建完成，3s跳转到指定页面',
}];

<CreateApp dataSource={dataSource} onComplete={} onSuccess={} onError={} >
</CreateApp>

【app-card-ui】模版应用列表

页面效果

参考：https://fcnext.console.aliyun.com/applications/create

API 设计

const dataSource = [{
	label: "热门应用",
    key: "1",
	children: [{
		 label: "全景 Web 页面录制-高级版",
         key: "2",
		description: "",
        logo: "",
        tags: [全景录制"],
		download: 17561,
        contributor: () => {} // 贡献者， 
	}]
}];

<AppCard dataSource={dataSource}>
</AppCard>

<AppCard.ReadMe>
</AppCard.ReadMe>

选择组织后，请求的仓库列表数据不符合预期

PipelineInitNode组件支持validate属性

validate为true表示前端验证通过，展示对应的样式，否则反之。

<AppArchitecture label="环境部署">
	<AppArchitecture.Item label="域名" icon="xxx"></AppArchitecture.Item>
	<AppArchitecture.Sub label="网络" icon="xxx">
		<AppArchitecture.Item label="SLB" icon="xxx"> 	
		</AppArchitecture.Item>	
	</AppArchitecture.Sub>
</AppArchitecture>

case2:
json => form

【history-ui】部署历史UI

【探索】头像生成器

https://github.com/wave-charts/avatar-gen