折腾服务器，从“在宿主机上乱装一气”到“全面拥抱容器化” 。如何使用 Docker 和 Nginx，将纯前端项目托管到云服务器上，并实现公网访问 。
💡 核心原理解析：为什么我们需要 Nginx？#
在本地电脑上，我们双击写好的 index.html 就能在浏览器里看到网页。此时浏览器的地址栏是 file:/// 开头的，这只是浏览器在充当本地文件读取器。
但如果要把网页放到远端服务器上让全世界访问，别人是无法直接“读取”你服务器硬盘的。这时候就需要引入 Web 服务器（如 Nginx）。
- Nginx 的角色：它就像一个 24 小时守在网络端口的接待员。
- 工作机制：当用户的浏览器通过
http://访问服务器公网 IP 时，Nginx 会接收请求，去指定的文件夹里找到网页文件，并打包发送给用户的浏览器进行渲染 。
🛠️ Docker 部署实战#
使用 Docker 部署服务，核心在于编写 docker-compose.yml 配置文件 。这能让我们的宿主机保持极其干净，日后迁移也只需几行命令 。
1. 准备挂载目录#
首先在服务器上创建一个目录，用于存放网页文件：
mkdir -p ~/nginx-web/html注意：不要用
mkdir index.html去创建文件！mkdir命令永远只会创建文件夹。如果你想要创建一个空的纯文本文件，请使用touch index.html或者用echo命令重定向写入。
2. 编写 Docker 配置文件#
在 ~/nginx-web 目录下创建 docker-compose.yml。
- 高延迟 SSH 避坑指南：如果你使用的是海外 VPS，SSH 连接延迟较高，直接用
nano编辑并粘贴 YAML 代码极易导致缩进错乱。建议使用 SSH 客户端自带的可视化文件管理器双击编辑，或者使用cat重定向无损写入：
cat > docker-compose.yml << 'EOF'
services:
nginx:
image: nginx:latest
container_name: nginx-web
ports:
- "80:80"
volumes:
- ./html:/usr/share/nginx/html
restart: always
EOF3. YAML 核心参数秒懂#
这段简短的代码包含了 Docker 容器化的两大精髓：
ports: - "80:80"（端口映射）：左边是宿主机对外开放的“大门”，右边是 Nginx 容器内部出厂默认死守的端口。这告诉 Docker 将外部敲击 80 端口的请求，精准送进容器内部的 80 端口。volumes: - ./html:/usr/share/nginx/html（数据卷挂载）：把宿主机上的./html真实文件夹，像插 U 盘一样，映射到了 Nginx 容器内部的默认网页读取路径/usr/share/nginx/html。这样不仅能让 Nginx 读到我们的代码，还能保证即便容器被删除，网页资产依然安全留在宿主机硬盘上。
4. 启动服务#
在终端执行以下命令，让它在后台默默运行：
docker compose up -d最后，打开本地浏览器，输入 http://你的公网IP，就能看到属于你的页面了！
💣 进阶避坑：Bash 终端的历史命令解析错误#
在用命令行快速生成测试网页时，你可能会写出这样的命令：
echo "<h1>Hello World!</h1>" > html/index.html如果你的文字里带有感叹号 ! 且使用了双引号 ""，Linux 终端会报错 event not found。
- 原因：在 Bash 中，
!代表历史命令扩展。 - 解法：养成好习惯，使用单引号
''包裹纯文本字符串，它会让终端把里面的内容当作纯文本对待，不做任何特殊解析。
