零到全栈（网页从哪来，服务器怎么架）

前言：

先回答一个问题：今天 AI 已经越来越会写代码了，为什么还要学开发？一个关键原因是，写代码这件事本身并不直接产生价值，产品才产生价值；用户愿意付钱的，从来都是一个真正可使用、可访问、可运营的产品，而不是一堆代码

可以把 "会写代码" 理解成 "会开车"，但真正有价值的东西不是 "我会开车"，而是 "我有一条每天早上 7 点半发车、稳定运营的客运服务"；站点怎么设置、线路怎么规划、安全和准点怎么保障，这些把车变成服务的事情，才是产品真正值钱的部分；AI 可以替你握方向盘，但为结果负责、把整个服务管理起来的人，仍然是你

所谓全栈开发，说的就是这种面向结果的能力：从浏览器里的页面，到页面背后的数据和逻辑，再到服务器和上线部署，你不一定每一层都学到最深，但你知道每一层在干什么，也知道它们怎么接在一起，最后能真的做出一个可以运行、可以访问的产品

在 AI 已经会写代码的时代，这种能力反而更重要了：每次新的模型能力或编程工具出现，最先把它变成生产力的人，往往就是那些本来就懂计算机系统的人；不是因为他们更会提问，而是因为他们知道 AI 的产出该放进项目的哪个环节、结果靠不靠谱、出了错该先查哪一层；不会管理 AI 的人看到的是冲击，会管理 AI 的人看到的是杠杆

互联网是怎么工作的：

网页不是凭空出现的：浏览器里看到的东西，总得先来自某个具体的地方

动手做一个网页文件：

首先，请看这四行命令：

bash 复制代码

cd ~
mkdir zero-to-tech
cd zero-to-tech
touch index.html

如果你能完全看懂这四行命令，就逐行执行一遍------它们的含义是在你的 home 目录下新建一个名为 zero-to-tech 的文件夹，进入这个文件夹，再在里面创建一个 index.html 文件

接着，在这个 index.html 中写入以下代码（千万别手敲，直接复制粘贴）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>你好，互联网</h1>
    <p>这是我的第一个网页，现在它还只是一个本地的 HTML 文件。</p>
  </body>
</html>

编辑文件的方式有两种：Vim 和 VS Code，任选其中一种，把上面的代码粘贴进 index.html 保存即可；无论选了哪种方式，完成后都可以用下面这个命令，确认文件里已经包含了这段代码：

bash 复制代码

cat ~/zero-to-tech/index.html

如果终端里完整打印出了这段代码，你的第一份代码文件就编辑和管理完毕了

用浏览器打开刚做的网页：

刚才创建的这份 index.html 带着 .html 后缀，电脑会优先用 Web 浏览器打开它；打开的方式有两种，建议都试一遍

第一种：从文件夹进入

先在电脑上打开 zero-to-tech 文件夹，找到这个新建的文件；在 Mac 上可以用终端快速打开：

bash 复制代码

open ~/zero-to-tech

访达 (Finder) 会弹出这个文件夹，里面就是我们的 index.html；接下来双击它，你会观察到它被浏览器打开

第二种：一条命令直达

也可以跳过访达这一步，直接在终端里通过一条命令让浏览器打开 index.html：

bash 复制代码

open ~/zero-to-tech/index.html

如果你用的是 Windows，open 命令不一定能用，那就按路径在文件管理器中找到 index.html，双击文件，或者右键选择用浏览器打开

打开以后，你会在浏览器里看到一个有标题、有段落、有卡片的页面，页面里写着 "你好，互联网"，还有 "这是我的第一个网页..." 等文字

现在先把这件事看清楚：你在浏览器里看到的网页，来自你刚才保存的那个 index.html 文件；你在 VS Code 或 Vim 里改的是代码文件，而浏览器里显示的，是这个代码文件被读取、被解释之后的结果

代码文件和网页，到底是什么关系：

现在你的电脑里同时存在两样东西：一个 index.html 文件，和一个浏览器里打开的网页；它们不是同一个形态，但有直接关系

可以这样理解：html 文件是网页内容的源文件，浏览器负责读取这个文件，并把它显示成网页；而你刚才复制进去的那些代码，同时包含了页面结构定义和文字内容，具体拆解属于前端基础的范畴，到那时再回头细看

到这里，网页这件事就不再那么抽象了：它完全可以只是你电脑里的一个文件

往前一步：别的电脑能不能看到我的网页

浏览器既然能打开你自己电脑里的 index.html，那它能不能打开其他电脑上提供的网页内容？

其实，这正是你每天都在做的事------平时访问一个网站，本质上就是你的浏览器正在通过网络访问另一台电脑上提供的内容

真实的网站当然不一定只是一个单独的 html 文件，它还可能包含其他代码文件、图片、视频、动态数据；但对当前这一层理解来说，先抓住下面这一点已经够用：浏览器能打开本地网页文件，也能访问远程电脑提供的网页内容

那台远程的电脑，通常就叫服务器：

如果一台电脑愿意持续对外提供内容、接收请求、返回结果，那么在这个语境下，它通常就叫服务器

新手可能经常会对这里出现的 "返回" 这个词感到困惑：中文语境里它一般表示同一个主体去了一个地方再原封不动地回来，而在计算机技术领域，这个词通常表示的是服务端对客户端的 "回复" 行为

你可以把服务器理解成一台联网的电脑，只不过它的主要工作不是给某个人自己使用，而是对外提供服务，比如提供网页文件、图片、接口数据、登录入口；我们打开一个网站，就是在访问远程服务器上提供的这些内容

找到服务器之前，先要找到地址：IP

如果网页内容在另一台电脑上，浏览器要做的第一件事就是先找到那台电脑；现实世界里你要去找一栋楼，需要地址，网络世界里一台联网设备也需要地址，这个地址通常就是 IP 地址

我们可以把它理解成：一台联网设备在网络中的地址，比如：

bash 复制代码

120.55.66.77

这种地址对机器很方便，但对人不太友好

IP 太难记，于是有了域名：

如果所有网站都靠人去记 IP 地址，会很麻烦：不好记、不好读、不好传播，换地址以后也很麻烦，所以互联网里又有了另一个东西------域名，比如 baidu.com、github.com、google.com

域名的作用，可以先理解成：给机器地址起一个更方便人记忆和输入的名字；所以你平时在浏览器里输入的，通常不是 IP 地址，而是域名

DNS：把域名翻译回 IP 地址

到这里，一个问题会自然冒出来：你输入的是域名，但浏览器真正要找的是 IP 地址，那中间谁来负责转换？

负责这件事的就是 DNS，我们可以先把 DNS 理解成：一个把域名翻译成 IP 地址的系统

比如你输入 github.com，浏览器不会直接知道它对应哪台机器，它需要先查 github.com 对应的 IP 地址是什么，查到以后才能继续往下访问

找到服务器以后，还要找到具体的服务：

现在浏览器已经通过域名和 DNS，找到了目标服务器，但事情还没结束：一台服务器上不一定只跑一个服务，就像我们自己的电脑可以同时做很多不同的事情，同一台服务器上也可能同时有好几个不同的服务在运行

所以浏览器还要继续确认一件事：这次到底要连这台电脑上的哪一个服务？这里就要引出另一个词------端口

端口：一台电脑里不同服务的入口

什么是端口？你可以把它理解为：同一台电脑上，不同网络服务的不同入口；服务器在同一个 IP 地址上可以开启好多个端口，浏览器找到服务器以后，也还要知道该连哪个端口才能拿到网页内容

端口用数字表示，有两个后面会频繁提到的例子：80 和 443；这两个端口通常有默认的含义------80 常常和普通网页访问有关，443 常常和 HTTPS 加密访问有关------比如访问 http://xxxxx.com，就是在请求服务器的 80 端口，如果是访问 https://xxxx.com，那就是在访问服务器的 443 端口了

我们目前已经知道：服务器是一台电脑，端口是这台电脑上某个具体服务的入口

把整条链路连起来看

到这里，可以把整件事重新说一遍了------当你在浏览器里输入一个网址并按下回车时，大致的流程是：

一，你在浏览器里输入一个域名

二，浏览器先去查这个域名对应的 IP 地址

三，DNS 把这个域名对应的 IP 地址告诉浏览器

四，浏览器根据 IP 地址找到那台服务器

五，浏览器再通过某个端口访问这台服务器上的具体服务

六，服务器把网页内容返回给浏览器

七，浏览器把这些内容显示成你看到的网页

如果你能把这七步用自己的话说出来，那你对 "输入网址后发生了什么" 就已经不是完全黑盒了

请注意，上述这个链路整体而言有两个信息发送方向：一个是从用户开始，向服务器发送「请求」（request）；另一个是服务器收到「请求」之后，向用户浏览器返回对应内容作为回应（response）

链路看着很长，但其中许多环节并不需要你亲自完成

准备好你的第一台云服务器：

服务器和我们自己用的电脑，有什么不同：

服务器固然也是一台联网的电脑，但和桌上的机器相比，它有几处关键差异

不同一：它有真正的公网 IP

自己电脑连上 Wi-Fi 后，拿到的是路由器分配的内网地址，比如 192.168.1.5------它更像电话的内线分机号，互联网上的陌生人无法找到它

由此会有一个疑问：既然别人找不到我的内网地址，电脑上登录的微信是怎么收到消息的？答案藏在 "谁先发起连接" 里------表面看你只是开着电脑连着网，实际上微信 App 一启动就主动连上了微信的服务器，并且让这条连接一直保持；朋友发来消息时，消息先抵达微信服务器，服务器再沿这条现成的连接把消息推到你电脑上------你感受到的是 "消息自动弹出来"，背后的顺序却是 App 先主动连出去，服务器随后沿通道推送

换一个场景就不成立了：如果有人想在没有既有连接的前提下，主动向你的电脑发起请求，是做不到的------外界至多知道你路由器的公网 IP，既不知道你家里有几台设备，也不知道该把请求交给谁

内网 IP 与公网 IP 的本质区别就在这里：内网 IP 只能 "主动出去"，不能 "被陌生人找到"；公网 IP 则两个方向都通------网站需要的正是后者，它必须随时能被任何人找到，所以服务器必须有公网 IP

不同二：它通常不配屏幕、鼠标和键盘

家用电脑有屏幕、鼠标、图形界面，常常还带喇叭、摄像头、麦克风；服务器也可以接这些外设，但人们一般不给它配------它绝大多数时间只需开机联网、稳定响应请求，人们对它的期待是运行稳定、方便摆进机架

没有屏幕和键盘怎么操作？可以进机房接上外设，但更常见的做法是远程登录进去，用终端和命令操控

不同三：它需要一直开着

家用电脑可以随手关机，服务器却不行------网站必须随时可访问，服务器因此要常年运转，全天 24 小时不间断

不同四：它跑的是 Linux，而且没有图形界面

家用电脑多数跑 Windows 或 macOS，有桌面和窗口；服务器领域则是 Linux 的天下，而且服务器上的 Linux 通常没有图形界面，只提供终端------在服务器的世界里，终端和命令行本来就是日常

在云平台上租一台云服务器：

四点差异里，后三点都能接受，唯独缺公网 IP 会让作品无处可放，所以干脆真正租一台云服务器，把公网 IP 拿到手**（** 可不实际购买，过一遍流程即可**）**

"云服务器" 指的是：厂商预先搭好网络与服务器，按不同配置出租；硬件由厂商维护，你按时间或配置付费，换来的是一台可以远程登录操作的 Linux 机器

厂商选择很多，腾讯云、阿里云、火山引擎、华为云、天翼云均可，挑购买流程最顺、价格最低的一家即可；价格量级可以参考：阿里云 2 核 2G 的机型，双 11 时 99 元一年，还支持按同价续费

下单时抓住这几点就够了：

买的是服务器（云服务器或轻量应用服务器均可），不要错买成对象存储、数据库、CDN 这类产品
操作系统选 Ubuntu，理由见下
配置取最低档，最便宜的够用
下单前确认这台机器带公网 IP

为什么选 Ubuntu：

Linux 发行版众多，挑 Ubuntu 只有一个理由：初学者环境里它最常见、资料最多，后续命令和安装步骤最容易对齐；Linux 直觉还没建立之前，用它最省心

选 Ubuntu 后还要挑版本号，如 24.04 LTS、22.04 LTS，将来还会有 26.04 LTS；哪个都可以，稳妥之选是 24.04 LTS------不算新，也绝不旧

买完以后，你会拿到什么：

付款成功后，厂商会交给你三样东西：公网 IP 地址、登录用户名（多为 ubuntu 或 root）、登录密码

首次使用要设置密码，也可以用 "重置密码" 按钮（设置后可能要重启才生效），用户名和密码务必记牢；这三样信息凑齐，最关键的一步就完成了

另外别忘了防火墙（部分厂商称之为 "网络与安全组" ）：进入防火墙页面，查看当前放行了哪些端口，至少确认 22 端口处于开放状态（默认通常是开的）------至于为什么偏偏是 22，下文马上揭晓

用 SSH 连上这台服务器：

接下来是一个新命令：SSH，登录远程 Linux 服务器的标准方式

在你自己电脑的终端里这样用：

bash 复制代码

ssh 用户名@服务器公网IP

例如：

bash 复制代码

ssh ubuntu@123.45.67.89

SSH 是一种远程登录服务，默认监听 22 端口------这也正是刚才要确认 22 端口开放的原因

首次连接，终端会询问是否信任这台机器，输入 yes 回车；随后输入密码------敲密码时屏幕不会显示任何字符，属正常现象------再回车

个别厂商（如腾讯云）可能不走常规流程，而是在终端里发一个二维码让你扫码确认，照提示操作即可

登录成功的标志，是提示符变成类似 ubuntu@your-server:~$ 的样子；这一刻不妨停下来体会一下：你敲下的每个字符，都已经作用在网络另一端的那台 Linux 服务器上

登录后，先执行几条熟悉的命令：

登录进去后，先跑几条旧命令，验证自己确实换了台机器：

bash 复制代码

pwd

它会打印当前目录，通常是 /home/ubuntu 或 /root（取决于登录用的用户名）

新服务器的 home 目录用 ls 一看，往往空空如也；不妨再进根目录瞧瞧：

bash 复制代码

cd /
ls

根目录下是一个标准的 Linux 目录结构：

复制代码

bin boot dev etc home lib media mnt opt proc root run sbin srv sys tmp usr var

这与你本地的 macOS 或 Windows 目录差别很大------很正常，这本来就是另一台机器、另一套操作系统；至此，"服务器就是另一台电脑" 不再是抽象说法

用 apt 安装 Nginx：

服务器要对外发网页，还差一个专职软件，它的任务是：盯着 80 端口；有人请求 80 端口，就把对应内容返回

能干这活的软件不少，这里选 Nginx------这类工作正是它的强项；它的本事还不止于此，比如记录每一次请求的日志、按类别分流处理请求、拦截危险请求等，此处知道即可，不展开

安装分两步，先刷新软件包列表，再装 Nginx：

bash 复制代码

sudo apt update
sudo apt install nginx -y

sudo 开头的命令执行时要输一次密码，就是登录用的那个

顺带认识两个新命令：

sudo：以更高权限执行命令，相当于 Windows 的 "以管理员身份运行"
apt：Ubuntu 的软件安装工具，地位类似 macOS 上的 Homebrew

装完确认它是否已在运行：

bash 复制代码

systemctl status nginx

看到这行输出：

bash 复制代码

Active: active (running)

就说明 Nginx 已经启动，正持续监听请求

确认 80 端口开放，用公网 IP 访问默认页面：

Nginx 启动后默认守在 80 端口，即普通 HTTP 请求的标准端口；浏览器访问之前还差一道手续：云平台的防火墙（安全组）要放行 80 端口的入站流量

这个开关不在服务器内部，而在云平台控制台------和刚才确认 22 端口开放是同一个地方；找到你的服务器实例，进入安全组或防火墙配置，放行 TCP 80 端口

然后回到自己电脑的浏览器，访问：

bash 复制代码

http://你的服务器公网IP

应该就能看到 Nginx 的默认欢迎页；它一出现，就同时说明三件事：Nginx 在运行、80 端口已放行、你的浏览器正通过公网 IP 读取另一台电脑提供的网页------此前推导的那条链路，此刻第一次原样上演：

复制代码

浏览器 → IP 地址 → 服务器 → 80 端口 → Nginx → 返回页面内容 → 浏览器显示

顺着配置文件，找到默认页面的源文件：

浏览器里那个默认页面，背后同样是服务器上的一个 HTML 文件------它藏在哪？不用猜，直接看 Nginx 的配置：

bash 复制代码

cat /etc/nginx/sites-available/default

会打印出一大段配置，看不懂没关系，找到这一行就够：

bash 复制代码

root /var/www/html;

含义是：Nginx 从 /var/www/html 目录里取网页文件提供给浏览器；沿这条路径进去看看：

bash 复制代码

cd /var/www/html
ls

里面躺着一个文件，名字通常是 index.nginx-debian.html------正是默认页面的源文件；cat 一眼，终端会滚出一大段 HTML，看不懂不要紧，要确认的只有一件事：浏览器里的网页，背后确实是服务器上一个真实存在、可查可改的 HTML 文件；文件在哪、内容是什么，全都摆在眼前，服务器不是黑盒

用 Vim 改掉这个页面，刷新浏览器验证：

既然页面就是一份真实的 HTML，那就动手改一次，再到浏览器里验证------前面认识的 Vim 正好派上用场：

bash 复制代码

sudo vim /var/www/html/index.nginx-debian.html

进去之后：

按 i 进入编辑模式
把页面里最显眼的那行英文，改成任何你想写的话
按 Esc 退出编辑模式
输入 :wq 保存退出，回车

回到浏览器一刷新，自己的话出现在了公网页面上------这一步成了，整条链路就真正走通了

刚才这一趟，完整走过了：

SSH 登录远程服务器
查 Nginx 配置，沿 root 路径定位页面源文件
用 Vim 改写文件内容
Nginx 持续对外提供这份文件
浏览器刷新，公网上的页面随之改变

最常见的几个卡点：

SSH 连不上 ：依次检查用户名对不对（未必是 ubuntu，以云平台提供为准）、密码是否输对、服务器是否已启动完毕、控制台的安全组或防火墙有没有放行 22 端口

浏览器打不开 IP 地址：重点查控制台里安全组或防火墙是否放行了 TCP 80 端口的入站流量------这一步漏掉的人最多

Nginx 状态不是 active (running) ：重跑 sudo apt install nginx -y，或执行 sudo systemctl start nginx

Vim 改了文件，刷新却没变化 ：先确认保存动作真的完成了------Esc 按了吗、:wq 输了吗、回车敲了吗；拿不准就进去再改一遍