在GitHub Workflow中运行Vite服务器与Cypress测试失败求助

问题分析 #

从你提供的错误截图和配置来看，Vite开发服务器已经正常启动，但GitHub Actions中的wait-on环节无法检测到服务就绪，核心原因通常是以下几点：

• Vite默认绑定127.0.0.1，在GitHub Actions容器环境中，localhost的网络访问存在限制
• wait-on的默认超时时间过短，未给Vite足够的启动就绪时间
• 配置中多余的build步骤可能占用资源，拖慢服务启动速度

解决方案 #

1. 修改Vite配置，让服务器监听所有接口 #

在项目根目录的vite.config.js中添加server.host配置，确保服务能被容器内的网络访问到：

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

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0', // 监听所有可用网络接口
    port: 5173
  }
})

2. 调整GitHub Actions配置 #

• 移除不必要的build步骤（你用开发服务器启动测试，无需预构建）
• 修改wait-on的目标地址为http://0.0.0.0:5173
• 增加超时时间，避免因容器环境资源限制导致的启动延迟

修改后的.yml配置：

name: Cypress Tests

on:
  pull_request:
    branches:
      - main
      - dev

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Install dependencies
        working-directory: ./app
        run: yarn install

      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          working-directory: ./app
          start: yarn dev
          wait-on: 'http://0.0.0.0:5173'
          wait-on-timeout: 120 # 超时时间设为120秒

3. 额外排查点 #

• 确认package.json中scripts里的dev命令对应vite（避免自定义命令导致启动异常）
• 如果仍有问题，可给wait-on添加--httpTimeout参数延长请求超时，比如：wait-on: 'http://0.0.0.0:5173 --httpTimeout 10000'

内容的提问来源于stack exchange，提问作者lucasfelber