---
title: "07-静态网页怎么跑"
created: 2025-12-31
tags:
  - 项目筑基
---
# 静态网页怎么跑

我怎么在这个服务器上跑静态网页呢？原本都是使用宝塔部署的 现在也没有nginx

在全 Docker 化的 NAT VPS 环境下，部署静态网页（如 HTML/CSS/JS, Hexo, VitePress, Hugo）其实比宝塔更简单、更干净。

不需要在 VPS 上安装 Nginx 软件，而是直接**起一个 Nginx 的 Docker 容器**来跑你的网页。

## 1. 核心理念转变

- **传统方式 (宝塔)**：安装面板 -> 创建网站条目 -> 申请 SSL -> 配置反代（繁琐，环境不纯净）。
- **Docker 方式**：无需在 VPS 安装 Nginx 软件，直接启动一个 Nginx **容器**。
- **优势**：环境隔离、迁移只需打包数据目录、配置简单、资源占用低。
- **角色分工**：
  - **Cloudflare Tunnel**：负责对外的大门（域名解析、SSL 证书、端口转发）。
  - **Docker Nginx**：负责内部的文件分发。

---

## 2. 方案演进路线

### 方案一：单容器单站点 (基础版)

- **原理**：一个网站开一个 Nginx 容器。
- **适用场景**：只有一个网站，或者不想折腾配置文件。
- **缺点**：如果网站多，端口管理混乱，内存浪费。
- **关键配置**：

  ```
  volumes:
    - /opt/docker_data/my-website/html:/usr/share/nginx/html
  ```

### 方案二：2AM Web Server (极简版)

- **特点**：极度轻量，专为静态网页设计。
- **状态**：[⚠️警告] 镜像较为冷门，国内网络环境下可能无法拉取或加速失败。
- **建议**：作为备选，如果 Nginx 能用，优先用 Nginx（生态更稳）。

### 方案三：Nginx Proxy Manager (NPM)

- **定位**：图形化的反向代理管理器。
- **结论**：**当前架构下不需要**。
- **理由**：Cloudflare Tunnel 已经承担了“反向代理 + SSL”的角色。除非你有特殊内网需求，否则部署 NPM 是功能重叠。

---

## 3. 🏆 最佳实践：Nginx 虚拟主机 (Virtual Host)

**痛点解决**：拒绝为每个网站开一个容器。 **目标**：**1 个 Nginx 容器 + 1 个端口**，同时托管多个网站 (Love页, 简历页等)。

### 第一步：规划目录结构

在宿主机 `/opt/docker_data/nginx_pro/` 下建立结构：

```
/opt/docker_data/nginx_pro/
├── conf/
│   └── default.conf      <-- 核心配置文件
└── html/                 <-- 网页总仓库
    ├── love/             <-- 站点1：Love主页 (index.html)
    └── resume/           <-- 站点2：简历页 (index.html)
```

### 第二步：编写 Nginx 配置 (`default.conf`)

利用 `server_name` 区分流量去向。

```
# 站点 1：Love (love.hxnppll.top)
server {
    listen 80;
    server_name love.hxnppll.top;

    location / {
        # 注意：这里的路径是容器内的路径，对应挂载关系
        root /usr/share/nginx/html/love;
        index index.html index.htm;
    }
}

# 站点 2：Resume (resume.hxnppll.top)
server {
    listen 80;
    server_name resume.hxnppll.top;

    location / {
        root /usr/share/nginx/html/resume;
        index index.html index.htm;
    }
}

# 默认兜底 (防止未匹配域名访问)
server {
    listen 80 default_server;
    server_name _;
    return 404;
}
```

第三步：Dockge 部署容器

```yaml
version: '3.8'
services:
  nginx-pro:
    image: nginx:alpine
    container_name: nginx-pro
    restart: always
    ports:
      - 8037:80  # 宿主机 8037 <-> 容器 80
    volumes:
      # 挂载网页总目录
      - /opt/docker_data/nginx_pro/html:/usr/share/nginx/html
      # 挂载配置文件
      - /opt/docker_data/nginx_pro/conf/default.conf:/etc/nginx/conf.d/default.conf
```

### 第四步：Cloudflare Tunnel 配置 (见证奇迹)

将所有子域名都指向**同一个**本地端口，让 Nginx 自己去分拣。

| **Service / Rule** | **Subdomain** | **Service URL** | **逻辑说明** |
| --- | --- | --- | --- |
| **Rule 1** | `love` | `http://nginx-pro:80` 或 `localhost:8037` | 流量进 Nginx，Nginx 看到 `love` 头，指派到 `/html/love` |
| **Rule 2** | `resume` | `http://nginx-pro:80` 或 `localhost:8037` | 流量进 Nginx，Nginx 看到 `resume` 头，指派到 `/html/resume` |

**提示**：如果在 Dockge 内部网络互通，Service URL 可以直接写容器名 `http://nginx-pro:80`，比写 `localhost:8037` 更稳（不受宿主机防火墙影响）。

## 4. 新旧工作流对比

| **步骤** | **旧方式 (宝塔)** | **新方式 (Docker + Dockge)** |
| --- | --- | --- |
| **部署环境** | 安装面板，安装 Nginx 插件 (慢) | `docker-compose up` 一键拉起 (秒级) |
| **上传网页** | 宝塔文件管理 / FTP | FileBrowser 网页端直接拖拽 |
| **新增网站** | 宝塔点“添加网站” -> 设置域名 | 1. 文件夹里新建个子目录放 HTML    2. 修改 `default.conf` 加一段 server    3. 重启 Nginx 容器 |
| **配置 HTTPS** | 申请证书、续签、部署 | **完全不用管** (Cloudflare 自动全包) |
| **服务器迁移** | 备份数据库、备份配置、重装环境 | 复制 `/opt/docker_data` 文件夹到新机，完事 |

## 5. 常用维护命令

- **修改了 HTML 文件**：无需重启，刷新浏览器即刻生效。
- **修改了** `default.conf`：需要重载 Nginx 配置。
  - 方法 A (Dockge)：点击 Restart。
  - 方法 B (命令行)：`docker exec -it nginx-pro nginx -s reload` (无感刷新)。

---
⬅️ [[06-完全体|完全体]] 🏠 [[00-网络与项目|00-网络与项目]] ➡️ [[08-全自动备份方案|全自动备份方案]]