最简单方式是用官方nginx镜像挂载HTML目录：docker run -d -p 8080:80 -v $(pwd)/my-site:/usr/share/nginx/html:ro --name my-static-site nginx；需注意路径、权限、配置中root/try_files及跨平台差异。
用 nginx 镜像跑 HTML 站点最简单
直接拿官方 nginx 镜像，把 HTML 文件塞进去就能跑，不用装环境、不碰配置文件也能起步。它默认监听 80 端口，静态资源路径是 /usr/share/nginx/html。
实操建议：
- 把你的
index.html和配套的css、js、images放进一个本地文件夹（比如./my-site） - 运行命令：
docker run -d -p 8080:80 -v $(pwd)/my-site:/usr/share/nginx/html:ro --name my-static-site nginx - 浏览器打开
http://localhost:8080就能看到页面 -
:ro是只读挂载，避免容器意外改写你本地文件
自定义 nginx 配置时别漏掉 root 指令
如果你要改端口、加重定向、支持 history 模式（比如 Vue Router），就得写自己的 nginx.conf。最容易出问题的是：忘记在 location / 块里写 root 或 alias，结果返回 403 或 404。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 浏览器显示
403 Forbidden—— 权限或路径不对 - 显示
404 Not Found——root路径没对上容器内文件位置 - 刷新子路由白屏（如
/about）—— 缺少try_files $uri $uri/ /index.html;
正确做法示例（保存为 nginx.conf）：
events { worker_connections 1024; }
http {
server {
listen 80;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
}
}
然后启动时挂载配置：docker run -d -p 8080:80 -v $(pwd)/my-site:/usr/share/nginx/html:ro -v $(pwd)/nginx.conf:/etc/nginx/nginx.conf:ro nginx
Dockerfile 构建镜像适合 CI/CD 场景
本地测试用 run + -v 很快，但上线部署或集成进流水线时，应该打包成镜像。这样环境一致、可复现、还能打标签管理版本。
关键点：
- Dockerfile 里用
COPY把 HTML 文件复制进镜像，别依赖挂载（挂载在生产环境不可靠） - 基础镜像选
nginx:alpine更小（约 5MB），但注意某些调试工具缺失 - 别在镜像里留
dev-server类工具（如live-server），它们不是为生产设计的
最小可用 Dockerfile：
FROM nginx:alpine COPY ./my-site/ /usr/share/nginx/html/ COPY ./nginx.conf /etc/nginx/nginx.conf
构建并运行：docker build -t my-static-site . && docker run -d -p 8080:80 --name site my-static-site
Windows/macOS 用户注意路径分隔符和权限
在 Windows 上用 WSL2 或 Docker Desktop，挂载本地目录时路径写法容易错；macOS 则要注意文件系统权限导致 nginx 无法读取。
典型问题：
- Windows 用户写
-v C:\my-site:/usr/share/nginx/html→ 报错，得用/c/my-site（WSL2）或确保该路径在 Docker Desktop 的 File Sharing 设置里已勾选 - macOS 上用
chmod -R a+r确保所有 HTML 文件可读，否则 nginx 工作进程可能因权限拒绝服务 - Mac 上若用 Apple Silicon 芯片，确认拉取的是
arm64镜像（nginx:alpine默认支持，但自建基础镜像时可能踩坑）
实在不确定，就走 Dockerfile 构建路线——绕开宿主机路径解析，也省去权限纠结。
真正麻烦的从来不是“能不能跑起来”，而是“换台机器、换个环境、换个部署方式后，为什么又不认路径了”。多看一眼日志：docker logs my-static-site，里面往往直接告诉你 open() "/usr/share/nginx/html/xxx" failed (13: Permission denied) 这种线索。
