实战：使用 Docker 部署 Nginx 静态网站

作者

学习 Docker 最好的方式就是亲手部署一个项目。

相比 WordPress，静态网站没有数据库依赖，结构更加简单，非常适合 Docker 初学者练习。

在这一节，我们将使用 Docker 快速部署一个 Nginx 静态网站，并了解如何将本地网页映射到容器中。

为什么选择 Nginx？

Nginx 是目前最流行的 Web 服务器之一，具有以下优点：

  • 轻量级，占用资源低
  • 性能优秀，能够处理大量并发请求
  • 配置简单，学习成本低
  • 支持静态资源、反向代理、负载均衡等功能

无论是个人博客、企业官网，还是 Vue、React、Next.js 打包后的前端项目，都可以通过 Nginx 进行部署。

Docker 官方也提供了长期维护的 Nginx 镜像，非常适合学习和生产环境使用。

第一步：准备网站目录

首先创建一个项目目录：

mkdir nginx-demo
cd nginx-demo

创建网站文件目录：

mkdir html

目录结构如下：

nginx-demo/
├── html/
└── docker-compose.yml

接下来，在 html 目录中新建一个 index.html 文件。

例如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Docker Nginx Demo</title>
</head>
<body>

<h1>Docker 部署成功！</h1>

<p>如果你看到这个页面，说明 Nginx 已经正常运行。</p>

</body>
</html>

当然，你也可以将自己的博客首页、个人主页或前端项目打包后的文件放入 html 目录。

第二步：创建 docker-compose.yml

在项目根目录创建：

docker-compose.yml

内容如下：

services:

  nginx:
    image: nginx:latest

    container_name: nginx-demo

    restart: unless-stopped

    ports:
      - "80:80"

    volumes:
      - ./html:/usr/share/nginx/html:ro

    networks:
      - nginx-network

networks:
  nginx-network:

整个配置非常简单，但已经包含了生产环境常见的几个配置项。

配置说明

image

image: nginx:latest

指定使用 Docker Hub 官方最新版本的 Nginx 镜像。

ports

ports:
  - "80:80"

表示：

服务器：

80

对应容器：

80

浏览器访问：

http://服务器IP

即可打开网站。

如果本机已经占用了 80 端口，可以修改为：

ports:
  - "8080:80"

然后访问：

http://localhost:8080

volumes

这一项非常重要。

volumes:
  - ./html:/usr/share/nginx/html:ro

表示：

把本地：

html

目录映射到容器：

/usr/share/nginx/html

这样：

修改本地 HTML 文件后，容器会立即读取新的内容，无需重新构建镜像。

后面的：

:ro

表示：

Read Only（只读）

容器只能读取文件，不能修改本地内容。

生产环境建议开启。

restart

restart: unless-stopped

作用：

服务器重启以后：

Docker 会自动恢复运行。

不用每次手动启动。

第三步：启动容器

执行：

docker compose up -d

第一次运行时：

Docker 会自动下载官方 Nginx 镜像。

下载完成以后：

查看容器：

docker ps

如果看到：

nginx-demo

状态：

Up

说明运行成功。

第四步：访问网站

浏览器访问：

如果本机：

http://localhost

或者：

http://localhost:8080

如果部署到 VPS：

http://你的服务器IP

即可看到刚才创建的页面。

如果修改：

html/index.html

刷新浏览器即可看到最新内容。

整个过程不需要重新启动容器。

部署 Vue、React 项目

很多前端项目最终都会生成：

dist/

或者：

build/

目录。

例如：

Vue：

npm run build

React：

npm run build

然后：

把：

dist

里面所有文件复制到：

html

目录。

重新刷新浏览器。

你的整个前端项目就已经部署完成。

因此：

Docker + Nginx

也是目前部署：

  • Vue
  • React
  • Angular
  • Vite
  • Next.js（静态导出）

最常见的方法。

查看容器日志

如果网站打不开。

第一步建议查看日志。

执行：

docker logs nginx-demo

或者：

docker compose logs -f

可以看到：

  • 启动日志
  • 错误日志
  • 请求日志

这是排查问题最常用的方法。

进入容器

如果需要查看容器内部文件。

执行：

docker exec -it nginx-demo bash

有些轻量版镜像没有安装 Bash。

可以改成：

docker exec -it nginx-demo sh

进入后：

查看网站目录：

cd /usr/share/nginx/html

ls

确认文件是否已经成功挂载。

实际项目建议

如果准备正式部署网站，建议进一步优化：

  • 不要直接使用 latest 标签，而是固定镜像版本，例如 nginx:1.28-alpine，避免镜像更新导致兼容性问题。
  • 网站前面增加 Nginx 反向代理或 CDN（如 Cloudflare），提高访问速度并增强安全性。
  • 配置 HTTPS（推荐 Let’s Encrypt 免费证书）。
  • 将静态资源启用 Gzip 或 Brotli 压缩，减少传输体积。
  • 为图片、CSS、JavaScript 设置合理的缓存策略，提高页面加载速度。
  • 定期更新 Nginx 镜像，并做好网站文件和配置备份。

小结

通过这个示例，你已经学会了 Docker 部署静态网站最核心的几个知识点：

  • 使用官方 Nginx 镜像
  • 编写 docker-compose.yml
  • 映射端口
  • 挂载本地目录（Volume）
  • 查看容器日志
  • 进入容器排查问题

掌握这些内容后，你已经能够部署绝大多数静态网站和前端项目。后续再结合 Dockerfile、反向代理和 HTTPS 配置，就可以搭建一个更加完整、稳定的生产环境。

发表评论