從頭建立一套 web-based 服務架構 (2) 概覽與需求簡介

本系列文章將試著遵循 Aggregate libraries instead of frameworks 的核心思想，開發一套能夠完整運行的 web-based 服務。所謂 web-based 就是會包含一個標準的 HTML5 web application ，以及背後的 database 、 API server 等後端架構。

另外，雖然本次主題以 web frontend 為主，但開發完成後不能運行也沒用，因此預計會在後期帶入 server deployment 的範例與細節。文章會以一個自行發想的需求當成主軸進行討論；隨著開發過程會一路挑選並組合不同的 library、framework、採用技術，並參雜一些作者個人的比較心得、技術概念或語法的介紹等。

預定大綱

以下簡單描述預定的系統架構：

1. Frontend web server：用來 host 實際網站的 Node.js server，bundle 後的 JS/CSS 也從此 server 提供（也就是說不牽涉到 CDN 的使用）。Bundling 預計使用 webpack 進行，而 web app 則以 React.js 為基底進行開發
2. Backend API server：連接 database 並提供 RESTful endpoint 給 frontend 擷取資料
3. Deployment：使用 Docker 包裝上述架構，並使用 Kubernetes 佈署到 Google Cloud Platform (GCP) 提供的 Container Engine 上

接下來 30 天的開發內容會遵循此順序進行：

1. 初始化 frontend app 專案（bootstrapping）：參考 React.js 相關的 boilerplate 進行專案初始設置，以及 webpack 的設定
2. 先另闢支線，進行 database 與 API server 開發。由於本系列會著重前端開發，後端的部份會較快帶過，但也可作為快速開發後端的參考
3. 撰寫 frontend 相關功能，包括 routing、app logic、Ajax 等部分
4. 撰寫 CSS 樣式，同時也會介紹 webpack 如何處理 CSS
5. 將 server 包裝成 Docker image，並利用 Kubernetes 建立一個小型 cluster 來運作上述架構

所以到底要來開發什麼服務？

因應這次的鐵人賽，本次試著開發作者就學時期開發過的舊題目－－線上作業批改繳交系統：這個系統的使用情境是讓學生在修課時登入網站，直接在助教出的功課（assignment）頁面上傳自己寫的答案（submission）。助教看過 assignment 內容後，可以直接在上面批改（grading）給分。這次就以實作這樣的系統作為開發主軸，而因為並非正式產品開發，其中的需求細節會由作者自行發想補上。

以原始的題目來說，其實還有學生互相給分、即時批改（因為是程式作業，所以 backend 用 Python 跑過結果後直接產生分數）並顯示於前端等功能。若後續鐵人賽仍有餘力的話，可能會加入使用 WebSocket 做網頁即時功能的開發範例。