前端项目配置 Dockerfile 打包后镜像部署无法访问

Dockerfile 配置如下:

FROM node:lts-alpineWORKDIR /app
COPY . .
RUN npm install
RUN npm run buildEXPOSE 3001CMD ["npm", "run", "preview"]

构建镜像

docker build -t vite-clarity-project .

启动镜像容器

docker run -p 3001:3001 --name=my-vite-clarity-project vite-clarity-project

启动后访问不到:

命令行访问:

root@btx:~# docker ps
CONTAINER ID   IMAGE                          COMMAND                  CREATED        STATUS        PORTS                                       NAMES
1c02a1d7732f   vite-clarity-project   "docker-entrypoint.s…"   4 hours ago    Up 4 hours    0.0.0.0:3001->3001/tcp, :::3001->3001/tcp   my-vite-clarity-project 
root@btx:~# curl 0.0.0.0:3001
curl: (52) Empty reply from server  // 访问不到

浏览器访问:

该网页无法正常运作localhost
未发送任何数据。
ERR_EMPTY_RESPONSE在这里插入图片描述

问题原因:

root@btx:~# docker logs 1c02a1d7732f> vite-clarity-project@0.0.0 preview
> vite preview --port 3001➜  Local:   http://localhost:3001/    // 问题原因只启动了 localhost➜  Network: use --host to expose

知识点:

localhost:3001: 仅允许本地主机(即 Docker 容器内部)访问。
0.0.0.0:3001: 允许任何主机(包括容器外部的主机)通过该地址访问服务。

解决方法:

import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],resolve: {alias: {"@": path.resolve(__dirname, "./src"),},},server: {host: '0.0.0.0', // ******** 加上这一行 '0.0.0.0' ******** //},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

进程(一) 进程概念

文章目录 什么是进程呢? 描述进程-PCBtask_struct-PCB的一种task_struct内容分类 查看进程通过系统目录查看通过ps命令查看通过系统调用获取进程的PID和PPID通过系统调用创建进程- fork()函数 fork()函数fork函数做了什么?fork之后…

Vue加载序列帧动图

解读方法 使用<img :src"currentFrame" alt"加载中" /> 加载图片动态更改src的值使用 requestAnimationFrame 定时更新在需要的页面调用封装的组件 <LoadToast v-if"showLoading" /> 封装组件 <template><div class"…

CTF CRYPTO 密码学-1

题目名称&#xff1a;enc 题目描述&#xff1a; 压缩包中含两个文件&#xff1a;一个秘钥d.dec&#xff0c;一个密文flag.enc 解题过程&#xff1a; Step1&#xff1a;这题是一个解密他题目&#xff0c;尝试openssl去ras解密 工具简介 在Kali Linux系统中&#xff0c;openss…

React16源码: React中的异步调度scheduler模块的源码实现

React Scheduler 1 ) 概述 react当中的异步调度&#xff0c;称为 React Scheduler发布成单独的一个 npm 包就叫做 scheduler这个包它做了什么&#xff1f; A. 首先它维护时间片B. 然后模拟 requestIdleCallback 这个API 因为现在浏览器的支持不是特别的多所以在浏览当中只是去…

【计算机图形学】习题课:Viewing

【计算机图形学】Viewing 部分问题与解答 CS100433 Computer Graphics Assignment 21 Proof the composed transformations defined in global coordinate frame is equivalent to the composed transformations defined in local coordinate frame but in different composing…

1月14-17日为技术测试期!字节与腾讯上演“大和解”,抖音全面开放《王者荣耀》直播

综合整理&#xff5c;TesterHome社区 来源&#xff5c;《王者荣耀》官方、界面新闻 北京商报、IT之家 1月13日&#xff0c;腾讯游戏《王者荣耀》官方微博发布消息宣布&#xff0c;从1月21日起&#xff0c;《王者荣耀》抖音直播将全面开放。 为了筛查开播期间可能遇到的所有技…

几何_直线方程 Ax + By + C = 0 的系数A,B,C几何含义是?

参考&#xff1a; 直线方程 Ax By C 0 的系数A&#xff0c;B&#xff0c;C有什么几何含义&#xff1f;_设直线 l 的方程为axbyc0 怎么理解-CSDN博客 1. A B的含义&#xff1a;组成一个与直线垂直的向量 我们先来看A和B有什么含义。 在直线上取任意两点 P1:&#xff08;x1…

OceanBase集群部署

我认为学习一个中间件比较好的方式是&#xff0c;先了解它的架构和运行原理&#xff0c;然后动手部署一遍&#xff0c;加深对它的了解&#xff0c;再使用它&#xff0c;最后进行总结和分享 本篇介绍OceanBase部署前提配置和集群部署 1.使用开源免费的社区版&#xff0c;企业版…

[Android] Android架构体系(1)

文章目录 Android 的框架Dalvik 虚拟机JNI原生二进制可执行文件Android NDK中的binutils Bionic谷歌考虑到的版权问题Bionic与传统的C标准库&#xff08;如glibc&#xff09;的一些不同 参考 Android 的框架 Android 取得成功的关键因素之一就是它丰富的框架集。 没有这些框架…

架构08- 理解架构的模式2-管理和监控

大使模式&#xff1a;构建一个辅助服务&#xff0c;代表消费者使用服务或应用程序发送网络请求。 进程外的代理服务&#xff08;之前介绍中间件的时候也提到了&#xff0c;很多框架层面的事情可以以软件框架的形式寄宿在进程内&#xff0c;也可以以独立的代理形式做一个网络中…

AI绘图制作红包封面教程

注意&#xff1a;有不懂的话可加入QQ群聊一起交流&#xff1a;901944946欢迎大家关注微信公众号【程序猿代码之路】&#xff0c;每天都会不定时的发送一些红包封面&#xff01;&#xff01; 2024的春节即将到来&#xff0c;而在这春节到来之前&#xff0c;就有一个非常爆火的小…

黑马程序员 Java设计模式学习笔记(一)

目录 一、设计模式概述 1.1、23种设计模式有哪些&#xff1f; 1.2、软件设计模式的概念 1.3、学习设计模式的必要性 1.4、设计模式分类 二、UML图 2.1、类图概述 2.2、类图的作用 2.3、类图表示法 类的表示方式 类与类之间关系的表示方式 关联关系 聚合关系 组合…

陀螺仪LSM6DSV16X与AI集成(6)----检测自由落体

陀螺仪LSM6DSV16X与AI集成.6--检测自由落体 概述视频教学样品申请源码下载生成STM32CUBEMX串口配置IIC配置CS和SA0设置串口重定向参考程序初始换管脚获取ID复位操作BDU设置 概述 本文介绍如何初始化传感器并配置其参数&#xff0c;以便在检测到自由落体事件时发送通知。 最近…

显示报错: nmap.nmap.PortScannerError: ‘nmap program was not found in path‘

解决方案&#xff1a; 《关于想在Pycharm下使用nmap然后报错nmap.nmap.PortScannerError: ‘nmap program was not found in path.然后解决的那些事》 文章中进行了详尽的描述&#xff0c;总结一下就是下载一个nmap.exe&#xff0c;然后在nmap.py中引入nmap.exe所在的路径&…

RabbitMQ常见问题之消息堆积

文章目录 一、介绍二、使用惰性队列1. 基于Bean2. 基于RabbitListener 一、介绍 当生产者发送消息的速度超过了消费者处理消息的速度,就会导致队列中的消息堆积,直到队列存储消息达到上限。最 早接收到的消息&#xff0c;可能就会成为死信&#xff0c;会被丢弃&#xff0c;这就…

Pod控制器:

Pod控制器&#xff1a; Pv pvc 动态PV Pod控制器&#xff1a;工作负载。WordLoad&#xff0c;用于管理pod的中间层 &#xff0c;确保pod资源符合预期的状态 预期状态&#xff1a; 副本数容器的重启策略镜像的拉取策略 Pod出现故障时的重启等等 Pod控制器的类型&#xff1a…

【大数据】Flink 详解(八):SQL 篇 Ⅰ

《Flink 详解》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 10 10 10 篇文章&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&…

小程序系列--7.页面导航

一、页面导航 1、 什么是页面导航&#xff1f; 页面导航指的是页面之间的相互跳转。例如&#xff0c;浏览器中实现页面导航的方式有如下两种&#xff1a; <a> 链接 location.href 2. 小程序中实现页面导航的两种方式 二、声明式导航 1. 导航到 tabBar 页面 2. 导航…

Cellinx NVT 摄像机 UAC.cgi 任意用户创建漏洞复现

0x01 产品简介 Cellinx NVT IP PTZ是韩国Cellinx公司的一个摄像机设备。 0x02 漏洞概述 Cellinx NVT 摄像机 UAC.cgi接口处存在任意用户创建漏洞,未经身份认证的攻击者可利用此接口创建管理员账户,登录后台可查看敏感信息,使系统处于极不安全的状态。 0x03 复现环境 FO…

乐意购项目前端开发 #4

一、Home页面组件结构 结构拆分 创建组件 在 views/Home 目录下创建component 目录, 然后在该目录下创建5个组件: 左侧分类(HomeCategory.vue)、Banner(HomeBanner.vue)、精选商品(HomeHot.vue)、低价商品(Homecheap.vue)、最新上架(HomeNew.vue) 引用组件 修改 views/Home…