环境搭建与代码运行基础

1.8 Localhost 与端口

Tip

理解localhost和端口的概念,学会访问本地开发服务器,掌握端口冲突的解决方法。

1. 为什么要学这个?

当你运行pnpm dev后,终端显示:

Local: http://localhost:3000

你可能会想:"localhost是什么?3000又是什么?为什么不是8888?"

想象你住在一栋巨大的公寓楼。

localhost就是这栋楼的地址,特指你自己的电脑。
3000就是你家的门牌号,特指这栋楼里的某一个房间。

关键理解:

一栋楼(电脑)可以有很多房间(端口)

每个房间可以住不同的服务(网站、数据库、API)

访客(浏览器)需要知道楼号+门牌号才能找到你

2. 核心概念

2.1 localhost - 本地主机

技术定义:localhost是一个特殊的域名,永远指向你自己的电脑,IP地址是127.0.0.1。

就像公寓楼的地址。

作用:让你的浏览器能访问运行在自己电脑上的网站。
等价写法:localhost = 127.0.0.1
为什么叫local:因为这个网站只在你的电脑上运行,别人访问不了。

2.2 端口 - 门牌号

技术定义:端口(Port)是一个0-65535之间的数字,用来区分同一台电脑上运行的不同服务。

就像公寓楼里的门牌号。

作用:让一台电脑可以同时运行多个服务。
常见端口:
- 3000:Next.js默认端口
- 5173:Vite默认端口
- 8080:很多后端服务的默认端口
- 5432:PostgreSQL数据库默认端口

graph TD
    A[你的电脑/localhost] --> B[端口3000/Next.js网站]
    A --> C[端口5432/数据库]
    A --> D[端口8080/后端API]
    
    E[浏览器] --> F[访问localhost:3000]
    F --> B
    
    style A fill:#e1f5ff
    style B fill:#e8f5e9
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e1f5ff
    style F fill:#fff3e0

3. 怎么使用?

📦 访问本地网站

# 1. 启动开发服务器
pnpm dev

# 2. 终端会显示
Local: http://localhost:3000

# 3. 在浏览器地址栏输入
http://localhost:3000
# 或者
http://127.0.0.1:3000

⚙️ 修改默认端口

如果3000端口被占用,可以手动指定端口:

# 方法1:临时修改
pnpm dev -p 3001

# 方法2:修改package.json
# 找到 "dev": "next dev"
# 改为 "dev": "next dev -p 3001"

✨ 查看端口占用

# Windows
netstat -ano | findstr :3000

# Mac/Linux
lsof -i :3000

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
直接访问`localhost`不加端口	访问`localhost:3000`	浏览器不知道要访问哪个房间
同时启动两个项目在3000端口	第二个项目用3001端口	一个房间不能住两个服务
用`127.0.0.1:3000`分享给朋友	告诉他这只能在你电脑上访问	localhost只在本地有效,别人访问不了
端口被占用就放弃	换个端口或关闭占用的程序	端口有65535个,总能找到空的

6. 本章小结

🏠 localhost是你的电脑:特殊域名,永远指向127.0.0.1
🚪 端口是门牌号:0-65535之间的数字,区分不同服务
🔗 访问格式:http://localhost:端口号
🔧 换端口很简单:pnpm dev -p 3001
⚠️ 端口会冲突:一个端口只能被一个服务占用