---
# System prepended metadata

title: System architecture

---

# System architecture


## 系統架構圖
![](https://hackmd.io/_uploads/SJoiKZJwn.png)
本架構基於PROXMOX上進行系統的建置，架設了共5台的VM作為我們的服務Server。
分別是web, database, web-cicd-runner, database-cicd-runner 以及 o2.

在前端部分，我們選用React.js作為我們的開發框架，
React是一個功能強大且受歡迎的JavaScript函式庫，用於構建用戶界面。它提供了組件化的開發模式、高效的虛擬DOM更新機制和狀態管理，使得開發人員可以更輕鬆地構建高性能和可維護的Web應用程序。

在後端的部分，我們選用Fast API作為我們的開發框架，
FastAPI是一個高性能且易於使用的Python Web框架，專為構建快速的Web應用程序和API而設計，
提供了出色的性能和開發體驗，其標準兼容性和擴展性使其成為開發人員首選的框架之一。

在資料庫的部分，我們選用了MariaDB。
MariaDB是一個開源的關聯式數據庫管理系統，具有與MySQL高度兼容的特點，同時提供了一些新的功能和性能改進。它是一個穩定、可靠且廣泛使用的數據庫解決方案，適用於各種規模和類型的應用程序。

在網頁伺服器的部分，我們採用Nginx。
是一個高性能的伺服器，它能夠處理大量並發連線和高流量的網路流量。Nginx的事件驅動架構和非阻塞IO模型使其能夠有效地處理請求，並在相同硬體上提供更好的效能。

此外，為了確保開發人員可以更迅速地將新功能和修補程式碼交付到生產環境，從而縮短產品上市時間，提高軟體開發和交付的效率和品質。我們導入CI/CD，實現快速且可靠的軟體交付流程。

在部署應用程序的部分，我們使用了Docker。
Docker 可以幫助快速部署應用程序，無論是在開發、測試還是生產環境中。由於容器化的特性，可以在短時間內複製和運行多個容器實例，從而實現應用程序的擴展性和高可用性。

在系統的部分，我們提供使用者一個易於上手的登入以及註冊系統，讓使用者能夠安全且放心的使用我們的產品，並透過第三方驗證系統，確保平台上每一個使用者的真實性。


## 硬體設備與虛擬裝置架構圖
![](https://hackmd.io/_uploads/Bk2NpeJv3.png)
網路的位置、網段與接法如圖所示。VM 內部的 Docker 設置請參照網頁前後端的系統架構圖。
設備上遇到比較麻煩的問題，是設備效能不太能處理太過龐大的系統，這類的資源問題是我們不太能解決的情形。另外就是公開網路的位置不足，必須要外接路由器來解決網路位置不足的問題。

## Developing Environment

因前後端的分工模式，我們比較沒遇到協同需要仰賴的 Team Standards 和 Coding Standards 的問題，程式的可讀性在技術討論上沒遇到什麼問題。開發套件皆為常見的公開套件，所以也沒遭遇太大的相依性、版本衝突，或是部署上的問題。

自動化腳本則是因功能、平台與社群而異，所以差異性蠻大的，需要時間去學習套件的使用方法與數值的分析。
