話不多說，先放專案體驗地址 (適配移動端) ：掌上饑荒
前端技術棧
- 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是個不錯的選擇） - 嘗試盈利，有了一定的流量後可以開始接入廣告，例如
淘寶聯盟。從初級淘寶客到擁有鑽石展位，一路升級打怪，很有意思。
結語
對我而言，完成這個專案最大的收穫應該是視野的提升。看問題的角度不僅僅侷限於前端，也使得我在實際的工作中能承擔更多的任務和責任。