编码打造属于自己的朋友圈“便携小空调”

一、背景

今天看到朋友圈里有不少发便携小空调的原始链接，感觉很有意思。应该有不少朋友像我一样，对这块代码比较感兴趣，并且想打造自己的小空调，后来又被运营小哥拉着改成公司运营版，所以就有了这篇文章。

二、环境搭建(开发人员自动忽略）

首先，作者云游君在自己的博客里贡献了代码仓库地址，那我们就动动小手clone一下吧(clone之前保证本地git环境没有问题）

然后进入项目后，安装依赖（需要先安装nodejs）

然后启动服务(需要先安装yarn)

然后输入yarn start，启动本地服务，启动之后浏览器会自动打开一个新窗口

三、源码修改

作为一个主要从事后端开发的研发人员，对前端技术不太精通，更别说React了，刚开始看到技术栈的时候感觉自己可能搞不定。后来发现作者在自己的博客里说自己也不擅长React，于是我就放心了。

其实整个app也没有什么好改的，无非是把页面底部的文字及超链接修改一下，这个应该是没有什么难度的，猜也猜的出来。.

我的修改方法是删掉第二行，只保留第一行

同时修改点击文字的链接地址为自己的博客url

保存后，刷新一下页面预览一下效果，ok，接下来打包：

执行 yarn build，在build文件夹下生成用来发布的静态文件

其实也可以尝试clone另外一个分支（gh-pages）下的代码，这个是build之后的静态文件，但是因为是build之后的，前端代码做了丑化、压缩处理，所以可读性太差。只修改链接地址还行，如果要修改页面布局及显示内容，会麻烦一些。

四、静态文件发布（用你最擅长的方式）

本来想着在服务器上搞个nginx发布一下，然后再把域名手动解析到服务器ip上，最后挂个ssl证书来处理，但是转念一想太麻烦，索性偷个懒，直接用阿里线上的产品搞定。操作如下：1、先上传到阿里oss并设置静态资源发布，2、配置域名自动解析到此oss，3、在线填写证书信息。全程根本不用远程服务器也不用修改任何配置文件，并且oss的存储和读取都是按大小及流量收费的。真的流量太大了，还可以直接在前面接一个cdn提高加载速度。

1、创建bucket，并上传build文件夹下的文件

创建bucket

上传后文件列表

2、创建bucket为静态页面类型，并设置首页地址

设置静态页面访问

3、设置域名访问（域名解析到当前oss地址）

配置域名访问

打开自动cname记录的目的在于不用手动到自己的域名下解析，阿里云默认增加一条cname解析记录。此开关只对当前阿里账号下购买的域名有效。

手动解析展示

4、此时则可以通过域名进行访问了，但是请求是http协议的，请求格式为：http://你的域名，如果你有ssl证书，可以在这里填上，填上后则可以使用https协议进行访问。

如果没有，可以在阿里云申请一个免费的。

5、cdn 服务

如果你的网站会引来大量流量，导致页面访问较慢的情况，可以接入阿里cdn服务作为边缘节点缓存，来分散压力。

五、感谢作者

至此，个人的小空调就吹起来了，希望能够对你有所帮助，转载请注明出处。

最后要感谢原作者愿意贡献自己的作品，感谢他的娱乐精神。