windows下，docker虚拟化使用nginx镜像部署vue3+vite项目
在上一章节中我们在vite+vue3中写了一个openlayers小项目，在vue3+vite+ts中使用openlayers-CSDN博客，接下来我们该怎么部署这样一个项目，当然我们可以选择使用nginx直接部署,想看docker部分可以直接跳过nginx部分。
目录
Nginx
Docker
Nginx
1）安装nginx（nginx: download）去官网下载需要的版本，并解压到你自己的文件夹中。
conf：存在Nginx配置文件的目录
docs：存放Nginx文档的目录
html：存放静态html文件的目录
logs：存放Nginx日志的目录
temp：存放临时文件的目录
2)接下来把dist文件直接拉入到html中
3) 打开conf文件，在nginx.conf中写配置，主要修改监听端口和启动文件指向
4）启动nginx.exe就可以直接访问 localhost:8088
Docker
为什么需要用docker去部署呢，我们都知道Java是可以一次编译，到处运行，那我们在实际开发应用时能不能做到一次构建到处部署呢，不考虑现场的机子实际环境，可以直接部署，无论你是window还是centOS还是Linux都不影响，这就需要用到Docker进行虚拟化，具体可以看docker的文档介绍Docker: Accelerated Container Application Development。
1）下载docker（window），但是如果想工业化的使用还是用Linux。
安装前的准备工作 检查系统要求：
操作系统：Windows 10 64-bit: Pro, Enterprise, or Education (Build 15063 or later) 或 Windows 11。 硬件：支持虚拟化技术的处理器和至少 4 GB 的内存。 虚拟化：确保 BIOS 中已启用虚拟化技术（如 Intel VT-x 或 AMD-V）。 安装 WSL 2（Windows Subsystem for Linux 2）：
Docker Desktop for Windows 需要 WSL 2 支持。可以参考 Microsoft 官方文档 安装 WSL 2。
或下载完docker重启后自动下载
Docker Desktop: The #1 Containerization Tool for Developers | Docker
docker pull nginx:alpine -
拉取镜像可能会失败，因为镜像地址我们无法访问，所以我们要改镜像源
-
可以在docker Desktop中修改，也可以直接修改**/users/[user]/.docker/daemon.json文件配置。
{"builder": {"gc": {"defaultKeepStorage": "20GB","enabled": true}},"experimental": false,
# 添加下面这段"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io","https://dockerproxy.com","https://docker.mirrors.ustc.edu.cn","https://docker.nju.edu.cn"]
}
3）创建一个文件夹进行构建工作，创建文件Dockerfile，并写入build需要的配置。
# 指定基础镜像，必须为第一个命令
# 可以使用镜像ID或者镜像名称 例如 nginx:1.14
FROM nginx:alpine
# 维护者信息
MAINTAINER chen
# 将本地文件添加到容器中
# 将dist文件中的内容复制到 /usr/local/nginx/html/ 这个目录下面，该路径是nginx容器生成的一个虚拟路径，你的项目会存在这里。
COPY dist/ /usr/local/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
# 构建镜像时执行的命令
RUN echo 'echo init ok!!'4）将vue打包好的文件放入到该目录，创建nginx.conf并配置nginx（具体配置可以看文档，这个小demo部署没有其他配置，只要像上面nginx修改就可以。
# nginx.config#user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 8088;server_name localhost;location / {#这里地址要指向你上面移动的位置root /usr/local/nginx/html;index index.html index.htm;}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}}
执行docker build指令生成私人镜像
docker build -t umap-t:V1.0.0 ./Dockerfile6) 将镜像运行
docker run -p 8081:8088 -d --name vue-map umap-t:V1.0.0
docker run -p [端口]:[映射端口] -d --name [容器名字] [镜像名字或id]（到这里为止就已经并且可以运行了，但是我们也说了要一次构建到处部署，所有我们需要将镜像导出）
7）将镜像保存，并压缩（如果你也需要压缩则需要用bash，gitbash也可以）
#压缩
docker save umap-t:V1.0.1 |gzip > umap-t.tar.gz
docker save [镜像名称:tag] |gzip > [导出地址(如果找不到可以用绝对路径）]#不压缩(没压缩可以使用 tar作为尾缀，不需要gz）
docker save -o umap-t.tar.gz umap-t:V1.0.1
docker save -o [导出地址(如果找不到可以用绝对路径）] [镜像名称:tag]8) 将保存的镜像解压并导入
#解压，前提是你镜像压缩的
gunzip -c umap-t.tar.gz|docker load
gunzip -c [镜像路径]|docker load#无需解压
docker load -i umap-t.tar.gz
docker load -i [镜像路径]