Jenkins React 应用程序构建工作正常，但本地主机无法访问（端口 5173）

Question

我正在 Jenkins 中使用 Vite 运行 React 应用程序，并且构建成功完成，但是当我尝试通过 http://localhost:5173/ 访问该应用程序时，它不起作用。但是，当我使用 Visual Studio Code (VSC) 和 npm run dev 运行该应用程序时，该应用程序成功运行并可通过 http://localhost:5173/ 访问。

• Jenkins 构建日志： 构建日志显示 npm 安装成功。 日志显示依赖安装成功，但没有显示Vite在5173端口运行的输出。

• 詹金斯配置： 我已配置构建步骤以在 Jenkins 计算机上运行 npm install 和 npm run dev 。 GitHub 项目已正确配置，Jenkins 正在拉取最新代码。

• 本地设置： 当我使用 Visual Studio Code 执行 npm run dev 时，该应用程序运行完美。它在 http://localhost:5173/ 上运行良好，没有任何问题。

• 网络配置：Jenkins 机器上没有防火墙问题。 服务器正在运行，但我无法从 Jenkins 机器的浏览器或外部设备访问 http://localhost:5173/。

我尝试过的事情：

• 以管理员身份运行 Jenkins。

• 检查5173端口是否被软件屏蔽。

• 验证 npm run dev 是否正确启动服务器（它在 我的本地机器）。

• 确保 vite.config.js 设置为允许连接 本地主机或任何其他 IP。

vite.config.js：

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0', // Allow external access to localhost
    port: 5173, // Ensure the port is specified
  },
})

Jenkins 控制台输出

由用户 Mohamed Haflan 发起

在工作区内置节点上以SYSTEM构建运行 C:\ProgramData\Jenkins.jenkins\workspace\Note_App_React 的 推荐的 git 工具是：NONE 未指定凭据

git.exe rev-parse --resolve-git-dir C:\ProgramData\Jenkins.jenkins\workspace\Note_App_React.git # timeout=10 从远程 Git 存储库获取更改 git.exe 配置remote.origin.url https://github.com/haflannisthar/React_Note_App.git # timeout=10 从以下位置获取上游更改 https://github.com/haflannisthar/React_Note_App.git git.exe --version # 超时=10 git --version # 'git 版本 2.46.2.windows.1' git.exe fetch --tags --force --progress -- https://github.com/haflannisthar/React_Note_App.git +refs/heads/:refs/remotes/origin/ # 超时=10 git.exe rev-parse "refs/remotes/origin/main^{commit}" # timeout=10 签出修订版 0df60f0cf46eb13486733e7c1466323a7350413b （参考/遥控器/起源/主要） git.exe config core.sparsecheckout # 超时=10 git.exe checkout -f 0df60f0cf46eb13486733e7c1466323a7350413b # timeout=10 提交消息：“Update vite.config.js” git.exe rev-list --no-walk 0df60f0cf46eb13486733e7c1466323a7350413b # timeout=10 [Note_App_React] $ cmd /c call C:\Windows\TEMP\jenkins11469916553165083057.bat

C:\ProgramData\Jenkins.jenkins\workspace\Note_App_React>cd /d C:\ProgramData\Jenkins.jenkins\workspace\Note_App_React

C:\ProgramData\Jenkins.jenkins\workspace\Note_App_React>npm install

截至目前，3秒内审核了453个包裹

129个套餐正在寻求资金运行

npm fund

了解详情

1 个低严重性漏洞

要解决所有问题，请运行：npmauditfix

运行

npm audit

了解详细信息。完成：成功

有人遇到过这个问题吗？是什么阻止我通过 localhost:5173 访问 Jenkins 上的 React 应用程序？

提前感谢您的帮助！

Answer 1

[20/11, 3:36 pm] 👨u200d👨u200d👦：从手动测试的角度来看，我始终拥有所有分配的票证的所有权，而不拒绝任何票证。对于每张票证，我都会积极与相关开发人员和利益相关者合作，通过有效的知识转移（KT）来收集所需的知识。然后，我创建一个结构良好的测试计划，启动测试过程，并确保其在商定的时间表内完成，展示我对交付高质量结果的可靠性和承诺。 [20/11, 3:40 pm] 👨u200d👨u200d👦：从自动化的角度来看，我拥有每张分配的自动化票证，并从分析需求开始。如果需要可重用的方法，我会优先开发它们以确保效率。然后，我继续进行自动化工作，通过比较每个步骤的实际结果和预期结果来保持对质量的高度关注。我确保在规定的时间内完成自动化任务。如果需要额外的时间，我愿意投入额外的时间（包括周末）来满足最后期限。我还寻求高级团队成员的同行评审，以获得对我的代码和方法的反馈，并根据需要通过彻底分析和修改来采纳他们的建议。这反映了我对提供高质量自动化解决方案的承诺。