後端

後端是啥

前端

  • 顯示畫面
  • 與使用者互動
  • 呼叫後端 API

後端

  • 處理資料、邏輯
  • 存取資料庫
  • 回傳結果

最最最基本，要做什麼

程式語言

  • Javascript

  • Python

  • Java

Webserver

  • Node.js / ExpressJS

  • Flask

  • Spring Boot

Proxy

  • Nginx

API

  • REST

Database

  • SQL

HTTP

HyperText Transfer Protocol

詳細: RFC 9110

[scheme]://[authority]/[path]?[query]#[fragment]

https://example.com:123/path/data?key=value#fragment

Request Method

  • GET

  • HEAD

  • POST

  • PUT

  • DELETE

  • ...

Response Code

  • Successful 2xx

  • Redirection 3xx

  • Client Error 4xx

  • Server Error 5xx

JSON

JavaScript Object Notation

JavaScript 物件、陣列、數字、字串、布林、null

所使用的序列化格式

 

現今被廣泛用於資料交換，不限程式語言

請求

前後端分離網站

  • 後端直接根據請求，產 HTML
  • Server Side Rendering
  • 每次請求都要 Server Render
  • 像是 php

傳統網站

example.com?id=1

Server 直接回覆

  • 後端提供 API
  • 前端 JS 呼叫 API，動態更新頁面
  • Client Side Rendering

前後端分離

  • 前後端獨立開發，容易維護
  • 到處都可以共用 API
  • React
    • 市佔率最高?
    • 生態系大
    • 學習曲線高
  • Vue.js
    • 更直觀、好寫

常見的 JS 框架

前端:

後端:

SEO

Search Engine Optimization

簡單講

 

  • 讓搜尋引擎更容易理解網站內容
  • 搜尋排名上升
    • 更多造訪者
  • CSR
    • SEO 差
    • 因為有些內容要等 JS 執行後才有
    • Search Engine 在 index 可能比較慢、不完
  • SSR
    • SEO 優秀
    • 沒問題

但... 如果我想要前後端分離，又想要 SEO 呢

有的，Next.js，全端框架

 

  • getServerSideProps() 在請求時運行
    • 先 call API，再發送 html
    • 需要高 SEO 可以用

anyway

現代 Web 常見作法

  • 前端負責 UI
  • 後端提供 API
  • 分離開發

API

Application Programming Interface

一個程式提供給另一個程式使用的介面

(也不一定是程式就是)

  • 程式
    • 語言: Python 內的 print()...
    • 框架: React 的 useState()、useEffect()
  • OS
    • Windows API
  • 硬體
    • OpenGL 2D/3D Render API
  • Web
    • 後端提供給前端的 Rest API

舉例這些 API

Rest API

  • 資源導向，把系統中的東西都當成名詞
  • 無狀態，每個請求都帶足資訊，Server不會記你上個請求

API 格式

  • 動詞: Request Method

  • 名詞: URL Path

備註，沒有正式標準

CRUD

  • Create

  • Read

  • Update

  • Delete

POST

GET

PUT

DELETE

  • GET /users

  • GET /users/1

  • POST /users

  • PUT /users/1

  • DELETE /users/1

  • POST /checkAccess

讀取所有 user

讀取 user 1

新增使用者 (req)

整筆更新 (req)

刪除 user 1

做行為也用 POST

想像成 File System，就好理解了

範例

假設 user 物件結構是 id, name, email

 

  • GET /users

    • res: 200 OK

      • payload: [user1]

    • ​res: 200 OK

      • payload: ​[]

 

 

  • ​​GET /users/1
    • ​​res: 200 OK

      • payload: ​user1

    • ​​res: 404 Not Found

  • POST /users       body: {name,email}

    • ​res: 201 Created

      • payload: user2

    • res: 409 Conflict

  • PUT /users/1      body: {name,email}

    • ​res: 200 OK

      • payload: user1

    • res: 404 Not Found

DELETE /users/1

  • ​res: 204 No Content

  • res: 404 Not Found

API 後面不一定是 DB

  • GET /weather

  • GET /sysinfo

  • GET /prime/89

後面可能是氣象局 API

後面是 /proc 的資料

純運算回傳

Error Code

可以在資料中自訂更詳細的 error code

但是你要讓處理前端的人知道

請不要幹這種事，想說裡面都寫 code 了

HTTP 就都丟 200

Trailing Slash

尾隨斜線，強迫症惡夢

題外話:

  • https://example.com
  • https://example.com/

根目錄

不影響

  • https://example.com/path/data
  • https://example.com/path/data/

非根目錄

  • 內容相同: 沒問題
  • 內容不同: SEO 會被分散
  • 大部分網站會把 / 302 掉
  • 檔案不要用 / 結尾

總之就一個可留意的小細節

來看看一個簡單的前後端網頁範例

寫一個前後端分離網站 (node.js + Vite.js)

使用 Nginx 把他們 proxy 在一起，避免 CORS

https://github.com/TheSpeedCubing/web-example

/frontend

  • src/
    • App.jsx
    • main.jsx
  • Dockerfile
  • index.html
  • package.json
  • vite.config.js

/backend

  • Dockerfile
  • index.js
  • package.json

Swagger-UI

後端還要做什麼

DB

  • 炸池
  • TX 一堆要注意的
  • DB Index 調優，Table/Row Lock
  • Managed DB !!

優化、架構

  • Redis
  • Message Queue
    • Kafka、RabbitMQ ?

DevOps

  • CI/CD
  • Kubernetes for Scaling Containers
  • Cloud (AWS / GCP / Azure)

Networking

  • 基礎要會，我這塊就蠻弱的

但實務上也不一定能遇到

所以我就常在家裡亂玩，看能玩什麼

像是最近在小玩 Grafana & K8S

monitor + 嘗試讓他 rolling update

前天玩 RouterOS，改 pppoe，練一下 networking

結果家裡整天沒網路，modem 重開也沒用

That's it

be

By speedcubing

Made with Slides.com

be

  • 43

More from speedcubing