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

本系列文章將試著遵循 Aggregate libraries instead of frameworks 的核心思想,開發一套能夠完整運行的 web-based 服務。 所謂 web-based 就是會包含一個標準的 HTML5 web application ,以及背後的 databaseAPI 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 做網頁即時功能的開發範例。

results matching ""

    No results matching ""