Localhost Port 完整對照表｜3000、8080、8000 常用 Port 總整理

引言：localhost:8080 後面那串數字是什麼？

localhost:3000、localhost:8080、localhost:8000...

第一次看到這些，你可能會想：「後面那串數字是什麼意思？」

那個數字叫做 Port（連接埠）。

不同的程式、不同的框架，會用不同的 Port。

搞混了就連不上。記住了就順暢無比。

這篇文章整理了開發者最常遇到的 Port，讓你一次搞懂誰是誰。

什麼是 Port？為什麼需要 Port 號？

Port 的概念

想像你住在一棟公寓大樓。

大樓的地址是「信義路 100 號」——這就像是 localhost，代表這台電腦。

但大樓裡有很多住戶。每戶都有自己的門牌號碼：101、102、103...

Port 就是門牌號碼。

一台電腦可以同時跑很多程式。每個程式佔用一個 Port，這樣電腦才知道要把資料送給誰。

為什麼需要 Port？

假設你的電腦同時在跑：
- React 前端專案
- Node.js API 伺服器
- MySQL 資料庫

這三個程式都需要接收網路連線。

如果沒有 Port，電腦怎麼知道這個連線是要給 React、Node.js、還是 MySQL？

有了 Port，就很清楚：
- localhost:3000 → React
- localhost:8080 → Node.js API
- localhost:3306 → MySQL

Port 號碼的範圍

Port 號碼從 0 到 65535，總共有 65536 個。

但不是每個都能隨便用：

開發的時候，我們通常用 1024 以上的 Port，避免權限問題。

前端框架常用 Port

前端開發最常遇到這幾個 Port：

Port 3000：React 的預設 Port

使用 3000 的框架/工具：
- Create React App（最常見）
- Next.js
- Remix
- Express.js（也常用）

當你執行 npx create-react-app my-app 然後 npm start，預設就會跑在 localhost:3000。

npm start
# Compiled successfully!
# Local: http://localhost:3000

Port 5173：Vite 的預設 Port

使用 5173 的框架/工具：
- Vite（Vue、React、Svelte 都可以用 Vite）
- SvelteKit

Vite 是新一代的前端建構工具，速度比 Webpack 快很多。

npm run dev
# Local: http://localhost:5173/

Port 4200：Angular 的預設 Port

使用 4200 的框架/工具：
- Angular CLI

Angular 專案執行 ng serve 後，預設跑在 4200。

ng serve
# Angular Live Development Server is listening on localhost:4200

Port 8080：Vue CLI 的預設 Port

使用 8080 的框架/工具：
- Vue CLI（舊版）
- 很多後端框架也用這個

注意：新版 Vue 專案如果用 Vite，會是 5173。只有用 Vue CLI 建立的舊專案才是 8080。

npm run serve
# App running at: http://localhost:8080/

後端框架常用 Port

後端開發常見這些 Port：

Port 8080：通用後端 Port

使用 8080 的框架/工具：
- Java Tomcat
- Spring Boot
- 很多企業級應用

8080 是 HTTP（80）的替代 Port。因為 80 需要管理員權限，所以開發時常用 8080。

Port 8000：Django / Python 的常用 Port

使用 8000 的框架/工具：
- Django
- Python http.server
- Laravel（PHP）

Django 專案執行 python manage.py runserver 預設就是 8000。

python manage.py runserver
# Starting development server at http://127.0.0.1:8000/

Port 5000：Flask 的預設 Port

使用 5000 的框架/工具：
- Flask
- 有些 Node.js 專案也用

flask run
# Running on http://127.0.0.1:5000/

注意： macOS Monterey 之後，5000 Port 可能被 AirPlay 佔用。如果連不上，試試改用其他 Port。

Port 3000：Express.js 也常用

使用 3000 的後端框架：
- Express.js
- NestJS
- Koa

對，3000 前後端都很常用。所以如果你同時跑 React 和 Express，可能會撞 Port。

這時候就需要把其中一個改成別的 Port。

資料庫常用 Port

連接資料庫的時候，也需要知道它的 Port：

完整資料庫 Port 對照表

連線範例

連接 MySQL：

mysql -h localhost -P 3306 -u root -p

連接 PostgreSQL：

psql -h localhost -p 5432 -U postgres

在程式裡設定資料庫連線：

// Node.js 連接 MySQL
const connection = mysql.createConnection({
  host: 'localhost',
  port: 3306,
  user: 'root',
  password: 'password'
});

開發工具常用 Port

除了框架和資料庫，還有一些開發工具也有自己的 Port：

phpMyAdmin 的網址

如果你用 XAMPP：

http://localhost/phpmyadmin

如果你用 MAMP：

http://localhost:8888/phpmyadmin

如果你用 Docker：

http://localhost:8080  # 看你怎麼設定 Port 映射

想了解更多 phpMyAdmin 的設定？請參考「Localhost phpMyAdmin 教學｜本機 MySQL 資料庫管理完整指南」

HTTP/HTTPS 預設 Port

這兩個 Port 特別重要：

為什麼可以省略？

當你輸入 http://google.com，瀏覽器會自動補上 Port 80。

所以 http://google.com 等於 http://google.com:80。

同樣的，https://google.com 等於 https://google.com:443。

這就是為什麼平常上網不用寫 Port。

開發時的情況

但在本機開發時，我們通常不會用 80 或 443。

原因：
1. 需要管理員權限 — 1024 以下的 Port 需要 sudo
2. 可能被其他程式佔用 — 有些系統服務會用這些 Port
3. 容易跟正式環境搞混 — 開發時用 3000、8080 比較清楚

所以你才會看到 localhost:3000 而不是 localhost:80。

Port 衝突怎麼辦？3 種解決方法

有時候你會看到這個錯誤：

Error: listen EADDRINUSE: address already in use :::3000

這代表 Port 3000 已經被佔用了。

方法一：找出誰佔用了這個 Port

Mac / Linux：

lsof -i :3000

輸出會像這樣：

COMMAND   PID    USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node    12345   user   22u  IPv6  0x1234      0t0  TCP *:3000 (LISTEN)

看到 PID（程序 ID）了嗎？可以用它來關掉這個程式。

Windows：

netstat -ano | findstr :3000

輸出：

TCP    0.0.0.0:3000    0.0.0.0:0    LISTENING    12345

最後那個數字 12345 就是 PID。

方法二：關掉佔用的程式

Mac / Linux：

kill -9 12345

Windows：

taskkill /PID 12345 /F

方法三：換一個 Port 用

如果不想關掉那個程式，也可以換個 Port。

React（Create React App）：

PORT=3001 npm start

Vite：

npm run dev -- --port 3001

Express.js：

const PORT = process.env.PORT || 3001;
app.listen(PORT);

Django：

python manage.py runserver 8001

通常加 1 就好：3000 → 3001、8080 → 8081。

Port 問題排解不了？

Port 衝突、連不上、設定搞不定——這些問題有時候比想像中複雜。

如果你試過各種方法還是卡關，讓 VibeFix 工程師直接幫你處理。

讓工程師幫我處理 →

完整 Port 對照表（快速查詢）

以下是開發者最常用的 Port 總整理：

前端框架

後端框架

資料庫

系統預設

常見問題 FAQ

Q：Localhost 8080 是什麼？

A：8080 是一個常用的開發 Port，很多後端框架（如 Tomcat、Spring Boot）和前端工具（如 Vue CLI）會用這個 Port。它是 HTTP Port 80 的替代方案，因為不需要管理員權限。

Q：Localhost 3000 是什麼框架？

A：3000 最常見是 React（Create React App）和 Express.js。Next.js、Remix 等框架預設也是 3000。如果你看到 localhost:3000，很可能是 JavaScript/Node.js 生態系的專案。

Q：Port 被佔用怎麼辦？

A：有三種解法：
1. 用 lsof -i :PORT（Mac/Linux）或 netstat -ano | findstr :PORT（Windows）找出是誰佔用
2. 用 kill -9 PID 關掉佔用的程式
3. 換一個 Port 使用（例如 3000 → 3001）

Q：為什麼 localhost:80 不用寫 Port？

A：因為 80 是 HTTP 的預設 Port。瀏覽器看到 http:// 開頭的網址，會自動補上 Port 80。所以 http://localhost 和 http://localhost:80 是一樣的。

Localhost Port 重點整理與下一步

今天我們學會了：

1. Port 是什麼 — 一台電腦多個服務，Port 就是區分它們的「門牌號碼」

2. 常用 Port 對照：
   - 前端：3000（React）、5173（Vite）、4200（Angular）、8080（Vue CLI）
   - 後端：8080（Java）、8000（Django）、5000（Flask）、3000（Express）
   - 資料庫：3306（MySQL）、5432（PostgreSQL）、27017（MongoDB）

3. Port 衝突解法 — 找出佔用者、關掉它、或換個 Port

下次看到 localhost:8080，你就知道那可能是 Java 專案或 Vue CLI 專案了。

延伸閱讀

• Localhost 是什麼？完整指南
• Localhost 是什麼？127.0.0.1 完整解析｜新手必讀
• Localhost 拒絕連線完整解決方案
• Localhost Docker 教學｜容器化開發環境設定指南

程式只能在本機跑？

你已經學會 Port 的概念了。但如果你的專案需要讓別人看到，不能只跑在 localhost——

部署到雲端、設定網域、處理 HTTPS...這些可能又讓你頭痛。

VibeFix 專門幫開發者解決這種問題。

不管是 Port 設定、部署上線、還是網域綁定，我們都能幫你搞定。

幫我上線 →

參考資料

1. IANA，〈Service Name and Transport Protocol Port Number Registry〉
2. MDN Web Docs，〈What is a URL?〉
3. React Documentation，〈Create React App〉
4. Vite Documentation，〈Getting Started〉
5. Django Documentation，〈runserver〉