模块 3.5

把网页发布到公网

让代码从本地，一路跑到公网

零到全栈 · 李勃老师 · 2026

WHERE WE ARE

到这一节为止，你已经有三份资产

本地

你本地电脑上的项目

~/zero-to-tech 里有三个文件，你的项目是在这里开发。

GitHub

远程仓库

同样的三个文件已经 push 到了你的 zero-to-tech 仓库。

云服务器

Ubuntu + Nginx

公网 IP 浏览器能打开——但看到的是 Nginx 默认欢迎页。

本地和 GitHub 已经接通了，但还没有接通服务器。

TODAY'S ONE THING

让用户通过公网 IP 访问到你的页面

这一节就只做一件事——把这条断链接通。

THE PIPELINE

这条链路长什么样

本地

你的 Mac

→ push

GitHub

zero-to-tech 仓库

→ pull

云服务器

~/zero-to-tech

→ nginx

浏览器

公网 IP

中间这两段——服务器从 GitHub 拉代码、Nginx 改指向新目录——就是今天要做的。

CLONE METHODS

仓库可见性 × 连接方式 = 四种情况

HTTPS

SSH

Public

不需要鉴权

clone / pull 直接拉取，零配置。

需要 SSH key

先在本机生成 key、把公钥加到 GitHub；配过一次以后就通用。

Private

每次校验账号

每次 push / pull 都要输用户名 + 一个 token。

需要 SSH key

和 Public + SSH 同一套流程，配过一次以后就通用。

ONE KEY PAIR PER MACHINE

每一台机器，都要有自己的一对 SSH key

Mac

上节课已经配过了

GitHub 已经认识你这台 Mac，git push 不需要再输密码。

服务器

这一节要原样再做一遍

Mac 上那对 key 不能搬过来用，服务器必须有自己的一对。

命令一模一样，流程一模一样，只是这次是对着服务器执行。

SYMMETRIC PATHS

两边的项目路径，完全对称

Mac

~/zero-to-tech
↓ 展开成
/Users/你的名字/zero-to-tech

服务器

~/zero-to-tech
↓ 展开成
/home/ubuntu/zero-to-tech

~ 代表"当前用户的家目录"，两边真实路径不同，但 ~/zero-to-tech 这种写法在两边都成立。

/ETC/NGINX/

先看一眼配置目录里有什么

ubuntu@server:/etc/nginx$ ls
conf.d          koi-win            nginx.conf       sites-enabled
fastcgi.conf    mime.types         proxy_params     snippets
fastcgi_params  modules-available  scgi_params      uwsgi_params
koi-utf         modules-enabled    sites-available  win-utf

不用被吓到。Nginx 功能多，这里塞了一堆配置——但这一节我们只关心被高亮的这三处（一个入口 + 两个目录）。

NGINX.CONF

去掉注释，入口文件其实就这么短

user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
}

http {
    sendfile on;
    tcp_nopush on;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    access_log /var/log/nginx/access.log;
    gzip on;

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

AVAILABLE VS ENABLED

Nginx 配置分两个目录存放

草稿夹

sites-available/

你写过的所有网站配置都放在这里，不管启不启用，都留底。

生效夹

sites-enabled/

只放当前要让 Nginx 真正读到的那几个配置，里面是软链接。

sites-enabled/default → sites-available/default
# 改哪一边，都是改同一份文件

DEFAULT SITE

去掉注释，default 就这一段

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }
}

/etc/nginx/sites-enabled/default 的真实内容，把注释行都拿掉之后就这十几行。

EDIT THE ROOT

用 vim 把 root 改到我们自己的目录

sudo vim /etc/nginx/sites-enabled/default

- root /var/www/html;
+ root /home/ubuntu/zero-to-tech;

vim 流程同 2.4：/root /var 搜索定位 → i 插入 → 改 → Esc → :wq。

TEST & RELOAD

改完配置不会立刻生效——需要两步

校验语法

sudo nginx -t

看到 syntax is ok + test is successful 才算过

→

让配置生效

sudo systemctl reload nginx

无输出即成功；reload 平滑加载，不打断已有连接

校验不通过就千万别 reload——直接 reload 会让 Nginx 加载错配置然后挂掉。

WHY 404

配置都对，为什么打开是 404？

因为 Nginx 是以 www-data 的身份读文件，它得能逐层走进路径上的每一级目录——结果卡在了你的家目录这一层。

# 它要逐层走进：
/  →  home  →  ubuntu  ✗ 挡在这  →  zero-to-tech  →  index.html

ls -ld /home/ubuntu
drwxr-x---   ubuntu ubuntu   /home/ubuntu
            ↑ others 没权限，www-data 进不去

# 给它开一道"能穿过"的缝：
sudo chmod o+x /home/ubuntu

o = 其他人（含 www-data），x = 能穿过（不是能查看）。最小授权，只需做一次。

DAILY UPDATE FLOW

以后每次改代码，要让公网生效，就这三段

本地

git push

add → commit → push

→

服务器

git pull

SSH 上去拉最新代码

→

浏览器

refresh

刷新页面看到新版本

这就是最朴素的"持续部署"。后面的模块会让这三步交给机器自动做。

MODULE 3 COMPLETE

模块 3 到这里完整结束

3.1 · 第一个 HTML 页面

3.2 · HTML / CSS / JS 拆成三个文件

3.3 · Git 入门——给代码设置存档点

3.4 · GitHub 与远程同步

3.5 · 部署到服务器（本节）

你已经走通了部署链路
链路本身，比任何一个具体页面都更有价值

你以后所有项目，都是在这条链路上做加法。

零到全栈 · 模块 3.5 完