印刷業專屬電商 HiPrint 開發分享— 以 GatsbyJS 打造高速網站

2021 年 6 月 21 日

投影片：https://revteltech.pse.is/lixiang-hiprint-sharing
理想印制：https://www.lixiangprint.com.tw
忻旅科技：https://www.revtel.tech/
奕果雲端數位：https://www.facebook.com/EcultureTech/
更多文章：https://medium.com/revtel-tech

軟體及系統開發顧問服務：https://consult.revtel.tech/

2021 年中開始台灣面臨了嚴峻的疫情挑戰，大家的活動範圍突然被限縮到很小。在這個情況之下來點線上交流似乎是個不錯的選擇。

這次分享內容是關於之前打造的高速客製化電商 — 理想印制 ( https://www.lixiangprint.com.tw )。在往下看之前大家可以體驗一下網站的速度～

這篇文章我們擷取了一部分的講座內容，以此作為一個紀錄。

活動緣起

正逢公司成立近五年，「五載復相逢」也是個機會跟自己的初心說說話了挑。選了一些議題來整理，以印刷轉型打頭陣似乎是個好選擇。

但不知怎的直播設定很不順暢，原訂七點半開始的活動硬生生八點才開始。對有來參加活動的觀眾感到抱歉，手忙腳亂的耽誤了大家的寶貴時間。

系統概觀

這些年莫名結識蠻多印刷業人士，協助了感官文化開發他們的系統(可見質感及功能的平衡探索 — 感官文化印刷)。

簡單介紹一下理想印制，主打高度客製又追求在品質及價格間取得平衡。如果大家有客製禮品的需求挺推薦他們的。這個合作上除幫他們開發了新電商系統之外，亦成立奕果雲端數位來協助印刷業轉型。

整個系統我們包含了

消費者下單之 RWD 前台：涵蓋會員 / 購物 / 部落格等邏輯
營運團隊使用的後台：涵蓋稿件製作 / 物流管理 / 退貨金流等邏輯
工程團隊使用的後台：raw data 層級協助後續營運開發
Restful API interface：為未來更完整數據分析及 APP 開發等打基礎

粗略的系統架構如下

JAMStack — Pre-rendering + Enhancing with JavaScript + Supercharging with services

先談談 JAMStack。JAMStack 是一種建構網站的方法，它拉近了靜態網站與 SSR 之間的功能差距，同時保持了靜態網站高性能、低成本、高安全性的關鍵優勢，同時也保有了非常好的開發者體驗。

所以一個標準的姿勢是，藉由 SSG (Static Site Generation，如 GatsbyJS)讓前端站為靜態，如此一來可以做到全站緩存、無前端 Server。並在靜態站產生時期將所需的資料抓進來（可透過 GraghQL、Restful API、Markdown 等各種形式）。執行時期再跟 microservice 等架構做互動。

這裡有個滿重要的問題是「編譯時期（build time) 你能做哪些事？」，假如設計得當，你的網站系統就能取得很優異的效能。想像一下，對電商來說，如果在每次商品變動後都編譯一次網站，那你的站幾乎在任何時刻都是靜態的。所謂的動態，在一定程度上就是連續的靜態改變。