← 术语图鉴

本地环境

Local Environment · 也叫 localhost / 本机 / 127.0.0.1 / 开发环境

你自己电脑上跑起来的那一份网站,只有你能访问,和线上那份是两套各自运行的东西。

你可能会说:

  • “我电脑上明明是好的,为什么发到线上就不对了?”
  • “AI 让我打开 localhost:4321 看效果,这个地址别人能打开吗?”

它是什么

localhost(也写作 127.0.0.1)指的就是"这台电脑自己"。AI 帮你启动的开发服务器跑在你的电脑上,只有你的浏览器能访问;把 localhost 的链接发给别人,对方打开的是他自己的电脑。

本地和线上是两份各自运行的程序:代码版本、依赖版本、Node 版本、环境变量、数据库、缓存,任何一项不同,表现就可能不同。开发服务器为了方便调试,还会做很多线上不做的事,比如改了代码自动刷新、把请求转给另一个本地端口。

所以"本地没问题"只证明了一件事:在这台电脑、此刻的配置下没问题。上线前要按线上的方式构建一次,再到线上地址实际看一遍。

打个比方

像餐厅开业前在自家厨房试菜:锅、灶、调料都和店里不一样,家里试着好吃,不代表店里做出来也好吃。

在这个网站里

这个网站本地开发时跑在 localhost:4321,改完代码自动刷新;上线前先用 npm run build 按线上的方式构建,再用 npm run preview 在本地预览构建结果。兄弟项目 E2E Review 在本地出过一次事故:一个早该停掉的旧进程占着端口,让人以为改动没生效(第 2 课)。

容易搞混的地方

常见误解

本地能打开,线上就一定能打开

正确理解

线上是另一台机器、另一次构建、另一套配置。本地只是彩排,线上才是演出。

常见误解

把 localhost 的地址发给同事,他就能看到我做的页面

正确理解

localhost 永远指向打开它的那台电脑。要给别人看,得部署到一个公开地址,或者用托管平台的预览部署。

你可以这样告诉 AI

复制下面这段,贴给你的 AI

告诉我这个项目在本地运行和在线上运行有哪些不同:启动命令、端口、环境变量、数据从哪来、怎么构建。再给我一条和线上构建方式一致的本地构建与预览命令,上线前我自己跑一遍。

接着看

  • 端口——一台电脑上区分不同服务的编号:地址把请求送到这台电脑,端口号决定交给哪个程序。
  • 进程——一个正在运行的程序。它把代码和数据读进内存后自己运行,和磁盘上的文件已经没有关系。
  • 环境变量——程序启动时从运行环境里读取的配置,比如数据库地址、密钥、端口。同一份代码,换一套环境变量就换一种行为。

在这些课里出现

相关的真实事故