“基于 Docker + Nginx 搭建静态网站，并实现网站内容更新” 的流程
搭建流程
一、前期准备：理解核心工具与优势
在开始实操前，先简单梳理下我们用到的核心工具及这套方案的优势：
-
Docker：解决 “环境不一致” 问题，将 Nginx 及网站资源打包成容器，确保在不同机器上运行效果一致，避免因依赖差异导致的部署故障。
-
Nginx：轻量级高性能，能高效处理静态资源（HTML、CSS、JS、图片等），同时支持灵活的配置（如端口映射、路径转发）。
-
Docker Compose：简化多容器管理，这里虽仅用到 Nginx 一个服务，但通过 Compose 配置文件，能更清晰地定义服务参数，后续扩展服务也更方便。 这套方案的核心优势在于：部署快、环境统一、更新便捷，即使是新手也能快速上手。
在当下的开发与部署场景中，静态网站因其轻量、加载速度快、维护成本低的特点，被广泛应用于个人博客、企业官网展示等场景。而 Docker 的容器化技术，能让环境配置更统一、部署更便捷；Nginx 作为高性能的 Web 服务器，更是静态资源托管的优选。今天，我们就来详细聊聊如何通过 Docker + Nginx 快速搭建静态网站，并轻松实现网站内容的更新。
二、实操步骤：从环境搭建到网站运行
1. 安装 Docker 与 Docker Compose
要使用 Docker，首先需要在服务器（或本地机器）上安装 Docker 和 Docker Compose。这里以 Ubuntu 系统为例（其他 Linux 系统步骤类似，Windows/macOS 可通过 Docker Desktop 安装）：
apt update # 先更新系统包列表，确保安装源更新。
apt install docker.io -y # 安装 Docker 核心组件
apt install docker-compose -y # 安装 Docker Compose（用于管理容器服务）
验证安装是否成功，查看版本号即可
docker --version # 输出类似 Docker version
24.0.7, build 24.0.7-0ubuntu4
docker-compose --version # 输出类似 docker-compose version
1.29.2, build unknown
若能正常显示版本，说明环境已准备就绪。
2.创建项目目录，规范文件结构
为了方便管理配置文件、网站资源和 Docker 相关文件，我们先创建一个统一的项目目录。这里以 /workspace/nginx-website 为例（路径可根据自身需求修改）：
mkdir -p /workspace/nginx-website # 创建目录
cd /workspace/nginx-website # 切换目录
后续所有文件（Nginx 配置、HTML 首页、Dockerfile 等）都会放在这个目录下，结构更清晰，也便于后续维护。
3.配置 Nginx，定义服务规则
Nginx 需要通过配置文件指定 “监听哪个端口”“网站资源放在哪里” 等规则。我们在项目目录下创建 nginx.conf 文件，内容如下：
server {
listen 80; # Nginx 在容器内监听80端口
server_name localhost; # 服务名，本地测试用localhost即可，部署的话可以写公网ip地址或者域名
}
# 定义请求处理规则：所有根路径（/）的请求，都指向 /usr/share/nginx/html 目录
location / {
root /usr/share/nginx/html; # 网站静态资源在容器内的路径
index index.html; # 默认首页文件为 index.html
}
4.创建网站首页，编写初始内容
接下来，我们创建静态网站的核心 —— 首页 index.html。在项目目录下新建该文件，写入简单的测试内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 避免中文乱码 -->
<title>我的第一个 Docker + Nginx 网站</title>
<style>
/* 简单美化下页面 */
body {
text-align: center;
margin-top: 100px;
font-family: Arial, sans-serif;
}
h1 {
color: #2c3e50;
}
</style>
</head>
<body>
<h1>Welcome to My First Static Website!</h1>
<p>Powered by Docker + Nginx</p>
</body>
</html>
这里加入了简单的 CSS 样式，让页面更美观，你也可以根据需求添加图片、链接等内容。
5.编写 Dockerfile，打包 Nginx 与网站资源
Dockerfile 的作用是 “定义如何构建 Docker 镜像”—— 我们需要基于官方 Nginx 镜像，将本地的配置文件和 HTML 资源复制到镜像中。在项目目录下创建 Dockerfile：
FROM nginx:alpine # 基于官方 Nginx 轻量镜像（alpine 版本体积更小，适合静态网站）
COPY nginx.conf /etc/nginx/conf.d/default.conf # 将本地的 nginx.conf 复制到容器内的 Nginx 配置目录（覆盖默认配置）
COPY index.html /usr/share/nginx/html/index.html # 将本地的 index.html 复制到容器内的 Nginx 静态资源目录
这几步操作很关键：通过 COPY 命令，我们把本地的配置和资源 “注入” 到 Nginx 镜像中，确保容器启动后能加载到我们的网站。
6.编写 Docker Compose 文件，管理服务
Docker Compose 用 YAML 文件定义服务参数，比如 “镜像如何构建”“端口如何映射”“是否自动重启” 等。在项目目录下创建 docker-compose.yml：
version: '3.8' # Compose 配置文件版本
services:
web: # 服务名（可自定义，如 nginx-service）
build: . # 表示基于当前目录的 Dockerfile 构建镜像
ports:
- "8080:80" # 端口映射：本地 8080 端口 -> 容器内 80 端口（本地端口可修改）
restart: always # 容器异常退出时，自动重启（确保服务稳定性）
7. 启动容器，访问网站
一切配置就绪后，我们启动容器并验证效果：
cd /workspace/nginx-website && docker-compose up -d # 进入项目目录，执行命令构建并启动容器（-d 表示后台运行）：
这里要切换到项目文件夹下，由于我们web未定义，所以docker-compose就可以了，如果定义了web，启动容器就要变成了 docker-compose up <web名> -d，若输出中包含 nginx-website_web_1（服务名对应的容器），且 STATUS 为 Up，说明容器启动成功。访问网站：本地测试：打开浏览器，输入 http://localhost:8080（端口与 Compose 配置一致）。服务器测试：若在云服务器上部署，需开放对应端口（如 8080），然后通过 http://服务器IP:8080 访问。此时，浏览器会显示我们之前编写的首页内容，证明网站已成功运行！
三、修改 HTML 并更新网站
网站搭建好后，后续难免需要更新内容（如修改文字、替换图片）。通过 Docker 实现更新非常简单，只需两步：
- 修改 HTML 文件
- 重新构建并启动容器
由于 Docker 镜像一旦构建，内容就固定了，所以修改文件后，需要重新构建镜像并重启容器：
cd /workspace/nginx-website && docker-compose up -d --build
--build 参数表示 “先重新构建镜像，再启动容器”，确保新的内容被打包到镜像中。
- 验证更新效果
刷新浏览器页面，就能看到更新后的内容啦！整个更新过程无需停止 Nginx服务，也不会影响其他配置，非常高效。
通过 Docker + Nginx 搭建静态网站，不仅解决了环境一致性问题，还让部署和更新变得异常简单。整个流程从安装环境到网站运行，只需不到 10 步；后续更新内容，也只需修改文件并重新构建容器。对于个人博客、企业展示页等静态场景，这无疑是最优方案之一。
如果你在实操过程中遇到问题，或者有其他扩展需求，欢迎在评论区留言，我们一起交流解决！
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
22
0- 0
已为社区贡献3条内容
所有评论(0)