502 Nginx - When loading images

[IanMenzies]

Uploading images greater than 5MB is fine, however when displaying them, even after warming the cache and applying filters as stated below, I'm getting a 502 gateway error for approx 5 minutes till the image are processed.

Should be noted that the image urls are generated in the backend and the urls are passed to the frontend via an API. To generate the urls I'm using the below code: $venueImage = $this->filterService->getUrlOfFilteredImage($imageUrl, $filter)

Preconditions

1. Nginx
2. Imagick
3. PHP 7.4 FPM
4. Symfony 5.2.0
5. Aws ECS & S3 & CloudFront

Steps to reproduce

PHP upload.ini file:

    post_max_size=200M
    upload_max_filesize=200M
    memory_limit=512M
    max_execution_time=360
    max_input_time=360

My Nginx conf:

    ## Start: Size Limits & Buffer Overflows ##
    client_body_buffer_size       1024k;
    client_header_buffer_size     1024k;
    client_max_body_size          200M;
    large_client_header_buffers 2 1024k;
    ## END: Size Limits & Buffer Overflows ##

    ## Start: Timeouts ##
    client_body_timeout   60;
    client_header_timeout 60;
    keepalive_timeout     60;
    keepalive_requests    1000;
    send_timeout          60;
    ## End: Timeouts ##

    ## Increase PROXY buffer size ##
    proxy_buffer_size 1024k;
    proxy_buffers 4 1024k;
    proxy_busy_buffers_size 1024k;
    ## Increase PROXY buffer size ##

Configuration settings:

    venue_large_thumb:
      data_loader: venue_images_fs
      quality : 75
      filters :
          auto_rotate: ~
          thumbnail  : { size : [1700, 800], mode : outbound }

    venue_large_background_thumb:
      data_loader: venue_images_fs
      quality: 90
      filters:
          auto_rotate: ~
          downscale  : {max: [1000, 600]}
          background : {color: '#0e0e0e', size: [1700, 800], position: center}

    venue_medium_thumb:
      data_loader: venue_images_fs
      quality: 75
      filters:
          auto_rotate: ~
          thumbnail  : {size: [800, 800], mode: outbound}

    venue_medium_background_thumb:
      data_loader: venue_images_fs
      quality: 90
      filters:
          auto_rotate: ~
          downscale  : {max: [800, 800]}
          background : {color: '#0e0e0e', size: [900, 900], position: center}

    venue_small_thumb:
      data_loader: venue_images_fs
      quality: 75
      filters:
            auto_rotate: ~
            thumbnail  : { size: [640, 385], mode: outbound }

The above configuration works fine until images are greater than 5MB. I've added a cache warmer as shown below in an attempt to improve performance:

    $this->producer->sendCommand(Commands::RESOLVE_CACHE, new ResolveCache($imagePath, $filters));

Expected result

1. Images should load and display

Actual result

1. Server showing 502 and crashing - takes 5 minutes or more for images to process

Any idea on what might be going on here? And is this expected behavior? If I can't resolve this issue is there an alternative solution that wont cause 502 errors.

Example image causing problem

[dbu]

502 means bad gateway. likely this means that php crashes and then nginx returns the 502.

this is not supposed to happen, but no idea why it happens on your system. do you get any logs from php that might explain what happens?