从“巨轮”到“本地开发”:用 Docker 和 Nginx 解决你的端口焦虑

如果我接手了一个几年前的 Vue2 项目,它依赖着 Node 16 和 npm 8。而我电脑上安装的却是最新的 Node 22。结果就是,项目根本跑不起来。这种依赖冲突和环境不一致的问题,是每个开发者都经历过的噩梦。

Docker 就像一艘"巨轮",它将你的应用(货物)连同其所有依赖和运行环境(集装箱)打包成一个整体。无论这艘巨轮停靠在哪个港口(服务器),它都能保证货物完好无损地运行。

现在我们就通过一个实战例子,学习如何用 Docker 和 Nginx 解决一个常见痛点:如何将 localhost:1314 这样带端口的访问地址,变成清爽的 localhost/...。

核心概念:镜像与容器

Docker 的两个核心概念:

  • 镜像 (Image) :可以把它理解为一个应用的"安装包"。它是一个只读的模板,包含了运行应用所需的一切,比如代码、运行时环境、库和配置。例如 nginx 就是一个镜像。
  • 容器 (Container) :容器是镜像运行时的实体。你可以把它看作是镜像被"安装"和"启动"后的实例。一个镜像可以创建多个容器,它们之间相互隔离。

简单来说,镜像是静态的模板,容器是动态的实例。

告别端口号

假设你的本地开发环境里,有一个 Web 应用正在 localhost:1314 上运行。每次访问都需要输入端口号,不仅麻烦,也不够优雅。我们的目标是:当用户在浏览器输入 http://localhost 时,能自动访问到我们运行在 1314 端口的应用。

这个任务将由 Nginx 来完成,它在这里扮演反向代理的角色。

第一步:准备 Nginx 配置文件

首先,我们需要告诉 Nginx 如何转发请求。在你的项目目录下,创建一个名为 nginx.conf 的文件,并写入以下内容:

nginx

ini 复制代码
events {
    worker_connections 1024;
}

http {
    server {
        listen 80;

        location / {
            # 将所有请求代理到运行在 1314 端口的应用
            proxy_pass http://host.docker.internal:1314;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1e25c1f35e1f453f8420e7113981da3a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg57u_6Imy6J-R6J6C:q75.awebp?rk3s=f64ab15b&x-expires=1787805572&x-signature=65AL7KpsulwgmJnT%2B4zxcbYFnLs%3D)

关键点:

  • listen 80;:Nginx 将在容器内部监听 80 端口,这是 HTTP 服务的默认端口。
  • proxy_pass http://host.docker.internal:1314;:这是反向代理的核心。它将所有接收到的请求转发到 host.docker.internal:1314。host.docker.internal 是一个特殊的 DNS 名称,在 Docker 容器内部,它指向宿主机(也就是你的电脑)。这样,Nginx 容器就能访问到你电脑上 1314 端口的服务了。

第二步:启动 Nginx 容器

现在,我们将使用 docker run 命令来启动一个 Nginx 容器,并将我们刚刚创建的配置文件挂载进去。

打开你的终端(命令行工具),执行以下命令:

bash

javascript 复制代码
docker run --name my-nginx-demo \
  -p 80:80 \
  -v D:/workspace/ysh_ai/backend/docker/demo/nginx.conf:/etc/nginx/nginx.conf \
  -d nginx

让我们拆解一下这个命令的每个参数:

  • docker run:启动一个新容器的命令。
  • --name my-nginx-demo:为这个容器起一个名字,方便后续管理(如停止、删除)。
  • -p 80:80:这是端口映射。格式为 -p <宿主机端口>:<容器端口>。它将你电脑的 80 端口映射到容器的 80 端口。这意味着,访问你电脑的 80 端口,就等于访问容器的 80 端口。
  • -v D:/.../nginx.conf:/etc/nginx/nginx.conf:这是卷挂载。格式为 -v <宿主机文件路径>:<容器内文件路径>。它将你本地的 nginx.conf 文件替换掉容器内默认的配置文件。这样,容器内的 Nginx 就会按照我们的规则来工作了。
  • -d nginx:-d 表示在后台(detached)运行容器。nginx 是要运行的镜像名称。Docker 会首先检查本地是否有这个镜像,如果没有,会自动从 Docker Hub 拉取。

第三步:

当命令成功执行后,一个 Nginx 容器已经在后台运行了。

现在,打开浏览器,直接访问 http://localhost。

你会发现,浏览器成功加载了你运行在 localhost:1314 的应用内容!用户完全感知不到后端服务实际运行在哪个端口上,他们只需要记住一个干净的域名或 localhost 即可。

docker 命令

  • 查看运行中的容器 :docker ps
  • 停止所有运行中的容器 :docker stop $(docker ps -q)
  • 删除所有容器 :docker rm $(docker ps -q)
  • 删除镜像 :docker rmi nginx
  • 拉取指定版本的镜像 :docker pull mysql:8.0

通过这种方式,Docker 和 Nginx 不仅解决了端口号的问题,更实现了开发环境的隔离和标准化,让你和你的团队彻底告别"在我电脑上是好的"这类问题。

相关推荐
码间留白9 小时前
手把手把 GitHub 推上阿里云 ECS:Actions CI/CD 全链路避坑实录(折腾好几天,到 2 分钟见绿)
运维·阿里云·ci/cd·docker·devops·github actions
Vex2une9 小时前
Docker Desktop WSL2后端:2026年性能调优与避坑实战指南
windows·docker·desktop·gpu容器·容器开发·virtiofs·buildkit
小天源10 小时前
从 Nginx 日志到访问分析:轻量化网站监测服务的架构实践
jvm·nginx·网络安全·架构·网络监控
程序员老赵10 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
TTATTC10 小时前
为什么单会话聊天做不好复杂工程?Claude Code 创作者的并发 Worktree 与记忆闭环实践
docker·开源
TTATTC11 小时前
状态机驱动长事务,还是 DAG 编排高并发?高可靠业务流程引擎的双核架构设计
docker·开源
殷忆枫11 小时前
告别依赖地狱!在 Ubuntu 上用 Docker 极速部署 Home Assistant 与 MQTT,并接入 Siri 与嵌入式 C 终端
linux·ubuntu·docker
千桐科技12 小时前
qModel算法模型平台功能解析:从源码到 Docker 镜像,部署能自动完成哪些工作?
运维·docker·容器·qmodel
江湖有缘15 小时前
Docker实战 | 使用Docker部署Imagor Studio图片编辑工具
java·docker·eureka
Xxtaoaooo15 小时前
私人日记不想散落在多个App?我用DailyTxT把记录、搜索和图片都放进自己的NAS
docker·nas·dailytxt