Laravel 11 + Vite部署后资源未使用HTTPS的问题求助
我用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

