Docker 部署前端项目端口映射失败问题

最新推荐文章于 2025-03-30 20:18:42 发布
最新推荐文章于 2025-03-30 20:18:42 发布
阅读量372 收藏
点赞数 3
分类专栏： Docker 文章标签： docker 前端 容器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/misnice/article/details/145469910
版权

在 Docker 容器中运行前端应用时，默认 localhost 不能被宿主机访问。
如果使用 --host=0.0.0.0，就可以从宿主机或其他远程设备访问容器内的前端服务。

以 Vite 为例
在 package.json 中

"scripts": {
    "dev": "vite --host=0.0.0.0"
},

或 vite.config.js 中

export default defineConfig({
  server: {
    host: "0.0.0.0",
    port: 3000,
  }
});

直接在 Dockerfile 中修改也可以

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

CMD ["vite", "dev", "--host", "0.0.0.0"]
Docker续2：docker部署前端项目
m0_70848838的博客
08-26 1536
root@localhost ~]# ls //导入dist项目[root@localhost ~]# docker pull mysql //下载mysql[root@localhost ~]# docker images //查看镜像。
docker 安装 nginx 部署Vue前端项目
weixin_48568302的博客
03-18 1298
docker 安装 nginx 部署Vue前端项目
docker-compose 映射端口失败！ docker端口映射失败 ，docker映射只能使用老端口，映射无法使用
求是
05-28 1531
使用了docker-mode 为host模式，所以不能换端口，只能写为"8086:8086"。如果想换端口，则将network-mode: host 删除。使用docker-compose 启动项目，发现映射端口出现问题，不能映射端口！另外如果你的不是这个问题 ，注意防火墙是否开启，需要关闭防火墙。使用原来端口是可以使用的。
解决无法对docker容器进行端口映射的问题
qq_42031483的博客
05-06 1万+
初学docker的时候，不知道为啥，按着教程里打的代码，最后却出现了映射失败的情况。即：在docker内部设置的映射端口，外部却没有办法访问。想了想，不外乎两个原因，要么是docker内部映射失败，要么是外部访问地址出了错误，所以，带着这两个疑问，我来排查了。 内部原因 考虑是内部原因，我先用nginx试了试。输入简单的一个端口映射： docker run -d -P nginx 然后成功运行，...
解决Docker端口映射后外网无法访问的问题
最新发布
niulinbiao的博客
03-30 1084
今天因为服务器宕机，重新启动后发现docker部署的mysql和redis都无法通过外网访问。经过排查原因是ip转发没有开启。下面教大家如何解决。
解决docker端口映射失败问题
jiangwei741的博客
11-08 539
https://cloud.tencent.com/developer/article/1768097
docker 启动报端口不可用解决方案
</SCORPION>
05-23 5891
报错信息： Ports are not available: exposing port TCP 0.0.0.0:xxxxx -> 0.0.0.0:0: listen tcp 0.0.0.0:xxxxx: bind: An attempt was made to access a socket in a way forbidden by its access permissions. 报错问题： 使用docker-compose.exe up resbot启动容器时，报tcp端口不可用
解决docker中运行的jar包连不上前端程序
qq_52645134的博客
02-21 707
连接问题通常涉及到网络配置和端口映射。获取容器的 IP 地址，确保前端程序能够访问到。通过逐步检查这些方面，应该能够找到连接问题的原因并解决它。为容器id或者容器名。
手摸手教你用Docker部署web前端vue项目
程序员柚子的博客
01-22 1316
本文主要介绍了如何使用Docker进行Vue3项目的快速部署。
解决Docker部署前端页面报404错误
qq_42584264的博客
06-18 1442
解决通过Docker部署若依前端项目报系统404错误
Docker利用Nginx部署前端项目
尽我所能，分享开发问题的解决方式
10-27 7462
Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等，使用时记得改成自己所需的；注：如果是linux系统，先找个位置创建文件夹，然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。--p：端口号，左侧为外网访问端口，右侧为内部映射端口，与nginx.conf.template的监听端口默认80一样即可。到此为止，你的项目就成功部署到Docker中的Nginx中了，撒花*★,°*:.☆(￣▽￣)/$:*.°★*。
容器端口映射错误的解决方式
eason1015的博客
11-08 634
报错信息这个错误信息说明在执行 iptables 规则配置时遇到了问题，导致 Docker 无法将容器端口正确映射到主机端口。具体错误是 iptables 中缺少某些链或规则，通常发生在 Docker 安装或防火墙配置出现问题的情况下。
解决Docker端口映射无法访问问题
funnyPython的博客
09-10 5264
https://cloud.tencent.com/developer/article/1768097 https://blog.csdn.net/li_101357/article/details/78415461
前端vue项目服务器部署(docker)
m0_46122129的博客
09-07 1956
将你的nginx-alpine.tar包上传到服务器上。假设路径为 。 2、导入 Nginx Docker 镜像 使用以下命令将 文件加载为 Docker 镜像： 执行后会显示类似如下的输出，表示镜像已成功加载： 3、验证镜像是否加载 确认镜像已经导入成功： 应该可以看到 镜像在列表中。在你的服务器上确保 目录下包含以下内容：- ：Vue 项目构建后的静态文件。- ：自定义的 Nginx 配置文件。- 。确保 目录中有你的 Vue 项目的打包内容。在 下编写或确保已经有如下内容的 ： 3、编写ng
三分钟学会使用 Docker 部署前端项目
weixin_42907150的博客
01-30 7409
Docker🐳 是一种容器技术，只隔离应用程序的运行时环境但容器之间可以共享同一个操作系统，可以理解成一个更轻量级的虚拟机并且使用的是本机的操作系统。Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。对于前端而言，在 CI 环境中使用也更容易集成开发，测试与部署。比如可以为流水线(Pipeline)设置等任务，更好地把控项目质量。
docker 部署springboot项目，解决容器启动成功但是浏览器访问不成功的问题
热门推荐
weixin_38705082的博客
06-27 1万+
1.将springboot项目进行打包mycrawler-server-1.0.jar 2.打开docker toolbox，创建一个文件夹，将jar复制到文件夹中 3.创建dockerfile文件，并编辑 vi dockerfile，内容如下： FROM openjdk:11 VOLUME /tmp ADD mycrawler-server-1.0.jar app.jar EXPOSE 9091...
[问题解决] docker run 端口映射失败且无报错
李兆龙的博客
01-11 5178
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)，由 李兆龙 确认，转载请注明版权。 Docker版本：2:1.13.1-96.gitb2f74b2.tl2 问题描述 网上对于这个问题的已有回答在这一个时间点看来都没什么意义。 启动容器的时候进行端口映射，不报任何错误，但是所有端口都映射失败，如下显示： 在容器内部执行tcpdump -i bond1 port 24761可以看到宿主机可以收到数据包，但是容器内部收不到。 问题
Docker部署前端项目
03-30
可以使用Docker部署前端项目，以下是步骤： 1. 编写Dockerfile文件 在项目根目录下创建一个Dockerfile文件，内容如下： ``` # 基于官方 Node.js 镜像 FROM node:14.15.1-alpine # 设置工作目录 WORKDIR /app # 复制 package.json 文件 COPY package*.json ./ # 安装依赖 RUN npm install # 复制所有文件到工作目录 COPY . . # 执行构建命令 RUN npm run build # 暴露端口 EXPOSE 8080 # 启动命令 CMD ["npm", "run", "start"] ``` 2. 构建Docker镜像 在终端中执行以下命令构建Docker镜像： ``` docker build -t my-app . ``` 其中，my-app是镜像名称，后面的.表示Dockerfile文件在当前目录下。 3. 运行Docker容器 运行以下命令启动Docker容器： ``` docker run -d -p 8080:8080 my-app ``` 其中，-d表示后台运行，-p表示映射端口，my-app是镜像名称。 4. 访问前端应用 在浏览器中访问http://localhost:8080即可看到前端应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值