軟體部署入門：從前端、後端到 Nginx 的請求流程

常見的 Web 系統中，系統通常可以簡單分成兩個部分：
前端（Frontend）
後端（Backend）

前端主要負責使用者看得到以及操作得到的介面，例如網站上的按鈕、表格、文字、圖片以及互動效果。常見的前端技術包含 JavaScript，以及 Vue、React、Nuxt 等框架。

後端則負責系統真正的商業邏輯，例如登入驗證、訂單處理、資料查詢、資料寫入以及權限判斷等。
以 Python 開發來說，可以使用 FastAPI 作為後端框架。

先從最簡單的「單台伺服器部署」來理解一個網站從使用者發出請求，到最後看到畫面的完整流程。

一、基本架構

假設目前只有一台 Linux Server，上面部署：

• Nginx
• 前端程式
• Python FastAPI 後端
• Database

架構可以簡化成：

                        Internet
                           │
                           ▼
                    ┌─────────────┐
                    │    Nginx    │
                    │   :80/:443  │
                    └──────┬──────┘
                           │
                 ┌─────────┴─────────┐
                 │                   │
                 ▼                   ▼
           Frontend               Backend
        Vue / Nuxt / JS          FastAPI
                                  :8000
                                    │
                                    ▼
                                Database

Nginx 位於最前面，所有從 Internet 進入網站的 HTTP / HTTPS Request 都會先經過 Nginx。

Nginx 再根據 URL 判斷這個 Request 應該交給誰處理。

例如：

https://example.com/

可能交給前端處理，而：

https://example.com/api/users

則轉發給 FastAPI 後端。

二、使用者第一次進入網站

假設使用者在瀏覽器輸入：

https://example.com

瀏覽器會向 Server 發送 HTTP Request。

Request 首先進入 Nginx。

Browser
   │
   │ GET /
   ▼
Nginx

Nginx 發現 / 是前端網站，因此將前端需要的 HTML、JavaScript、CSS 等檔案回傳給 Browser。

例如：

index.html
app.js
style.css

瀏覽器拿到這些檔案之後，就可以開始執行 JavaScript 並建立使用者看到的網站介面。

因此：

Browser
   │
   │ GET /
   ▼
Nginx
   │
   │ HTML / JS / CSS
   ▼
Browser
   │
   ▼
執行 JavaScript
   │
   ▼
顯示網站介面

三、前端如何取得後端資料？

接下來就是 Web 系統非常重要的一個流程。

假設網站上有一個「會員列表」。

前端本身並不知道有哪些會員，真正的會員資料可能存在 MySQL Database 裡面。

因此前端 JavaScript 會發送 API Request：

fetch("/api/users")

此時 Browser 會再次向：

https://example.com/api/users

發送 Request。

注意，這個 Request 仍然先進入 Nginx。

Browser
   │
   │ GET /api/users
   ▼
Nginx

但是 Nginx 發現 URL 是 /api/ 開頭，因此不再交給前端，而是透過 Reverse Proxy 將 Request 轉發給 FastAPI。

例如 FastAPI 實際執行在：

127.0.0.1:8000

因此流程變成：

Browser
   │
   │ GET /api/users
   ▼
Nginx
   │
   │ proxy_pass
   ▼
FastAPI :8000

四、FastAPI 如何處理 Request？

FastAPI 收到 Request 後開始執行後端邏輯。

例如：

@app.get("/api/users")
def get_users():
    users = query_database()

    return {
        "data": users
    }

實際上通常還會經過 Service、Repository、ORM 等不同程式層級，但概念上就是：

FastAPI
   │
   ▼
Business Logic
   │
   ▼
Database

例如向 MySQL 查詢：

SELECT id, name FROM users;

Database 回傳資料：

1, Tom
2, Mary
3, John

FastAPI 再把這些資料整理成 API Response。

最常見的格式就是 JSON：

{
  "data": [
    {
      "id": 1,
      "name": "Tom"
    },
    {
      "id": 2,
      "name": "Mary"
    },
    {
      "id": 3,
      "name": "John"
    }
  ]
}

接著資料沿原本的路徑回去：

Database
   │
   ▼
FastAPI
   │
   │ JSON Response
   ▼
Nginx
   │
   ▼
Browser

所以完整 API 流程是：

Browser
   │
   │ GET /api/users
   ▼
Nginx
   │
   │ Reverse Proxy
   ▼
FastAPI
   │
   ▼
Database
   │
   ▼
FastAPI
   │
   │ JSON
   ▼
Nginx
   │
   ▼
Browser

五、前端收到資料之後發生什麼事？

這裡很容易產生一個誤解。

並不是：

後端取得資料
→ 後端把資料加進 HTML
→ 後端把完成畫面傳給使用者

至少在一般 SPA 前後端分離架構中不是如此。

實際上 FastAPI 通常只負責回傳：

{
  "name": "Tom",
  "age": 30
}

Browser 裡正在執行的 JavaScript 收到這份 JSON 後，再把資料放入畫面。

例如：

const response = await fetch("/api/users")
const result = await response.json()

users.value = result.data

Vue 或 React 再根據 users 的內容重新渲染畫面。

因此是：

FastAPI
    │
    │ JSON
    ▼
Browser JavaScript
    │
    ▼
Vue / React 更新資料
    │
    ▼
DOM 更新
    │
    ▼
使用者看到畫面

所以嚴格來說，最後的「渲染」通常是發生在使用者的瀏覽器裡，而不是伺服器上。

六、Nginx 在這個架構中扮演什麼角色？

Nginx 在這種部署架構中有一個很重要的功能，就是作為網站最前面的入口。

例如可以設定：

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/frontend;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8000;
    }
}

這段設定可以簡單理解為：

/
→ Frontend

/api/
→ Backend

因此使用者看起來只是在存取同一個 Domain：

example.com

但實際上 Nginx 在背後幫忙把 Request 分流。

例如：

example.com/
              ──────→ Frontend

example.com/login
              ──────→ Frontend

example.com/products
              ──────→ Frontend

example.com/api/users
              ──────→ FastAPI

example.com/api/orders
              ──────→ FastAPI

這也是 Nginx 作為 **Reverse Proxy（反向代理）**時非常常見的用途。

七、完整流程

把整個過程串起來，可以分成兩個階段。

第一階段是「取得前端程式」：

使用者
  │
  │ https://example.com
  ▼
Browser
  │
  ▼
Nginx
  │
  ▼
HTML / JS / CSS
  │
  ▼
Browser 執行 JavaScript
  │
  ▼
顯示網站

第二階段則是「取得後端資料」：

Browser
  │
  │ GET /api/products
  ▼
Nginx
  │
  │ Reverse Proxy
  ▼
FastAPI
  │
  ▼
Business Logic
  │
  ▼
Database
  │
  ▼
FastAPI
  │
  │ JSON Response
  ▼
Nginx
  │
  ▼
Browser JavaScript
  │
  ▼
前端更新畫面
  │
  ▼
使用者看到資料

因此，一個最基本的 Web Deployment 可以理解成：

Nginx 負責接收與分流 Request，前端負責呈現介面，FastAPI 負責處理商業邏輯與資料，而 Database 負責保存資料。

前端與後端之間則主要透過 HTTP API 交換資料，而最常見的 API Response 格式就是 JSON。