Laravel+Vite生产环境构建资源无法加载问题求助

问题描述 #

使用Docker部署基于Laravel（搭配Octane与FrankenPHP运行时）、Vite和Tailwind的生产环境应用，已执行npm run build，但访问站点时Tailwind样式未加载。排查网络请求发现，应用仍请求http://[::1]:5173/@vite/client，不符合生产环境预期。

相关配置文件 #

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0', // 确保在Docker中使用时配置正确
        port: 5173,      // Vite默认端口
    },
    build: {
        outDir: 'public/build',
        manifest: true,
    }
});

Dockerfile.prod #

FROM dunglas/frankenphp

# 安装PHP扩展及其他必要包
RUN install-php-extensions \
    pcntl \
    intl \
    redis \
    pgsql \
    pdo_pgsql \
    zip

# 下载并安装Composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

WORKDIR /app

# 安装Node.js（最新版本）
RUN curl -fsSL https://deb.nodesource.com/setup_current.x | bash - && \
    apt-get install -y nodejs && \
    rm -rf /var/lib/apt/lists/*

# 先复制必要文件以利用Docker缓存
COPY package.json package-lock.json /app/

# 安装Node.js依赖
RUN npm install

# 复制剩余应用文件
COPY . /app

RUN composer install --no-dev --prefer-dist --no-progress --no-interaction

# 确保执行artisan命令前.env文件存在
RUN cp .env.example .env && php artisan key:generate

# 构建前端资源（根据实际情况调整命令）
RUN npm run build

RUN php artisan storage:link
# 设置入口点
ENTRYPOINT ["php", "artisan", "octane:frankenphp"]

docker-compose.yml #

version: '3.9'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.prod
    entrypoint: php artisan octane:frankenphp --workers=4 --max-requests=500
    ports:
      - "8000:8000"
    depends_on:
      - db
      - redis
    environment:
      APP_ENV: production
      APP_DEBUG: false
      DB_CONNECTION: pgsql
      DB_HOST: db
      DB_PORT: 5432
      DB_DATABASE: naima
      DB_USERNAME: naima_user
      DB_PASSWORD: naima_pass
      REDIS_HOST: redis
      REDIS_PASSWORD: null
      REDIS_PORT: 6379
      REDIS_CLIENT: predis
      CACHE_STORE: redis
      SESSION_DRIVER: redis

  db:
    image: postgres:14
    container_name: postgres
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: naima_user
      POSTGRES_PASSWORD: naima_pass
      POSTGRES_DB: naima
    volumes:
      - postgres-data:/var/lib/postgresql/data

  redis:
    image: redis:7
    container_name: redis
    ports:
      - "6379:6379"
    command: ["redis-server", "--requirepass", ""]
    volumes:
      - redis-data:/data

volumes:
  postgres-data:
  redis-data:

解决方案 #

• 确认环境变量生效：虽然docker-compose中已设置APP_ENV=production和APP_DEBUG=false，但要确保容器内的.env文件未被覆盖。可进入容器执行cat .env验证，若.env.example中有开发环境配置，需手动调整或替换为生产环境配置。

• 检查Vite构建产物：进入容器执行ls public/build，确认存在哈希命名的静态文件和manifest.json。若缺失，检查npm run build步骤是否报错，可在Dockerfile中添加RUN npm run build --verbose查看构建详情。

• 规范视图资源引用：确保所有视图使用Laravel官方的@vite指令加载资源，示例：

  @vite(['resources/css/app.css', 'resources/js/app.js'])
  

  禁止手动引入http://[::1]:5173/@vite/client，@vite指令会自动根据环境切换资源加载方式。

• 清理Laravel缓存：生产环境下缓存可能导致Vite插件未切换到生产模式，在Dockerfile中添加以下命令：

  RUN php artisan config:cache
  RUN php artisan view:cache
  

  若已构建镜像，可进入容器执行上述命令临时修复。

• 验证Docker构建顺序：当前Dockerfile先复制依赖文件再安装，最后复制项目文件并构建资源，顺序正确，无需调整。若后续修改了前端资源，需重新执行npm run build。

内容的提问来源于stack exchange，提问作者Bayu Febriyono Putra