第一章
🌐 网页是怎么让别人访问的？
你在浏览器输入 http://8.137.22.50:50055，背后发生了什么？
🌍 浏览器
→
☁️ 服务器
8.137.22.50
→
🐳 Docker
→
🌊 Nginx
→
📄 HTML 文件
三个核心概念
| 概念 | 比喻 | 说明 |
|---|
| IP 地址 | 🏠 门牌号 | 服务器的网络地址，比如 8.137.22.50，别人通过它找到你的服务器 |
| 端口 | 🚪 房门号 | 一台服务器可以运行多个服务，用端口区分（如 50055、50056） |
| Web 服务器 | 📮 前台接待 | 接收浏览器请求，找到对应的 HTML 文件返回。Nginx 就是干这个的 |
💡
URL 拆解：
http://8.137.22.50:50055/
http:// — 协议（HTTP）｜ 8.137.22.50 — 服务器 IP ｜ :50055 — 端口号 ｜ / — 路径
第二章
🐳 为什么要用 Docker？
Docker 就是把你的应用连同环境一起打包成"集装箱"，到哪都能跑。
⚠️
如果没有 Docker： 要手动装 Nginx、配置环境、处理依赖冲突。搬家到新服务器时全部重来。
Docker 的优势
- 环境隔离 — 每个应用有自己的"小天地"，互不干扰
- 一键迁移 — 搬走目录，
docker compose up -d 就启动
- 轻量 — 一个 Nginx 容器只占 ~10MB
- 配置即代码 — 可以回滚、升级、版本管理
当前服务器的结构
/opt/webapps/
├── docker-compose.yml ← 容器编排
├── nginx/conf.d/
│ ├── token-calc.conf ← ⚡ 成本计算器 :50055
│ └── hub.conf ← 🌐 导航页 :50056
└── sites/
├── token-calc/ ← 站点文件
└── hub/
第三章
📦 部署一个静态页面的完整流程
- 创建站点目录
mkdir -p /opt/webapps/sites/你的站点名
- 上传文件
scp -r 本地文件夹 root@8.137.22.50:/opt/webapps/sites/你的站点名/
- 创建 Nginx 配置
server {
listen 50057;
root /usr/share/nginx/你的站点名;
index index.html;
location / { try_files $uri $uri/ /index.html; }
}
- 更新 docker-compose.yml
ports:
- "50057:50057"
volumes:
- ./sites/你的站点名:/usr/share/nginx/你的站点名:ro
- 重启容器
cd /opt/webapps && docker compose up -d
站点上线！🎉
- 访问验证
浏览器打开 http://8.137.22.50:50057
第四章
⚙️ 原理深入：一次 HTTP 请求的完整旅程
当别人访问 http://8.137.22.50:50055 时：
🌍 浏览器
→
📡 DNS
域名→IP
→
🛡️ 安全组
放行端口
→
🐳 Docker
端口转发
→
🌊 Nginx
匹配配置
→
📄 index.html
各组件作用
| 组件 | 位置 | 作用 |
|---|
| Docker | 系统服务 | 容器引擎，负责运行和管理容器 |
| Nginx | 容器内部 | Web 服务器，接收 HTTP 请求，返回静态文件 |
| 端口映射 | compose.yml | 把宿主机端口映射到容器内端口 |
| Volume 挂载 | compose.yml | 把宿主机目录"挂"进容器让 Nginx 读取 |
| 安全组 | 阿里云控制台 | 放行端口，让外网能访问 |
🔑
端口放行提醒： 阿里云 ECS 需要在安全组中放行端口。安全组规则 → 添加规则 → 放行 TCP 端口。
第五章
❓ 常见问题
Q：为什么别人访问不了？
- 检查阿里云安全组是否放行了端口
- 检查容器是否正常运行：
docker ps
- 检查 Nginx 配置：
docker exec web-static-hub nginx -t
- 检查文件权限：
chmod -R 755 sites/
Q：如何更新网页内容？
直接覆盖 /opt/webapps/sites/站点名/ 下的文件即可，不需要重启。
Q：如何备份和迁移？
把 /opt/webapps/ 整个目录打包带走，到新服务器 docker compose up -d 即可。
Q：可以绑定域名吗？
可以。DNS 解析指向服务器 IP，Nginx 配置加 server_name 你的域名; 即可。
🚀
总结： 静态网页部署 = HTML 文件 + Nginx（Web 服务器）+ Docker（容器化）+ 端口映射。一套组合拳，让全世界都能看到你的页面。