Issue with Reading Images from S3 Bucket in WordPress Deployed on Elastic Beanstalk

Question

I have deployed a WordPress website on AWS Elastic Beanstalk, with image storage handled by an S3 bucket. However, I am encountering a persistent problem where images appear blank. I checked in the browser console and there is no error - all returning "200" status code. I have the bucket policy as shown below:

```
{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/*"
        },
        {
            "Sid": "eb-af163bf3-d27b-4712-b795-d1e33e331ca4",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::4177xxxxxxxx:role/PinoyAgriSite-Role"
            },
            "Action": [
                "s3:ListBucket",
                "s3:ListBucketVersions",
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": [
                "arn:aws:s3:::elasticbeanstalk-ap-southeast-1-4177xxxxxxxx",
                "arn:aws:s3:::elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/resources/environments/*",
                "arn:aws:s3:::elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/*"
            ]
        },
        {
            "Sid": "eb-58950a8c-feb6-11e2-89e0-0800277d041b",
            "Effect": "Deny",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:DeleteBucket",
            "Resource": "arn:aws:s3:::elasticbeanstalk-ap-southeast-1-4177xxxxxxxx"
        }
    ]
}
```
In the debug.log file of WordPress, I have the following error:

```
[07-Oct-2023 05:06:32 UTC] PHP Notice:  getimagesize(): Error reading from s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/uploads/2023/10/guest-details.png! in /var/app/current/wp-includes/media.php on line 5307
[07-Oct-2023 05:06:33 UTC] PHP Notice:  exif_imagetype(): Error reading from s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/uploads/2023/10/guest-details.png! in /var/app/current/wp-includes/functions.php on line 3268
[07-Oct-2023 05:06:33 UTC] PHP Notice:  getimagesize(): Error reading from s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/uploads/2023/10/guest-details.png! in /var/app/current/wp-includes/media.php on line 5305
[07-Oct-2023 05:06:33 UTC] PHP Notice:  exif_imagetype(): Error reading from s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/uploads/2023/10/guest-details.png! in /var/app/current/wp-includes/functions.php on line 3268
[07-Oct-2023 05:06:33 UTC] PHP Notice:  getimagesize(): Error reading from /tmp/guest-details-qaQ4O2.tmp! in /var/app/current/wp-includes/media.php on line 5307
[07-Oct-2023 05:06:33 UTC] PHP Notice:  exif_imagetype(): Error reading from /tmp/guest-details-qaQ4O2.tmp! in /var/app/current/wp-includes/functions.php on line 3268
[07-Oct-2023 05:06:33 UTC] PHP Notice:  getimagesize(): Error reading from /tmp/guest-details-qaQ4O2.tmp! in /var/app/current/wp-includes/media.php on line 5305
[07-Oct-2023 05:06:33 UTC] PHP Notice:  exif_imagetype(): Error reading from /tmp/guest-details-qaQ4O2.tmp! in /var/app/current/wp-includes/functions.php on line 3268
[07-Oct-2023 05:06:33 UTC] PHP Notice:  getimagesize(): Error reading from s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/uploads/2023/10/guest-details.png! in /var/app/current/wp-includes/media.php on line 5307
[07-Oct-2023 05:06:33 UTC] PHP Notice:  exif_imagetype(): Error reading from s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/S3-Uploads-Media/uploads/2023/10/guest-details.png! in /var/app/current/wp-includes/functions.php on line 3268

```
The IAM user role has full S3 access. I could not trace where the issue is coming from S3 because I have the permissions. Please help and thank you.

Answer

Have you enabled S3 server access logging to check if there's an access to S3. It could help you identify if this is a client side issue or permission issue from beanstalks.

Secondly, instead of accessing from S3 directory(s3://elasticbeanstalk-ap-southeast-1-4177xxxxxxxx/), have you tried to use the pre-signed url/signed url by cloudfront and access from browser yourself. If that works, your website should be able to read that file

Issue with Reading Images from S3 Bucket in WordPress Deployed on Elastic Beanstalk

Relevanter Inhalt