You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel 11 + Vite部署后资源未使用HTTPS的问题求助

Laravel 11 + Vite Docker部署后资源HTTP加载导致混合内容错误

我用Docker部署Laravel 11 + Vite应用,本地Docker Desktop运行正常,但线上部署后CSS、JS等资源以HTTP而非HTTPS加载,触发blocked:mixed-content错误。资源加载逻辑由Vite自动处理,之前用相同配置部署Laravel 8项目时资源能正常用HTTPS,仅Docker配置里PHP版本从8.1改成了8.2,Vite配置完全一致。我试过修改vite.config.js里的base、server、build配置,调整Docker卷,但都没用。.env里的APP_URL已经设为https://myapp.example.com,Apache的SSL、ServerName等配置也确认正确。

我的vite.config.js文件

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/style.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    // base: process.env.APP_URL || '/',
    // server: {
    //     https: true,
    // },
    build: {
        manifest: true,
        outDir: 'public/build',
        emptyOutDir: true,
        rollupOptions: {
            output: {
                assetFileNames: '[name]-[hash][extname]',
            },
        },
    },
});

我的.env文件

APP_NAME=Laravel
APP_ENV=production
APP_KEY=setbutnotshown
APP_DEBUG=true
APP_TIMEZONE=UTC
APP_URL=https://myapp.example.com

我的Dockerfile

# Base image
FROM php:8.2-apache

# Set working directory in the container
WORKDIR /var/www/html

# Install system dependencies
RUN apt-get update && apt-get install -y \
    git \
    g++ \
    curl \
    libzip-dev \
    libjpeg-dev \
    libjpeg62-turbo-dev \
    libfreetype6-dev \
    libpng-dev \
    libwebp-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    unzip \
    && rm -rf /var/lib/apt/lists/*

# Configure GD extension
RUN docker-php-ext-configure gd \
    --with-freetype=/usr/include/ \
    --with-jpeg=/usr/lib/x86_64-linux-gnu \
    --with-webp=/usr/lib/x86_64-linux-gnu

# Install PHP extensions
RUN docker-php-ext-install -j$(nproc) gd pdo_mysql mbstring exif pcntl bcmath zip

# Configure Apache
RUN echo "ServerName laravel-app.local" >> /etc/apache2/apache2.conf
ENV APACHE_DOCUMENT_ROOT=/var/www/html/public
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
RUN a2enmod rewrite headers

# Install Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# Install Node.js (latest LTS version)
RUN apt-get update && curl -sL https://deb.nodesource.com/setup_18.x | bash - \
    && apt-get install -y nodejs \
    && npm install -g npm

# Copy the application files and set permissions
COPY --chown=www-data:www-data . /var/www/html

# Install PHP dependencies
RUN composer install --no-dev --optimize-autoloader

# Install Node.js dependencies and build assets
RUN npm install
RUN npm run build

# Set proper permissions for storage and bootstrap cache
# RUN chown -R www-data:www-data /var/www/html/storage /var/www/html/bootstrap/cache
RUN chown -R www-data:www-data /var/www/html/storage /var/www/html/bootstrap/cache /var/www/html/public

# Expose port 80
EXPOSE 80

# Start Apache in foreground
CMD ["apache2-foreground"]

我的docker-compose.yml

version: '3.8'

services:
  my-app:
    build:
      context: .
    container_name: my-app
    ports:
      - "9005:80"
    volumes:
      - .:/var/www/html
      - ./storage:/var/www/html/storage
      - ./bootstrap/cache:/var/www/html/bootstrap/cache
    env_file:
      - .env

解决方法

1. 让Vite构建时正确读取APP_URL

Laravel Vite插件依赖APP_URL生成资源URL,但构建阶段如果环境变量没传递到位,就会生成HTTP链接。先修改vite.config.js,启用base配置:

base: process.env.APP_URL || '/',

然后在Dockerfile的构建步骤里,确保APP_URL能被Node.js读取到,修改npm run build为:

RUN APP_URL=${APP_URL} npm run build

2. 配置Apache识别HTTPS反向代理

线上环境通常用反向代理(如Nginx、负载均衡)处理SSL,容器内的Apache无法感知原始请求的HTTPS协议,导致Laravel生成HTTP链接。在Dockerfile的Apache配置部分添加:

RUN echo "RequestHeader set X-Forwarded-Proto 'https'" >> /etc/apache2/conf-available/ssl-headers.conf
RUN a2enconf ssl-headers

或者直接在public/.htaccess中添加:

<IfModule mod_headers.c>
    RequestHeader set X-Forwarded-Proto "https"
</IfModule>

3. 避免Docker卷覆盖构建产物

你的docker-compose.yml挂载了整个项目目录到容器,这会导致本地未构建的资源覆盖容器内的Vite构建产物。线上部署时移除整个项目目录的挂载,只保留必要目录:

volumes:
  - ./storage:/var/www/html/storage
  - ./bootstrap/cache:/var/www/html/bootstrap/cache

4. 强制Laravel生成HTTPS链接

在app/Providers/AppServiceProvider.php的boot方法中添加强制HTTPS的逻辑:

public function boot()
{
    if (env('APP_ENV') === 'production') {
        \URL::forceScheme('https');
    }
}

5. 重新构建镜像生效

修改配置后,必须重新构建镜像,避免缓存影响:

docker-compose down
docker-compose build --no-cache
docker-compose up -d

内容的提问来源于stack exchange,提问作者Thbwun

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 16:50:03