GitHub Actions执行npm run dev报错，Laravel-Vite插件读取APP_URL失败

尝试将GitHub仓库连接至cPanel，已配置密钥与.github/workflows/main.yml文件，但GitHub Actions运行失败，报错laravel-vite-plugin中出现TypeError，无法读取undefined的replace属性，相关信息如下：

报错信息 #

Run npm run dev

> dev
> vite


  VITE v3.0.2  ready in 397 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.42.2  plugin v0.5.0

/home/runner/work/github-actions-attendancedashboard/github-actions-attendancedashboard/node_modules/laravel-vite-plugin/dist/index.js:108
                        server.config.logger.info(`  ${picocolors_1.default.green('➜')}  ${picocolors_1.default.bold('APP_URL')}: ${picocolors_1.default.cyan(appUrl.replace(/:(\d+)/, (_, port) => `:${picocolors_1.default.bold(port)}`))}`);
                                                                                                                                                                     ^

TypeError: Cannot read properties of undefined (reading 'replace')
    at Timeout._onTimeout (/home/runner/work/github-actions-attendancedashboard/github-actions-attendancedashboard/node_modules/laravel-vite-plugin/dist/index.js:108:166)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
Error: Process completed with exit code 1.

main.yaml配置文件 #

on: 
  push:
    branches:
      - main
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v2

    - name: Setup PHP
      uses: shivammathur/setup-php@v2
      with:
        php-version: 8.1.11

    - name: Cache Composer packages
      id: composer-cache
      uses: actions/cache@v2
      with:
        path: vendor
        key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
        restore-keys: |
          ${{ runner.os }}-php-

    - name: Save state
      run: echo "{name}={value}" >> $GITHUB_STATE

    - name: Set output
      run: echo "{name}={value}" >> $GITHUB_OUTPUT

    - name: Install dependencies
      run: composer install --prefer-dist --no-progress
        
    - name: Update dependencies
      run: composer update

    - name: install npm 
      run:  npm install

    - name: run npm 
      run:  npm run dev       
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@4.3.3
      with:
        server: ftp.sabahloka.com
        username: ${{ secrets.ftp_username }}
        password: ${{ secrets.ftp_password }}
        server-dir: /home/sabahlok/hackathon2.dfa-learning.sabahloka.com/

package.json依赖信息 #

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "chart.js": "^3.8.0",
        "chartjs-adapter-moment": "^1.0.0",
        "flatpickr": "^4.6.13",
        "moment": "^2.29.4"
    }
}

问题原因与解决方法 #

核心原因 #

laravel-vite-plugin v0.5.0会尝试读取APP_URL环境变量用于日志输出，但GitHub Actions的运行环境中未配置该变量，导致appUrl为undefined，调用replace方法时触发TypeError。同时，部署阶段使用npm run dev属于错误操作，dev命令用于启动开发服务器，不适合生产部署场景。

解决步骤 #

1. 配置APP_URL环境变量
   在GitHub仓库的「Settings → Secrets and variables → Actions」中添加名为APP_URL的Secret，值为你的线上应用地址（例如https://hackathon2.dfa-learning.sabahloka.com）。

2. 修改GitHub Actions流程
   在run: npm run dev步骤前注入环境变量，并将dev命令替换为生产构建命令build：

   - name: Set APP_URL environment variable
     run: echo "APP_URL=${{ secrets.APP_URL }}" >> $GITHUB_ENV
   
   - name: Build assets for production
     run: npm run build
   

3. 可选优化

   • 移除冗余的Save state和Set output步骤（当前配置中这两个步骤未实际设置有效内容，无作用）。
   • 升级laravel-vite-plugin到最新版本，新版本增加了未配置APP_URL时的容错处理，避免类似报错。

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