无法 Dockerize Vite React-Typescript 项目

2023-11-23

我正在尝试对 Vite React-Typescript 样板设置进行 dockerize,但无法连接到容器。

安装了 vite-react-typescript 样板:

npm init vite@latest vite-docker-demo -- --template react-ts

Dockerfile

# Declare the base image
FROM node:lts-alpine3.14
# Build step
# 1. copy package.json and package-lock.json to /app dir
RUN mkdir /app
COPY package*.json /app
# 2. Change working directory to newly created app dir
WORKDIR /app
# 3 . Install dependencies
RUN npm ci
# 4. Copy the source code to /app dir
COPY . .
# 5. Expose port 3000 on the container
EXPOSE 3000
# 6. Run the app
CMD ["npm", "run", "dev"]

以分离模式运行 docker 容器并在主机上打开本地开发端口 3000 的命令:docker run -d -p 3000:3000 vite

vite 实例似乎在容器内运行得很好(docker 日志输出):

> [email protected] dev /app
> vite

Pre-bundling dependencies:
  react
  react-dom
(this will be run only when your dependencies or config have changed)

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 244ms.

但是,当我导航到http://localhost:3000/在 Chrome 中。我看到一个错误表明The connection was reset.

任何解决此问题的帮助将不胜感激!


事实证明我需要配置host到除localhost.

Within vite.config.ts:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  plugins: [reactRefresh()],
})

解决问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法 Dockerize Vite React-Typescript 项目 的相关文章

随机推荐

  • PHP 7.2 中 mcrypt_encrypt 的完全替代方案

    由于 PHP 7 2 不再支持 mcrypt crypt 我正在尝试精确替代该函数 在阅读了许多 SO 答案后 我发现以下代码使用 PHPSECLIB 但它没有生成与 mcrypt 一样的精确加密文本 function encryptRJ2
  • XAML:如何仅在设计模式下更改背景颜色?

    我有一个具有白色文本前景色和透明背景色的控件 稍后此用户控件将被添加到带有真实背景颜色的不同控件中 然而在设计过程中 在VS 2010中控制白色背景上的白色前景 我明显看不到任何东西 无论如何 要在设计时定义不同的颜色吗 我已经尝试过这个
  • 生成二维数组的梯度图

    我有一个二维数组 它将每个点的属性值存储为其元素 f x y f x y 现在我想找到这个数组的梯度 我调查了np gradient但它只给出两个数组作为返回 第一个在 x 方向上具有导数 第二个在 y 方向上具有导数 我想了解如何使用此方
  • 如何在按下按钮时继续执行工作?

    我想在按下按钮时使用 Java 继续执行工作 当释放按钮时 工作应该停止 像这样的东西 Button is pressed for int i 0 i lt 100 i count i print count 我怎样才能实现这个目标 One
  • TypeScript 中必需的泛型类型与推断的泛型类型

    以下泛型类型之间有什么区别 type FnWithRequiredParam
  • 如何获取 Solr 中最后一个索引记录?

    我想知道如何获取 搜索 Apache Solr 中的最后一个索引记录 当现有记录更新时 它会转到所有记录的末尾 所以我想获取最后一个索引记录 thanks 您可以将 时间戳 字段添加到 Solr 架构中 该字段在添加时将当前日期 时间放入记
  • 如何读取带有 Alpha 通道的 gif 动画

    在 MATLAB 中对 gif 动画进行一些测试时 我意识到我无法读取 gif 的透明度 Example gif的原始来源 If I do img cmap imread Finnandjake gif img是 4D 具有冗余的第三维 奇
  • Joi 验证正则表达式或模式

    我想加入使用在变量中定义的正则表达式模式 我有一个变量pattern其中包含正则表达式 IE pattern 0 9 7 0 9 1 这个模式发送到 Joi 模块并想要确认 module exports save body match Jo
  • 无 RDP 时自动发送密钥失败

    我有一个虚拟机 我希望在其上运行自动化任务 即自动化任务在实际虚拟机上运行 VM 是 Windows 2008 服务器 我已将该任务添加到任务计划程序中 当我通过 RDP 登录到计算机时 我可以通过右键单击 运行 来运行该任务 但是 当我的
  • switch语句:default必须是最后一种情况吗?

    考虑以下switch陈述 switch value case 1 return 1 default value fall through case 2 return value 2 该代码可以编译 但它对于 C90 C99 有效 定义的行为
  • 将大图像加载到位图中?

    我正在尝试制作一个显示来自相机的图像的基本应用程序 但是当我尝试使用 sdcard 加载 jpg 时BitmapFactory decodeFile 它返回 null 它不会给出我觉得奇怪的内存不足错误 但完全相同的代码在较小的图像上运行良
  • 文件名包含空格的 Shell 脚本问题

    我知道处理文件名中空格的一种技术是用单引号将文件名引起来 为什么下面的代码 echo sh 可以在包含带空格的文件名的目录上工作 但是程序 ls sh 却不起作用 唯一的区别是 echo 被 ls 替换了 echo sh bin sh fo
  • Mongoose 模型枚举的自定义错误消息

    我想自定义我的 Mongoose 模型生成的验证消息 我倾向于不直接将我的验证 例如必需的 放在模式对象上 因为没有自定义错误消息的自由 例如 sourceAccountId type Schema ObjectId require tru
  • 禁用“单页”网络应用程序的惯性滚动

    我正在尝试创建一个 单页 网络应用程序 其风格与 Gmail Google Docs Evernote 等相同 在这些应用程序中 允许惯性滚动拉动页面是没有意义的 这是我尝试禁用的效果的视频 http tinypic com r 2eb6f
  • AWS ec2 根卷增加:在 aws ubuntu 实例上扩展弹性根卷不起作用

    我已经关注了用于扩展弹性根卷的 aws 文档我的根卷大小从 8 GB 增加到 20 GB 我确认使用lsblk NAME MAJ MIN RM SIZE RO TYPE MOUNTPOINT xvda 202 0 0 20G 0 disk
  • 将 xtable 输出拆分为子表

    有一个关于在有多列时将 xtable 与 Sweave 一起使用的问题 我正在处理的表格大约有 25 列和 5 行 确切的列数未知 因为它是动态的 当我跑步时说 表 1 我得到的表格基本上超过了页面长度 ColA ColB ColC Row
  • XCHG 在 Intel 汇编语言中如何工作?

    如何xchg以下代码中的指令工作 已知arrayD是一个 DWORD 数组 1 2 3 mov eax arrayD eax 1 xchg eax arrayD 4 eax 2 arrayD 2 1 3 为什么后面不是数组 1 1 3xch
  • 正则表达式匹配单个点而不是两个点?

    尝试创建用于电子邮件地址检查的正则表达式模式 这将允许使用点 但如果有多个点相邻 则不允许使用点 应匹配 电子邮件受保护 不应该匹配 电子邮件受保护 现在我知道互联网上有数千个用于电子邮件匹配的示例 因此请不要向我发布包含完整解决方案的链接
  • Matlab - save(int2str(i), x) 不起作用 - 参数必须包含字符串

    我有一个循环正在生成一些数据 在某些情况下我想保存数据 因此我有 save int2str i x 这不起作用并显示以下消息 Error using gt save Argument must contain a string 我究竟做错了
  • 无法 Dockerize Vite React-Typescript 项目

    我正在尝试对 Vite React Typescript 样板设置进行 dockerize 但无法连接到容器 安装了 vite react typescript 样板 npm init vite latest vite docker dem