Docker化Laravel应用加载缓慢且CSS无法正常加载求助

Hey there! Let's tackle those two frustrating issues with your Dockerized Laravel app—slow loading and broken CSS. I've run into similar hiccups before, so here's what I'd check and fix step by step:

1. Fix CSS Loading Issues #

The biggest red flag here is your setup uses a php-fpm image directly mapped to port 80. PHP-FPM only handles PHP process execution, not HTTP requests or static files like CSS. You need a web server (like Nginx) to proxy requests properly.

a. Add Nginx to Your Docker Compose Setup #

Update your docker-compose.yml to include an Nginx service that forwards dynamic requests to PHP-FPM and serves static files directly:

version: '3'
services:
  app:
    build: .
    image: xoco/kendozone:local-1.0.0
    volumes:
      - ./:/var/www  # Mount local code for development (remove in production)
    environment:
      - APP_URL=http://localhost  # Match this to your browser's address
  web:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./:/var/www
      - ./nginx.conf:/etc/nginx/conf.d/default.conf  # Custom Nginx config
    depends_on:
      - app

Create an nginx.conf file in your project root to define how Nginx handles requests:

server {
    listen 80;
    root /var/www/public;
    index index.php index.html;

    # Handle Laravel's pretty URLs
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # Forward PHP requests to PHP-FPM
    location ~ \.php$ {
        fastcgi_pass app:9000;  # "app" matches your service name in docker-compose
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    # Cache static assets to speed up future loads
    location ~* \.(css|js|png|jpg|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

b. Verify Static Resource Setup #

• Compile frontend assets: Jump into your app container and run the build command for your CSS/JS:

  docker-compose exec app bash
  npm install && npm run dev  # Use `npm run prod` for production
  

• Check .env configuration: Ensure APP_URL matches the address you use to access the app (e.g., http://localhost). Laravel's asset() and mix() functions rely on this to generate correct resource paths.
• Fix file permissions: Make sure Laravel can write to storage and cache directories:

  docker-compose exec app chown -R www-data:www-data /var/www/public /var/www/storage /var/www/bootstrap/cache
  

2. Fix Slow App Loading #

Slow performance usually ties to missing PHP optimizations or Laravel cache configurations.

a. Enable PHP OPcache #

OPcache caches compiled PHP scripts so the server doesn't recompile them on every request. Update your Dockerfile to add and configure it:

FROM php:7.1.14-fpm
LABEL maintainer="contact@kendozone.com"
LABEL version="1.0.0"
LABEL description="Kendozone is a online tournament webapp coded with PHP / Laravel"
ENV node_version 8.4.0
ENV npm_version 5.7.1
ENV NVM_DIR /.nvm
ENV APP_DIR="/var/www"
ENV APP_PORT="80"

# Install system dependencies and PHP extensions Laravel needs
RUN apt-get update && apt-get install -y \
    git \
    curl \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    unzip

# Install OPcache and other required PHP extensions
RUN docker-php-ext-install opcache pdo_mysql mbstring exif pcntl bcmath gd

# Add OPcache configuration
COPY opcache.ini /usr/local/etc/php/conf.d/opcache.ini

# Install NVM, Node.js, and npm
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash \
    && . "$NVM_DIR/nvm.sh" \
    && nvm install $node_version \
    && nvm alias default $node_version \
    && nvm use default \
    && npm install -g npm@$npm_version

# Set working directory
WORKDIR $APP_DIR

# Fix permissions for Laravel directories
RUN chown -R www-data:www-data $APP_DIR/storage $APP_DIR/bootstrap/cache

Create an opcache.ini file with these optimizations:

opcache.enable=1
opcache.enable_cli=1
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=60
opcache.fast_shutdown=1

b. Optimize Laravel's Internal Caches #

Run these commands inside your app container to cache config, routes, and views—this cuts down on repeated parsing:

docker-compose exec app php artisan config:cache
docker-compose exec app php artisan route:cache
docker-compose exec app php artisan view:cache

c. Fix File System Lag (For Development) #

If you're on Windows or macOS, Docker's default file sharing can be slow. Try:

• Using Docker Volumes instead of direct directory mounts (better for production too)
• Enabling performance optimizations in Docker Desktop (like the "Virtualization framework" or Mutagen sync)

Final Setup Steps #

1. Rebuild your Docker image: docker-compose build
2. Start the services: docker-compose up -d
3. Run the frontend build and Laravel cache commands as outlined above.

That should resolve both your CSS loading and slow performance issues!

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