Docker之Nginx前端部署(Windows版-x86_64(AMD64)-离线)

需求:部署的Windows电脑(x86_64)是内网,所以需要提前在有网的Windows电脑(x86_64)上下载Nginx镜像,然后内网电脑加载镜像后即可运行Vue项目。

Windows 主流架构:x86_64(AMD64) 和 ARM64;

Linux 主流架构:x86_64(AMD64) 和 ARM64(AArch64)。

一、查看容器Containers与Images镜像

1、容器Containers

注意:当前nginx 容器目前还处于运行状态,Docker 不允许直接删除正在运行的容器,必须先停止容器。

bash 复制代码
# 第一步:停止运行中的 nginx 容器
docker stop nginx

# 第二步:删除已停止的容器
docker rm nginx

2、Images镜像

镜像正在被某个容器使用,必须先删除使用它的容器才能继续删除镜像。

注意:删镜像前先把相关容器删除。

3、清空Nginx相关容器与镜像


二、拉取Nginx最新版本镜像

1、运行nginx容器


bash 复制代码
docker run -d --name nginx -p 8085:85 -v "E:/test/dist:/usr/share/nginx/html/dist" -v "E:/test/nginx.conf:/etc/nginx/conf.d/default.conf" nginx

因为现在docker里没有Nginx容器所以会自动下载最新版本的Nginx镜像然后运行该容器。

步骤 1:自动拉取 nginx 镜像

因为本地没有 nginx 镜像,Docker 会先从官方仓库(Docker Hub)下载 nginx:latest 镜像(默认拉取 latest 标签),终端会显示下载进度:

步骤 2:创建并启动 nginx 容器

镜像下载完成后,Docker 会按照你指定的参数创建并启动容器:

--name nginx:给容器命名为 nginx(这也是为什么第一步删不存在的容器报错不影响 ------ 这里会新建);

-p 8085:85:将主机 8085 端口映射到容器 85 端口;

-v "E:/test/dist:/usr/share/nginx/html/dist":将主机 E:/test/dist 目录挂载到容器内指定路径;

-v "E:/test/nginx.conf:/etc/nginx/conf.d/default.conf":将主机的 nginx.conf 配置文件挂载为容器的默认配置;

-d:后台运行容器。

2、下载镜像

①方法1

bash 复制代码
# 导出 nginx 镜像为本地文件(比如保存到 E盘)
docker save -o E:\nginx-image.tar nginx:latest


②方法2

三、离线部署

1、加载镜像

把之前下载的Nginx镜像拷贝到离线的Windows电脑上,运行命令:

bash 复制代码
docker load -i E:\nginx-image.tar

可以看到Nginx镜像已经成功加载进来了。

2、运行Nginx容器

可以看见,Nginx容器成功启动了,现在可以打开浏览器,访问 http://localhost:8085

3、补充说明

Nginx版本其实是Linux x86 架构的,但是Nginx 也能在 Windows x86 上离线运行镜像。
Docker之Windows与Linux不同架构部署理解

相关推荐
LYFlied2 小时前
【算法解题模板】-解二叉树相关算法题的技巧
前端·数据结构·算法·leetcode
weibkreuz2 小时前
React的基本使用@2
前端·javascript·react.js
于是我说2 小时前
前端JavaScript 项目中 获取当前页面滚动位置
开发语言·前端·javascript
GISer_Jing2 小时前
AI在前端开发&营销领域应用
前端·aigc·音视频
Hao_Harrision2 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·react.js·typescript·tailwindcss·vite7
世转神风-2 小时前
winDbg安装-以及安装路径
windows
来杯三花豆奶2 小时前
Vue 2.0 Mixins 详解:从原理到实践的深度解析
前端·javascript·vue.js
code_YuJun2 小时前
脚手架开发工具——dotenv
前端
San30.2 小时前
深度驱动:React Hooks 核心之 `useState` 与 `useEffect` 实战详解
前端·javascript·react.js