大家好，我是Goya!

今天是Docker部署系列的第三篇文章：用Docker部署Nginx。

Nginx是用途最广的Web服务器，主要有三个场景：

  • 📄 静态文件服务器：部署前端Vue/React打包后的页面

  • 🔀 反向代理：把请求转发给后端的Node.js/Java服务

  • 🔒 配置HTTPS：给网站加个小锁

本篇要点：

  • ✅ 一分钟启动Nginx容器

  • ✅ 配置静态文件服务

  • ✅ 设置反向代理转发API请求

  • ✅ 配置文件挂载和热加载

  • ✅ 日志查看和管理

  • ✅ 解决端口冲突问题

一、准备工作

1.1 检查Docker环境

docker --version

1.2 拉取Nginx镜像

docker pull nginx:latest

查看镜像：

docker images | grep nginx

二、创建挂载目录

我们需要三个目录来存放Nginx的配置和文件：

# 创建nginx相关目录
mkdir -p ~/docker/nginx/{html,conf.d,logs}

目录说明：

  • html：存放静态网页文件（index.html等）

  • conf.d：存放站点配置文件（default.conf）

  • logs：存放访问日志和错误日志

三、准备测试页面

创建一个漂亮的测试页面，用来验证静态文件服务：

cat > ~/docker/nginx/html/index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <title>Docker Nginx 部署成功</title>
    <meta charset="utf-8">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 100px;
        }
        h1 { font-size: 48px; margin-bottom: 20px; }
        p { font-size: 18px; opacity: 0.9; }
        .info {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
            padding: 20px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <h1>🎉 Nginx Docker 部署成功！</h1>
    <p>这是通过Docker运行的Nginx静态页面</p>
    <div class="info">
        <p>服务器时间：<span id="time"></span></p>
        <p>容器内路径：/usr/share/nginx/html</p>
        <p>宿主机路径：~/docker/nginx/html</p>
    </div>
    <script>
        document.getElementById('time').innerText = new Date().toLocaleString('zh-CN');
    </script>
</body>
</html>
EOF

四、配置Nginx
创建站点配置文件，同时配置静态文件服务和反向代理：

vim ~/docker/nginx/conf.d/default.conf

粘贴以下内容：

server {
    listen 80;
    server_name localhost;
    charset utf-8;

    # 访问日志
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    # 静态文件服务
    location / {
        root /usr/share/nginx/html;
        index index.html;
        # 支持history路由模式（单页应用）
        try_files $uri $uri/ /index.html;
    }

    # 反向代理：将/api/开头的请求转发到后端服务
    location /api/ {
        # 172.17.0.1 是Docker默认网关，容器通过它访问宿主机
        proxy_pass http://172.17.0.1:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 静态资源缓存设置
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        root /usr/share/nginx/html;
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    # 错误页面
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

配置说明：

  • location /：静态文件服务，指向html目录

  • location /api/：反向代理，把/api/开头的请求转发给本地3000端口

  • try_files：支持Vue/React的history路由模式

  • expires 30d：静态资源缓存30天

五、运行Nginx容器

5.1 关于端口选择的说明

常见问题：如果80端口被占用怎么办？

可以用 netstat -tlnp | grep 80 查看谁占了80端口。本文为了兼容性，我们使用8081端口演示，如果你服务器80端口空闲，可以直接用80端口。

5.2 启动Nginx容器

docker run -d \
  --name nginx \
  -p 8081:80 \
  -v ~/docker/nginx/html:/usr/share/nginx/html \
  -v ~/docker/nginx/conf.d:/etc/nginx/conf.d \
  -v ~/docker/nginx/logs:/var/log/nginx \
  --restart=always \
  nginx:latest

命令解释：

参数说明
-p 8081:80宿主机8081端口映射到容器80端口
-v ~/docker/nginx/html:/usr/share/nginx/html挂载静态文件目录
-v ~/docker/nginx/conf.d:/etc/nginx/conf.d挂载站点配置目录
-v ~/docker/nginx/logs:/var/log/nginx挂载日志目录
--restart=always容器异常退出自动重启

5.3 验证容器运行

docker ps | grep nginx

应该能看到nginx容器，状态是Up。

六、验证静态文件服务

6.1 本地测试

curl localhost:8081

应该能看到HTML页面的内容。

6.2 浏览器访问

打开浏览器，访问：

http://你的服务器IP:8081

应该能看到漂亮的紫色渐变页面！

6.3 测试其他静态文件

# 创建几个测试文件
echo "<h1>页面1</h1>" > ~/docker/nginx/html/page1.html
echo "<h1>页面2</h1>" > ~/docker/nginx/html/page2.html

访问测试：

  • http://你的IP:8081/page1.html

  • http://你的IP:8081/page2.html

七、测试反向代理功能

7.1 启动测试后端服务

我们需要一个后端服务来测试反向代理。这里用Python启动一个简单的HTTP服务：

docker run -d \
  --name test-api \
  -p 3000:3000 \
  python:3-alpine \
  python -m http.server 3000

7.2 验证后端服务

curl localhost:3000

应该能看到目录列表的HTML输出。

7.3 通过Nginx访问后端

# 通过Nginx反向代理访问后端
curl localhost:8081/api/

应该看到和直接访问后端一样的结果，说明反向代理成功！

八、日志查看与管理

8.1 查看容器日志

# 查看Nginx容器日志
docker logs nginx

# 实时查看日志
docker logs -f nginx

8.2 查看挂载的日志文件

# 查看访问日志
tail -f ~/docker/nginx/logs/access.log

# 查看错误日志
tail -f ~/docker/nginx/logs/error.log

8.3 生成一些访问日志

新开一个终端执行：

# 访问几次产生日志
curl localhost:8081/
curl localhost:8081/page1.html
curl localhost:8081/api/

然后在日志终端就能看到记录。

九、配置热加载（修改配置不用重启容器）

9.1 修改配置

vim ~/docker/nginx/conf.d/default.conf

比如添加一个自定义响应头，在location /中添加：

nginx
add_header X-Server "Docker-Nginx";

9.2 测试配置文件语法

docker exec -it nginx nginx -t

看到syntax is ok说明配置正确。

9.3 热加载配置

docker exec -it nginx nginx -s reload

9.4 验证新配置生效

curl -I localhost:8081

应该能看到X-Server: Docker-Nginx这个响应头。

十、部署前端项目实战

如果你有打包好的前端项目（Vue/React），部署非常简单：

# 1. 本地打包
npm run build

# 2. 将dist目录上传到服务器
scp -r dist/* root@你的服务器IP:~/docker/nginx/html/

# 3. 重新加载Nginx（可选，Nginx会自动加载新文件）
docker exec -it nginx nginx -s reload

搞定！你的前端项目就部署上线了。

十一、常用命令速查

# 停止容器
docker stop nginx

# 启动容器
docker start nginx

# 重启容器
docker restart nginx

# 查看实时日志
docker logs -f nginx

# 进入容器
docker exec -it nginx bash

# 测试配置文件
docker exec -it nginx nginx -t

# 重新加载配置（不停机）
docker exec -it nginx nginx -s reload

# 删除容器（数据还在）
docker rm -f nginx

十二、常见问题排查

Q1：端口被占用怎么办？

# 查看谁占了端口
netstat -tlnp | grep 80

# 改用其他端口（比如8081）
# 修改 -p 8081:80 即可

Q2：修改配置后不生效？

# 测试配置文件语法
docker exec -it nginx nginx -t

# 重新加载配置（不用重启容器）
docker exec -it nginx nginx -s reload

Q3：403 Forbidden错误？

# 查看html目录权限
ls -la ~/docker/nginx/html

# 确保文件可读
chmod -R 755 ~/docker/nginx/html

Q4：反向代理报错"connection refused"
检查后端服务是否在运行：

# 查看后端容器
docker ps | grep test-api

# 测试直接访问后端
curl localhost:3000

Q5：访问日志看不到？

# 检查日志文件是否存在
ls -la ~/docker/nginx/logs/

# 手动创建（如果不存在）
touch ~/docker/nginx/logs/access.log
touch ~/docker/nginx/logs/error.log

十三、总结

通过本文，我们在服务器上成功实现了：
Nginx是Web服务的入口，掌握了它，你就可以：
以下为整理后的表格形式：

功能是否实现验证方法
Docker部署Nginx✔️docker ps 看到容器
静态文件服务✔️浏览器访问首页
配置文件挂载✔️修改配置后生效
反向代理✔️通过/api/访问后端
日志挂载✔️tail -f logs/access.log
配置热加载✔️修改配置不重启
  • 部署前端项目
  • 配置多个站点
  • 做负载均衡
  • 配置HTTPS证书
    如果本文对你有帮助，欢迎点赞、收藏、评论！
# docker # nginx # 服务器
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区