【Docker】docker 安装 nginx_docker nginx
目录
- 前言
- 一、Docker 安装和部署 Nginx
-
- 1.1 拉取镜像
- 1.2 获取 nginx 的配置文件
-
- 1.2.1 创建目录
- 1.2.2 启动nginx
- 1.2.3 拷贝相关的nginx文件
- 1.2.4 关闭容器，移除容器
- 1.3 运行
- 1.4 访问测试
- 二、Docker Compose 安装和部署 Nginx
-
- 2.1 拉取镜像
- 2.2 获取 nginx 的配置文件
-
- 2.2.1 创建目录
- 2.2.2 启动nginx
- 2.2.3 拷贝相关的nginx文件
- 2.2.4 关闭容器，移除容器
- 2.3 编写Docker Compose 文件
- 2.4 启动
- 2.5 访问
- 三、访问自定义页面
-
- 3.1 创建自定义 HTML 页面
- 3.2 修改 Nginx 配置
- 3.3 访问测试
- 四、nginx 部署vue项目
- 五、常见问题
-
- 1. 404
- 2. 页面刷新后404
- 3. 403 forbidden
前言
通过学习前面的文章Docker 的安装和 Docker Compose 的安装于基本使用，相信你已经安装好了Docker和Docker Compose，如果没有安装，请根据本文章所需，安装Docker或者Docker Compose
一、Docker 安装和部署 Nginx
使用 Docker 方式安装和部署 nginx 首先要确保你已经安装了Docker，可根据该文章安装Docker
1.1 拉取镜像
使用以下命令拉取镜像，注意版本号需要根据实际情况填写
docker pull nginx:latest1.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:latest1.2.3 拷贝相关的nginx文件
docker cp nginx:/etc/nginx/nginx.conf /data/nginx/conf/ #复制配置文件docker cp nginx:/etc/nginx/conf.d /data/nginxdocker cp nginx:/usr/share/nginx/html /data/nginx #复制基本的html界面
1.2.4 关闭容器，移除容器
# 停止运行， 移除容器docker stop nginxdocker 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:latest2.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:latest2.2.3 拷贝相关的nginx文件
docker cp nginx:/etc/nginx/nginx.conf /data/nginx/conf/ #复制配置文件docker cp nginx:/etc/nginx/conf.d /data/nginxdocker cp nginx:/usr/share/nginx/html /data/nginx #复制基本的html界面
2.2.4 关闭容器，移除容器
# 停止运行， 移除容器docker stop nginxdocker rm nginx
2.3 编写Docker Compose 文件
cd /data/nginx/composevim 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/htmlmkdir 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 reload3.3 访问测试
浏览器访问：你的服务器的ip
四、nginx 部署vue项目
待更新
五、常见问题
1. 404
待更新
2. 页面刷新后404
待更新
3. 403 forbidden
待更新
