静态网页怎么跑
我怎么在这个服务器上跑静态网页呢？原本都是使用宝塔部署的 现在也没有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 部署容器
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(无感刷新)。
💬 评论