AWS S3 filesystem CDN

Shopware 6 (English) General Questions (EN)
1

I followed the S3 documentation (https://docs.shopware.com/en/shopware-platform-dev-en/how-to/use-s3-datastorage) but is not very complete
I manage to store the resources in the AWS bucket but it has some performance issues
It does not compress the files

This is without the CDN

And this is with the CDN active

736×232 23.6 KB

 

This is my code in config/packages/shopware.yml:

shopware:
    filesystem:
      public:
        url: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
      theme:
        url: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
      asset:
        url: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
      sitemap:
        url: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private

 

Do I miss something?

It pushes my site performance (lighthouse) like 20points down

1 Like
2

Hello,

have you found a solution for your problem?

Would be glad to know.

Greetings

3

Yes, I found the reason and the solution

Feel free to find me in Slack „shopwarecommunity.slack.com“ @ TaiKamilla

The problem was that my SW config file config/packages/shopware.yml for the CDN and the CDN was incomplete.

The problem is that I was using the ‚url: „https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%“‘

and that address is direct to the bucket and does not accept headers, you need to do it to the cloudfront service instead 

SOLUTION  

For this, you need an AWS bucket and an AWS cloudfront to the bucket, make sure you can access the files from the bucket from the cloudfront provided URL

Then

  1. Go to the .env file on your SW installation and add this

    AWS_DOMAIN=„CLOUDFRONT_PROVIDED_URL.com“
    AWS_ACCESS_KEY_ID=HERE_YOUR_AWS_ACCESS_KEY_ID
    AWS_SECRET_ACCESS_KEY=HERE_YOUR_AWS_SECRET_ACCESS_KEY
    AWS_BUCKET=THE_NAME_OF_YOUR_BUCKET

2 Then go to config/packages/shopware.yml and replace the content with this (feel free to modify „region“,  „endpoint“ and „endpoint“ or anything else)

shopware:
    filesystem:
      public:
        url: "https://%env(AWS_DOMAIN)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
      private:
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "private" # On private adapters need this to be private
      theme:
        url: "https://%env(AWS_DOMAIN)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
      asset:
        url: "https://%env(AWS_DOMAIN)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
      sitemap:
        url: "https://%env(AWS_DOMAIN)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private

 

1 Like
4

Hello,

ah, i see. Thank you!

But as far as i can see there are no variables for „AWS_SECRET_ACCESS_KEY“ and „AWS_ACCESS_KEY_ID“ in the shopware.yml file. Or is it not necessary to set these at options or wherever?

Is it not possible like this?!

shopware:
    filesystem:
      public:
        url: "https://%env(AWS_DOMAIN)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private
              credentials:
                key: "%env(AWS_ACCESS_KEY_ID)%"
                secret: "%env(AWS_SECRET_ACCESS_KEY)%"

Thank you for your answers!!!

5

Hey, did you try my solution anyway?

“AWS_SECRET_ACCESS_KEY” and “AWS_ACCESS_KEY_ID” it does not show in shopware.yml
but is an SW naming for the bucket credentials in /vendor/aws/aws-sdk-php/src/Credentials/CredentialProvider.php

755×550 74.9 KB

6

Hello,

yes, i tried it and it works. I was just wondering about the fact, that i don’t need the Access-Key.

Thank you! You helped me a lot! :slight_smile:

Feel free to find me in Slack „shopwarecommunity.slack.com“ @ TaiKamilla

Btw. i am not invited :wink:

Best regards! 

1 Like
7

@musikdiscount24‍ You can join with https://slack.shopware.com

2 Likes
8

You don’t need to be invited
Just go here https://slack.shopware.com
and create an account

Also would be great if you can mark the answer as solved  Wink

1 Like
9

Hi @musikdiscount24‍

I have a question since you use an AWS CDN

I am experiencing slow down on theme and plugin installation

without the CDN the theme compilation takes around 30-40 seconds

but with the CDN is like 180 seconds (3min)

are you experiencing a slow down in this?

10

Hi Yafar_iSi,

i have tried your solution but it doesn’t work.

In the .env file:
Should the parameter be inside ‚xxx‘ or without ‚‘?

like:
AWS_DOMAIN=‚XXX‘
AWS_ACCESS_KEY_ID=‚XXX‘
AWS_SECRET_ACCESS_KEY=‚xxx‘
AWS_BUCKET=‚xxx‘

are these parameters correct?

public:
        url: "https://%env(AWS_DOMAIN)%"
        type: "amazon-s3"
        config:
            bucket: "%env(AWS_BUCKET)%"
            region: "eu-central-1"
            endpoint: "https://s3.eu-central-1.amazonaws.com/%env(AWS_BUCKET)%"
            root: "/"
            options:
              visibility: "public" # On private adapters need this to be private

Best regards!

11

Thank you for all your hints.
I’d had also some Issues connecting a Shopware 6.5.6.1 to AWS S3 / CloudFront

I need the following adaptions to config/packages/z-shopware.yml in comparison to the one of @Yafar_iSi :

endpoint: "https://s3.eu-central-1.amazonaws.com"

if I add the bucket as proposed the bucket name is twice in the url and does not work

           root: ""

If I add „/“ for root I get a directory with the name „/“ in the root of my s3 bucket with all stuff inside…

Beside configuring the CNAMES for S3 and CloudFront I had some CORS issues.

For CloudFront I use this settings for the behaivor:

image
image1662×1134 106 KB

and added a custom Header to the S3 origin:

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

For the S3 Bucket I have this access policies:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObjectVersionAcl",
                "s3:GetObjectVersionTorrent",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:GetObjectTorrent",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::static.shirt-helden.shop/*"
        }
    ]
}

and this CORS settings:

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

With all my tests, sometimes the directories and their content like bundles, theme, thumbnail got created - some times not.

These commands helped to get everything up and running:
./bin/console cache:clear
./bin/console theme:compile
./bin/console media:generate-thumbnails --strict -v
./bin/console system:update:finish

Perhaps this can help someone having the same issues as me - took me about an day to figure this all out :open_mouth:

2 Likes