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

Dockerfile 配置如下:

FROM node:lts-alpine

WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

EXPOSE 3001

CMD ["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' ******** //
  },
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《C++入门篇》——弥补C不足

文章目录 前言一.命名空间二.缺省参数三.函数重载四.引用4.1引用做参数4.2引用做返回值 五.内联函数六.小语法6.1auto6.2范围for6.3空指针 前言 C是业内一门久负盛名的计算机语言,从C语言发展起来的它,不仅支持C语言的语法,还新添加了面向对…

MySQL之视图索引

学生表:Student (Sno, Sname, Ssex , Sage, Sdept) 学号,姓名,性别,年龄,所在系 Sno为主键 课程表:Course (Cno, Cname,) 课程号,课程名 Cno为主键 学生选课表:SC (Sno, Cno, Score)…

华为设备NAT的配置

实现内网外网地址转换 静态转换 AR1: sys int g0/0/0 ip add 192.168.10.254 24 int g0/0/1 ip add 22.33.44.55 24 //静态转换 nat static global 22.33.44.56 inside 192.168.10.1 动态转换 最多有两台主机同时访问外网 AR1: sys int g0/0/0 ip add…

C语言之【函数】篇章以及例题分析

文章目录 前言一、函数是什么?二、C语言中函数的分类1、库函数2、自定义函数 三、函数的参数1、实际参数(实参)2、形式参数(形参) 四、函数的调用1、传值调用2、传址调用3、专项练习3.1 素数判断3.2 闰年判断3.3 二分查…

【OpenCV学习笔记17】- 平滑图像

这是对于 OpenCV 官方文档中 图像处理 的学习笔记。学习笔记中会记录官方给出的例子,也会给出自己根据官方的例子完成的更改代码,同样彩蛋的实现也会结合多个知识点一起实现一些小功能,来帮助我们对学会的知识点进行结合应用。 如果有喜欢我笔…

【数据结构】栈的远房亲戚——队列

队列的基本概念 前言一、队列的定义二、队列的重要术语三、队列的基本操作四、数据结构的三要素4.1 线性表的三要素4.2 栈的三要素4.3 队列的三要素 结语 前言 大家好,很高兴又和大家见面啦!!! 在经过前面内容的介绍,…

“Oops,Account deactivated” 账号被停用,如何解封?

“Oops,Account deactivated” ,当看到这个报错的时候,说明账号被停用,封了。 为什么被封 出现这种情况,多是因为违规使用账号,比如,批量注册多个账号或者违规使用账号,白嫖官方Api…

代码随想录算法训练营第三十六天 | 435.无重叠区间、763.划分字母区间、56.合并区间

435.无重叠区间 题目链接:435.无重叠区间 给定一个区间的集合 intervals ,其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量,使剩余区间互不重叠 。 文章讲解/视频讲解:https://programmercarl.com/0435.%E6%9…

Java毕业设计-基于jsp+servlet的家用电器购物商城管理系统-第87期

获取源码资料,请移步从戎源码网:从戎源码网_专业的计算机毕业设计网站 项目介绍 基于jspservlet的家用电器购物商城管理系统:前端 jsp、jquery、layui,后端 servlet、jdbc,角色分为管理员、用户;集成商品…

AI制作《流浪地球3》高清宣传片

AI制作《流浪地球3》高清宣传片 星辰大海,再次启航,人类的冒险,永无止境。The vast expanse of stars and oceans, setting sail once again. Human adventure knows no bounds. 当家园变得遥不可及,我们唯有勇往直前。With our …

电脑端网络记事本哪个安全稳定?

随着互联网科技的飞速发展,越来越多的上班族发现在电脑上使用网络记事本的重要性。这种网络记事本不仅便于记录工作内容,而且自动将数据上传到云端进行备份,让用户不再为数据丢失而担忧。让我们来看看上班族使用网络记事本的好处。 在日常工…

阿里云服务器地域如何选择?哪个地域价格优惠一些?

阿里云服务器地域和可用区怎么选择?地域是指云服务器所在物理数据中心的位置,地域选择就近选择,访客距离地域所在城市越近网络延迟越低,速度就越快;可用区是指同一个地域下,网络和电力相互独立的区域&#…

一文了解GeoTrust SSL证书

在当今互联网的高度连接世界中,确保网站安全性至关重要。SSL证书是保护网站和用户数据的关键组成部分。GeoTrust证书在SSL证书市场上享有盛誉,被许多网站所有者和企业所信赖。JoySSL将深入探讨GeoTrust证书的特点,帮助大家了解该品牌并做出更…

Spring中动态注册和销毁对象

1. 使用说明 通常我们项目中想要往spring容器中注入一个bean可以在项目初始化的时候结合Bean注解实现。但是该方法适合项目初始化时候使用,如果后续想要继续注入对象则无可奈何。本文主要描述一种在后续往spring容器注入bean的方法。 2. 实现 2.1 说明 2.1.1 注册…

Page268~270 11.3.4 wxWidgets项目配置

项目w28_gui的项目配置: 一,编译选项, -pipe -mthreads [[if (GetCompilerFactory().GetCompilerVersionString(_T("gcc")) > _T("4.8.0")) print(_T("-Wno-unused-local-typedefs"));]] 1, -pipe&#…

spark dateformat源码排错

背景 有一个任务 yyyy写成了YYYY,导致年份不对触发告警 select from_unixtime(unix_timestamp(),YYYY-MM-dd HH:mm:ss) 第一时间用spark dateformat搜索下看看官网,发现spark 官网也没有描述YYYY的信息 Datetime patterns - Spark 3.5.0 Documentati…

【计算机组成与体系结构Ⅱ】Cache性能分析(实验)

实验6:Cache性能分析 一、实验目的 1:加深对 Cache 的基本概念、基本组织结构以及基本工作原理的理解。 2:掌握 Cache 容量、相联度、块大小对 Cache 性能的影响。 3:掌握降低 Cache 不命中率的各种方法以及这些方法对提高 Ca…

Springboot智慧校园电子班牌统一管理平台源码

借助AIoT智能物联、云计算技术打造智慧绿色校园,助力实现校园教务管理、教师管理、学籍管理、考勤、信息发布、班级文明建设、校园风采、家校互通等场景功能,打造安全、便捷、绿色的智慧校园。 前后端分离架构 1、使用springbootvue2 2、数据库&#xff…

Day31 46全排列 47全排列II 回溯去重tips 51N皇后 37解数独

46 全排列 给定一个 没有重复 数字的序列,返回其所有可能的全排列。 示例: 输入: [1,2,3]输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ] 排列问题与组合问题的不同之处就在于,没有startIndex,同时需要设置一个used数组…

剩余电流继电器装在哪里?电工必备知识

可实时监测和显示TN-S、TT系统配电线路的剩余电流; 每只剩余电流监测仪最多可监测16个回路的剩余电流,剩余电流监测范围为1mA-30A; 每路剩余电流监测均可设置报警值,报警值的设置范围为5mA-30A。每路剩余电流监测可设置为超值…