完成 HTML、CSS 和 JavaScript 后，网页目前只存在于本地。要让其他用户通过公网访问，需要将代码同步到云服务器，再由 Nginx 对外提供静态文件。

部署链路

整个部署过程涉及三个位置：

1
2
3
4
5
6
7
本地开发环境
    ↓ git push
GitHub 远程仓库
    ↓ git pull
云服务器
    ↓ Nginx
公网浏览器

各部分的职责如下：

  • 本地环境用于编写、调试和提交代码。
  • GitHub 用于保存代码，并在本地与服务器之间同步版本。
  • 云服务器运行在公网环境中，保存用于部署的网站代码。
  • Nginx 监听 HTTP 或 HTTPS 请求，并返回对应的静态文件。

GitHub 在这条链路中负责代码托管，不直接承担网站服务。真正响应用户访问请求的是云服务器上的 Nginx。

本地与服务器目录

同一个项目在本地和服务器上各有一份副本。例如：

1
2
本地：    /Users/username/zero-to-tech
服务器：  /home/ubuntu/zero-to-tech

两边的绝对路径可以不同，但项目内部结构应保持一致：

1
2
3
4
zero-to-tech/
├── index.html
├── style.css
└── script.js

Git 根据仓库中的相对路径同步文件，并不要求本地和服务器使用相同的绝对路径。

Nginx 静态文件服务

Nginx 可以读取指定目录中的 HTML、CSS、JavaScript 和图片，并通过 HTTP 或 HTTPS 返回给浏览器。

Nginx 并不局限于监听 80 端口。它可以监听任意未被其他程序占用，并且被操作系统和防火墙允许访问的端口。Web 服务通常使用以下两个标准端口：

1
2
80     HTTP 默认端口
443    HTTPS 默认端口

一份简化的 HTTP 网站配置如下：

1
2
3
4
5
6
7
server {
    listen 80;
    server_name example.com;

    root /home/ubuntu/zero-to-tech;
    index index.html;
}

其中：

  • listen 指定 Nginx 监听的端口。
  • server_name 指定该配置处理的域名。
  • root 指定网站文件所在目录。
  • index 指定访问目录时默认返回的文件。

Nginx 也可以监听 443 端口并提供 HTTPS 服务，但需要配置 TLS 证书和私钥：

1
2
3
4
5
6
7
8
9
10
server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /path/to/fullchain.pem;
    ssl_certificate_key /path/to/privkey.pem;

    root /home/ubuntu/zero-to-tech;
    index index.html;
}

生产环境通常同时配置 80 和 443，并将 HTTP 请求重定向到 HTTPS：

1
2
3
4
5
6
server {
    listen 80;
    server_name example.com;

    return 301 https://$host$request_uri;
}

完整过程为：

1
2
3
4
5
6
7
8
9
访问 http://example.com
        ↓
Nginx 在 80 端口接收请求
        ↓
重定向到 https://example.com
        ↓
Nginx 在 443 端口建立 TLS 连接
        ↓
返回网站内容

80 和 443 只是 Web 服务的默认端口约定。HTTPS 的安全性来自 TLS 加密，而不是 443 这个端口号本身。

Nginx 配置管理

Ubuntu 中常见的 Nginx 站点配置目录包括：

1
2
/etc/nginx/sites-available/
/etc/nginx/sites-enabled/

它们的职责分别是：

1
2
sites-available    保存所有网站配置
sites-enabled      保存当前启用配置的软链接

通常先在 sites-available 中创建配置，再通过软链接将它启用：

1
2
3
sudo ln -s \
  /etc/nginx/sites-available/zero-to-tech \
  /etc/nginx/sites-enabled/zero-to-tech

修改配置后，应先检查语法，再重新加载 Nginx：

1
2
sudo nginx -t
sudo systemctl reload nginx

nginx -t 用于发现配置语法错误；reload 会在不中断现有连接的情况下加载新配置。

文件访问权限

Nginx 工作进程通常以 www-data 用户运行。即使 root 配置正确，如果该用户无法进入上级目录或读取网站文件，访问仍可能返回 403 或 404。

例如，网站位于：

1
/home/ubuntu/zero-to-tech/index.html

Nginx 不仅需要读取 index.html，还需要拥有沿途目录的进入权限：

1
2
3
/home
/home/ubuntu
/home/ubuntu/zero-to-tech

可以通过下面的命令查看目录权限：

1
ls -ld /home/ubuntu

下面的命令可以为其他用户增加目录的进入权限：

1
sudo chmod o+x /home/ubuntu

这里的 x 对目录表示可以进入或穿过，并不等于允许查看或修改目录中的全部文件。实际部署时，也可以将网站放到 /var/www/ 等专门的 Web 目录中，以获得更清晰的权限边界。

代码更新流程

首次部署完成后，后续更新可以归纳为两个阶段。

在本地提交并推送代码：

1
2
3
git add .
git commit -m "update page"
git push

登录服务器并拉取新版本：

1
2
cd ~/zero-to-tech
git pull

对于纯静态网站，Nginx 每次请求都会从网站目录读取文件，因此更新 HTML、CSS 或 JavaScript 后通常不需要重启 Nginx，刷新浏览器即可看到最新版本。

完整流程为：

1
2
3
4
5
6
7
8
9
修改本地代码
      ↓
提交并推送至 GitHub
      ↓
服务器拉取最新代码
      ↓
Nginx 读取更新后的静态文件
      ↓
刷新浏览器

只有修改 Nginx 配置时，才需要执行配置检查和重新加载。

常见问题

  • 显示 Nginx 默认欢迎页：当前生效的仍是默认站点配置，或自定义配置尚未启用。
  • 返回 404 Not Found：检查 root、文件路径和 index.html 是否存在。
  • 返回 403 Forbidden：检查 Nginx 用户是否有权进入目录并读取文件。
  • 页面有内容但没有样式：检查 HTML 中 CSS 的相对路径和文件名。
  • 修改代码后网页未更新：确认代码已经推送、服务器已经拉取，并清除浏览器缓存后重试。
  • 修改配置后没有生效：先执行 sudo nginx -t，再执行 sudo systemctl reload nginx。

参考资料