如何构建无服务器支持 ugc 的动态 web3 应用

传统 web 服务中必须有一个中心化服务器托管所有数据，那么是否可以在无服务器的情况下构建 web 应用。

web1.0 和 web2.0 的一个重要区别是是否支持用户创建内容（英语：User-generated content ，缩写：UGC ），web3.0 一个重要区别就是去中心化（ decentralisation ）。

事实上已经有无服务器的静态 web 服务，例如 ipfs ，用户可以把 html 网页制作完成后，上传到 ipfs 供人浏览。但是这个技术有几个问题，第一个就是门槛高，大部分用户无法掌握制作 html 网页并上传这套复杂的流程。实际上对于用户来讲，所谓的 web3 使用体验更像 web1.0 时代，只能浏览少量的页面，连 web2.0 时代的 ugc 都无法实现。当然有很多伪 web3 ，把服务器托管在 aws ，然后使用一个钱包登录。

那么如何适合去中心化的同时支持 ugc 呢？

#技术实现

目前的基于 ipfs 的 web3 主要技术障碍就是内容创建、部署的技术难度太大，例如你在九十年代想有一个个人博客，你需要会制作 html ，有自己的服务器，有自己的域名。在 21 世纪的现在，你想在 web3 建一个个人博客，技术难度不亚于当年。

web2.0 的开创最重要的标志就是，用户使用浏览器，点击就能发布内容，别告诉用户学习 html 、js 、css ，还要上传托管这些复杂的概念。这里可以通过一些技术手段，把在 web3 发布内容的体验接近 web2.0 。

我们制作一个页面，页面用户可以输入任意内容，支持文本、图片、视频等格式，然后用户点击提交后，在网页前端上传到 ipfs ，返回用户一个 ipfs 上的地址，如同在百度贴吧发帖一样简单的流程。

实现流程

先在页面添加一个可视化富文本编辑器，可视化富文本编辑器技术已经非常非常成熟了，用户使用门槛也非常低，这里就不具体怎么实现累述了。

然后用户点击发布的时候，获取富文本编辑器生成的 html ，加入到模板中，把 html 提交到 ipfs 上。

const formData = new FormData();
formData.append('file', file);
let api =  '/api/v0/add';
$.ajax({
	url: api,
	type: 'POST',
	data: formData,
	processData: false,
	contentType: false,
	success: function(res) {
		if (res.Hash) {
			conslog.log(res)
		} else {
			console.error('上传失败');
		}
	},
	error: function() {
		console.error('请求失败');
		}
});

这里拿一张图片的返回类型举例。返回结果

{
    "Name": "wallhaven-x65vld.jpg",
    "Hash": "QmU7AKibF1M1182v1Y7ec7LKuLQ39cnguYhAqAkPEfJbQo",
    "Size": "14738098",
    "Url": "https://cdn.img2ipfs.com/ipfs/QmU7AKibF1M1182v1Y7ec7LKuLQ39cnguYhAqAkPEfJbQo/?filename=wallhaven-x65vld.jpg"
}

ipfs 访问地址：ipfs 网关 + "/ipfs/" + Hash + "/?filename=" + Name

ipfs 网关可以切换任意一个 ipfs 网关地址，用户也可以自行部署。

然后就给用户跳转到新的页面，一个 ugc 的 web3 应用就构建完成了。

基于这个简单的实现，就可以构建更复杂的 web3 应用了，毕竟最开始 web 就是支持文字链接的网页构成。

本文思路的一个简易实现： https://github.com/chenjia404/ipfs-telegra.ph 可以实现发布图文内容到 ipfs