前端页面部署到Nginx容器并制作镜像的完整教程
前端页面部署到Nginx容器并制作镜像的完整教程
本文将详细介绍如何将前端页面（基于Vue或HTML/CSS/JS等）部署到Nginx容器，并将其制作成镜像，以便在其他服务器上快速部署。通过Docker的容器化部署方式，可以实现开箱即用的目标。
1. 开发好web前端页面后发布到文件夹
例如：D:\Web\dist
2. 在docker 中创建nginx容器
docker run --name mynginx -d -p 80:80 nginx
此命令会创建一个名为 mynginx 的容器，并在宿主机的 80 端口上提供服务。
3. 找到 Nginx 的默认 HTML 路径
Nginx 默认的 HTML 文件目录是 /usr/share/nginx/html，可以通过以下命令确认：
docker exec -it mynginx /bin/bash
进入容器后查看默认路径内容：
ls /usr/share/nginx/html
通常会看到文件如 index.html。
[root@iZwz9dboq7pwthuwyj8svwZ ~]# docker exec -it testnginx /bin/bashroot@e7ade13e73b9:/# ls /usr/share/nginx/html50x.html assets favicon1.ico index.js logo1.png_app.config.js favicon.ico index.html logo.png resource
4. 上传 HTML 文件到容器
将 HTML 文件上传到容器的 /usr/share/nginx/html 目录。
假设宿主机的 HTML 文件路径是 /root/nginxhtml/index.html，使用以下命令：
docker cp /root/nginxhtml/index.html mynginx:/usr/share/nginx/html/index.html
如果你需要将宿主机 /root/nginxhtml/ 目录下的所有文件上传到 Nginx 容器的 /usr/share/nginx/html 目录，可以一次性复制整个目录而不是单个文件。
上传整个目录执行以下命令：
docker cp /root/nginxhtml/. mynginx:/usr/share/nginx/html/
5. 检查上传结果
进入容器查看文件是否已成功上传：
docker exec -it mynginx /bin/bash
确认 index.html 文件是否存在。
6. 访问网页
通过浏览器访问容器所在服务器的 IP 地址，例如：
http://<宿主机IP>:80
你应该可以看到上传的网页。
额外提示
(1). 替换文件时确保清空旧目录
如果你希望上传文件时清空容器中已有的文件，可以先清空目标目录：
docker exec -it mynginx /bin/bashrm -rf /usr/share/nginx/html/*
(2). 然后再执行上传命令：
docker cp /root/nginxhtml/. mynginx:/usr/share/nginx/html/
(3). 上传完成后重新加载 Nginx
如果容器内的 Nginx 服务没有自动检测到文件变更，手动重载配置：
docker exec -it mynginx /bin/bash
7. 基于正在运行的容器mynginx制作一个新的镜像
基于容器制作镜像的步骤：
7.1 确认目标容器运行正常
确保你已经配置好目标容器，例如上传了 /root/nginxhtml 目录的文件，并检查 Nginx 服务是否正常运行。
使用以下命令查看容器运行状态：
docker ps
确认容器名称（例如 mynginx）或容器 ID。
7.2 使用 docker commit 创建镜像
运行以下命令，将容器保存为一个新的镜像：
docker commit mynginx mynginx-image:v1
参数说明 ：
mynginx：正在运行的容器名称或容器 ID。mynginx-image:v1：新镜像的名称和版本号，你可以自定义。
7.3 查看新镜像
执行以下命令查看新创建的镜像：
docker images
你应该能看到 mynginx-image 的镜像名。
示例输出：
REPOSITORY TAG IMAGE ID CREATED SIZEmynginx-image v1 123abc456def 10 seconds ago 133MB
7.4 测试新镜像
基于新的镜像启动一个容器，确认功能正常：
docker run --name testnginx -d -p 8080:80 mynginx-image:v1
通过访问 http://<宿主机IP>:8080，验证网页内容是否正确。
7.5 将镜像保存为文件（可选）
如果需要将镜像分发到其他服务器，可以将镜像保存为 .tar 文件：
docker save -o mynginx-image.tar mynginx-image:v1
注意：这个生成的mynginx-image.tar文件在当前目录下。例如：用户在/root 目录下执行了上面这条语句，那么生成的文件的路径就是 /root/mynginx-image.tar
7.6 将生成的 mynginx-image.tar 文件拷贝到其他服务器
进入到镜像文件所在目录，然后用以下命令加载：
docker load -i mynginx-image.tar
[root@iZwz9dboq7pwthuwyj8svwZ myimagefiles]# cd ..[root@iZwz9dboq7pwthuwyj8svwZ ~]# ls[root@iZwz9dboq7pwthuwyj8svwZ ~]# docker load -i scxnginx-imagev1.taropen scxnginx-imagev1.tar: no such file or directory[root@iZwz9dboq7pwthuwyj8svwZ ~]# cd myimagefiles[root@iZwz9dboq7pwthuwyj8svwZ myimagefiles]# docker load -i scxnginx-imagev1.tarLoaded image: scxnginx-image:v1[root@iZwz9dboq7pwthuwyj8svwZ myimagefiles]# docker imagesREPOSITORY TAG IMAGE ID CREATED SIZEscxnginx-image v1 7d79ebcbfa99 16 hours ago 159MBscxnginximage latest af259e43f1ba 19 hours ago 141MBschoola latest a4afc6b42d89 6 days ago 222MBdotnet6_test v2 27f9a2725126 8 days ago 217MBnginx latest 605c77e624dd 2 years ago 141MBmysql latest 3218b38490ce 2 years ago 516MBcentos latest 5d0da3dc9764 3 years ago 231MBportainer/portainer latest 580c0e4e98b0 3 years ago 79.1MB[root@iZwz9dboq7pwthuwyj8svwZ myimagefiles]#
我的镜像文件放在 /root/imagefiles/ 目录下
7.7 启动一个新容器验证镜像
[root@iZwz9dboq7pwthuwyj8svwZ myimagefiles]# docker run --name testnginx03 -d -p 8089:80 scxnginx-image:v1f90716401509debb1b28bf3223086a2a90b429e30b4bc5ad5358b2efca567821[root@iZwz9dboq7pwthuwyj8svwZ myimagefiles]#
这个时候访问http://