前言
通过学习前面的文章Docker 的安装和 Docker Compose 的安装于基本使用，相信你已经安装好了Docker和Docker Compose，如果没有安装，请根据本文章所需，安装Docker或者Docker Compose
一、Docker 安装和部署 Nginx
使用 Docker 方式安装和部署 nginx 首先要确保你已经安装了Docker，可根据该文章安装Docker
1.1 拉取镜像
使用以下命令拉取镜像，注意版本号需要根据实际情况填写
docker pull nginx:latest
1.2 获取 nginx 的配置文件
1.2.1 创建目录
conf目录存放配置文件，conf.d为nginx给出的的默认配置文件，html为存放html资源的目录，logs存放nginx 的日志文件，ssl目录存放ssl证书用于配置https
mkdir -p /data/nginx/{conf,conf.d,html,logs,ssl}
1.2.2 启动nginx
nginx的版本根据实际填写
docker run --name nginx -d -p 80:80 nginx:latest
1.2.3 拷贝相关的nginx文件
docker cp nginx:/etc/nginx/nginx.conf /data/nginx/conf/ #复制配置文件
docker cp nginx:/etc/nginx/conf.d /data/nginx
docker cp nginx:/usr/share/nginx/html /data/nginx #复制基本的html界面
1.2.4 关闭容器，移除容器
# 停止运行， 移除容器
docker stop nginx
docker rm nginx
1.3 运行
docker run --name nginx -p 80:80 -p 443:443 \
-v /data/nginx/html:/usr/share/nginx/html \
-v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf/ \
-v /data/nginx/conf.d:/etc/nginx/conf.d/ \
-v /data/nginx/logs:/var/log/nginx \
-v /data/nginx/ssl:/etc/nginx/ssl \
-d --restart=always nginx:latest
--name 指定容器的名字
-p 80:80 -p 443:443 配置端口映射：外部端口:容器端口
-v /data/nginx/html:/usr/share/nginx/html 宿主机路径:容器路径
--privileged=true 开启最高权限， 避免没有对应权限时报错
--restart=always 自启动
1.4 访问测试
访问：http://你的服务器ip，能过访问到以下页面说明已经安装成功，接下来通过修改配置文件，来显示你想展示的页面
二、Docker Compose 安装和部署 Nginx
该方式确保你已经安装了Docker Compose，可以根据该文章安装Docker Compose
该方式的前两步和一相同
2.1 拉取镜像
使用以下命令拉取镜像，注意版本号需要根据实际情况填写
docker pull nginx:latest
2.2 获取 nginx 的配置文件
2.2.1 创建目录
conf目录存放配置文件，conf.d为nginx给出的的默认配置文件，html为存放html资源的目录，logs存放nginx 的日志文件，ssl目录存放ssl证书用于配置https
mkdir -p /data/nginx/{conf,conf.d,html,logs,ssl,compose} # 此处多创建一个compose目录，用于存放docker compose文件
2.2.2 启动nginx
nginx的版本根据实际填写
docker run --name nginx -d -p 80:80 nginx:latest
2.2.3 拷贝相关的nginx文件
docker cp nginx:/etc/nginx/nginx.conf /data/nginx/conf/ #复制配置文件
docker cp nginx:/etc/nginx/conf.d /data/nginx
docker cp nginx:/usr/share/nginx/html /data/nginx #复制基本的html界面
2.2.4 关闭容器，移除容器
# 停止运行， 移除容器
docker stop nginx
docker rm nginx
2.3 编写Docker Compose 文件
cd /data/nginx/compose
vim docker-compose.yml # 或 vi docker-compose.yml
粘贴以下内容，保存退出
version: '3.8' # 使用 Docker Compose 3.8 版本语法
services:
nginx:
image: nginx:latest # 使用最新版 Nginx 镜像（可指定版本如 nginx:1.25）
container_name: nginx # 容器名称
restart: always # 总是自动重启
ports:
- "80:80" # HTTP 端口映射
- "443:443" # HTTPS 端口映射
volumes:
- /data/nginx/html:/usr/share/nginx/html # 静态文件目录
- /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf # 主配置文件（注意路径末尾无斜杠）
- /data/nginx/conf.d:/etc/nginx/conf.d # 子配置目录
- /data/nginx/logs:/var/log/nginx # 日志目录
- /data/nginx/ssl:/etc/nginx/ssl # SSL 证书目录
2.4 启动
首先先进入docker-compose.yml所在的目录下
cd /data/nginx/compose
启动容器
docker compose up -d #启动容器（后台运行）
查看启动日志
docker compose logs -f
查看容器状态
docker compose ps
2.5 访问
访问：http://你的服务器ip，能过访问到以下页面说明已经安装成功，接下来通过修改配置文件，来显示你想展示的页面
三、访问自定义页面
通过 Docker/Docker Compose 部署的 Nginx 已能展示默认页面，但实际项目中需自定义内容和配置。由于配置已挂载到宿主机目录（/data/nginx），直接修改本地文件即可生效。以下是完整操作流程：
3.1 创建自定义 HTML 页面
由于/data/nginx/html目录下已经存在了一个index.html文件，所以需要覆盖该文件或者在html目录下新建一个目录存放index.html，此处新建一个目录存放，目录名一般为项目名称
# 进入宿主机挂载的 HTML 目录
cd /data/nginx/html
mkdir blog
# 创建或替换默认页面（示例）
vim /data/nginx/html/blog/index.html
粘贴以下内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>个人介绍 - 张三</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Arial, sans-serif;
}
body {
background: #fff3e0; /* 暖色背景 */
color: #4e342e; /* 深棕色文字 */
line-height: 1.6;
padding: 2rem;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: #ffab91; /* 珊瑚色头背景 */
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.name {
font-size: 2.5rem;
color: #bf360c; /* 深橙色标题 */
margin-bottom: 0.5rem;
}
.position {
font-size: 1.2rem;
color: #d84315; /* 稍浅的橙色 */
}
.info-section {
background: #ffe0b2; /* 浅橙色背景 */
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.info-item {
margin-bottom: 0.5rem;
padding: 8px;
background: rgba(255, 255, 255, 0.3);
border-radius: 6px;
}
.info-label {
color: #bf360c; /* 与标题同色系 */
font-weight: 600;
}
.bio-section {
background: #ffccbc; /* 浅珊瑚色背景 */
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* 打字机效果 */
.typewriter-container {
position: relative;
min-height: 120px;
padding: 1rem;
}
.typewriter {
font-size: 1.1rem;
line-height: 1.6;
white-space: pre-wrap;
position: relative;
display: inline-block;
}
.typewriter::after {
content: ' ';
position: absolute;
right: -0.15em;
top: 0;
width: 2px;
height: 1.2em;
background-color: #bf360c; /* 深橙色光标 */
animation: blink-cursor 0.75s step-end infinite;
}
@keyframes blink-cursor {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* 新增联系按钮 */
.contact-buttons {
margin-top: 2rem;
display: flex;
gap: 1rem;
justify-content: center;
}
.btn {
padding: 10px 20px;
border-radius: 25px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
}
.btn-primary {
background: #bf360c;
color: white;
}
.btn-secondary {
background: #ffab91;
color: #4e342e;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1 class="name">张三</h1>
<h2 class="position">全栈开发工程师</h2>
</header>
<section class="info-section">
<div class="info-grid">
<div class="info-item"><span class="info-label">邮箱：</span>zhangsan@example.com</div>
<div class="info-item"><span class="info-label">电话：</span>138-1234-5678</div>
<div class="info-item"><span class="info-label">所在地：</span>上海</div>
<div class="info-item"><span class="info-label">毕业院校：</span>XX大学 计算机科学</div>
</div>
<div class="contact-buttons">
<button class="btn btn-primary">下载简历</button>
<button class="btn btn-secondary">联系我</button>
</div>
</section>
<section class="bio-section">
<h3>个人简介</h3>
<div class="typewriter-container">
<div class="typewriter" id="typewriter"></div>
</div>
</section>
</div>
<script>
// 改进后的打字机效果
function typeWriter(element, text, speed = 30) {
let i = 0
element.innerHTML = ''
const textNode = document.createTextNode('')
element.appendChild(textNode)
function type() {
if (i < text.length) {
textNode.textContent += text.charAt(i)
element.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
i++
setTimeout(type, speed)
}
}
type()
}
const bioText = `我是张三，拥有5年全栈开发经验，擅长使用JavaScript、Python及相关技术栈。热爱开源技术，熟悉React、Vue等前端框架及Django、Flask后端开发。主导过多个企业级项目的架构设计和开发部署，对性能优化和代码质量有严格要求。持续关注前沿技术发展，乐于分享技术经验。`
window.onload = function () {
const typewriter = document.getElementById('typewriter')
typeWriter(typewriter, bioText)
}
</script>
</body>
</html>
保存退出
3.2 修改 Nginx 配置
定位配置文件
- 主配置：/data/nginx/conf/nginx.conf
- 子配置：/data/nginx/conf.d/default.conf（推荐在此添加自定义配置）
打开主配置文件可以看到，主配置文件中没有写什么配置，引入了子配置文件的内容
打开子配置文件
可以看到默认从root配置的目录下查找index配置的文件类型的文件显示到页面，也就是说从/usr/share/nginx/html目录下查找index.html index.htm这两种类型的文件。
注意此处配置的地址为容器内的地址/usr/share/nginx/html，但是我们运行 nginx 时已经将该目录挂载到/data/nginx/html目录下了，我们要显示的文件在/data/nginx/html/blog目录下，所以我们只需将配置的root的路径改为/usr/share/nginx/html/blog即可
vim /data/nginx/conf.d/default.conf
location / {
root /usr/share/nginx/html/blog;
index index.html index.htm;
}
每次我们修改 nginx 的配置文件后，先使用的命令检查配置文件有没有问题
docker exec -it nginx nginx -t
如果配置文件正确
配置文件有问题：
重新加载 nginx 的配置文件
docker exec -it nginx nginx -s reload
3.3 访问测试
浏览器访问：你的服务器的ip
四、nginx 部署vue项目
待更新
五、常见问题
1. 404
待更新
2. 页面刷新后404
待更新
3. 403 forbidden
待更新