话不多说，先放项目体验地址 (适配移动端) ：掌上饥荒
前端技术栈
- vue
- vue-router
- vuex
- webpack
- axios
- better-scroll
- lavas
- vuetify
后端技术栈
- egg
- express
- mysql
- mongo
运维
- nginx
- pm2
- https
- oss对象存储
- cdn
- dns云解析
起始
在开始做之前，我的技术栈中只有vue相关的前端知识。后端只了解一点mysql，运维零基础。一路支撑我走过来的动力，除了项目本身的价值之外，很大一部分在于探索未知技术领域的新奇感。
前端
自17年三月chrome提出渐进式web应用后我就一直很关注，就想着实践一下。从lavas开始说吧，lavas的初衷是快速地接入pwa的相关特性，包括骨架屏，离线缓存，AppShell等等。
- 骨架屏简单来说就是替代loader，在用户等待页面加载时，更加耐心。骨架屏对于用户体验的提升很大，淘宝，饿了吗的页面大量地用到了骨架屏。
AppShell是指把公共的组件像header，slider，底部导航等抽象出来放到根组件。其它拥有路由的页面只需要配置参数，以及根据eventBus传递的事件做处理就可以了，比起之前往子组件导入公共组件的方式优雅不少。- 离线缓存，是指即使在无网的情况下，页面还是会显示基础的
app结构，而不是未连接互联网。service worker的使用是一个难点，各位有兴趣可以去lavas官方站点看看，那里有不错的文档。
后端
最开始我只是想提供一些数据服务，后端用express写了一些简单的接口，用mongo存储非结构化的物品资料的数据。部署的时候会用到pm2，pm2的作用是代码出错node会自动重启，而不是整个服务崩溃。刚上线的时候发现被植入了广告，是一种被称之为dns劫持的东西。就是第三方网络运营商在dns服务器上做了手脚，开个dns云解析就好了。
随着用户增加，我开始想实践一些更复杂的功能，于是就接入了用户系统。就是登录，注册，发文，评论，回复这些功能。express很难支撑社区相关的业务逻辑，我需要一种更严谨的后端架构，于是开始使用egg。egg时基于的koa的，开发体验跟java后端那种mvc的开发模式很像：
- router负责调度请求给controller处理
- controller处理具体业务逻辑
- service负责跟数据打交道，一些增删改查的逻辑
不仅如此，
egg还有自己的插件接入mysql和mongo，并且制定了严格的规范。值得一提的是，使用egg接入阿里云的一些服务会很方便。比如接入oss做文件上传。顺带一提，oss的功能很强大，比如你想使用不同尺寸或者不同压缩比的图片，只需要在图片路径后添加在oss控制台添加好的样式名就可以了，而不用去改源文件。oss接入cdn也非常方便，网络链路层的优化对于静态资源加载速度的提升很大。
服务端
同源策略中有一项是同协议，也就是说http访问不了https的接口，所以为了实践pwa相关的特性做了全站https。
阿里云和腾讯云其实都提供了免费的https证书，不过不是通配符型的，也就是说你的二级域名用不了。由于开了express和egg两个服务，所以我分别申请了阿里云和腾讯云的证书，用nginx做代理。为了使之前老用户可以正常访问，还需要把http的80端口重定向到https的443端口。https部署的过程现在看来其实很简单，就是把证书放到站点指定目录下，然后更改nginx的配置就可以了，不过由于之前没接触过运维相关的知识，折腾了不少时间。
如何坚持下去
个人项目很容易烂尾，究其原因是得不到即时反馈。我有一些建议，帮助你持续坚持下去：
- 项目的出发点能极大地调动你的积极性，要么有给你带来
财富自由的可能，要么能促进社区成长，成就个人荣誉 - 拥抱社区，弄清楚你的直系用户，并在他们经常聚集的
论坛分享你的想法和进度，获取反馈（百度贴吧） - 接入统计，观察站点每天
浏览量和新增用户的起伏就是一个很好的反馈（Growingio是个不错的选择） - 尝试盈利，有了一定的流量后可以开始接入广告，例如
淘宝联盟。从初级淘宝客到拥有钻石展位，一路升级打怪，很有意思。
结语
对我而言，完成这个项目最大的收获应该是视野的提升。看问题的角度不仅仅局限于前端，也使得我在实际的工作中能承担更多的任务和责任。
