using-aws-s3-buckets-cloudfront-distribution-with-craft-cms

这篇具有很好参考价值的文章主要介绍了using-aws-s3-buckets-cloudfront-distribution-with-craft-cms。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Using a cloud stor­age sys­tem like AWS S3 with a CDN dis­tri­b­u­tion can be a con­ve­nient and inex­pen­sive way to store your assets. Here’s how to set it up right.

oo00oo.s3.ap-east-1.amazonaws.com,aws,云计算,java

Assets like images, PDFs, and oth­er files are often an impor­tant part of the “con­tent” that a Con­tent Man­age­ment Sys­tem handles.

Although this arti­cle was writ­ten with Craft CMS in mind, the vast major­i­ty of the arti­cle applies gener­i­cal­ly to any CMS or website.

Craft CMS has some fan­tas­tic native han­dling of said assets, which by default are stored in fold­ers on your server.

How­ev­er, it can be con­ve­nient to use a cloud-based stor­age sys­tem like Ama­zon Web Ser­vices (AWS) Sim­ple Stor­age Ser­vice (S3):

  • You’ll nev­er run out of disk space
  • Your assets are inher­ent­ly backed up & stored off-site
  • Your assets can go to long-term back­up in AWS Glac­i­er easily
  • You can lever­age a Con­tent Deliv­ery Net­work (CDN) in the form of Cloud­front
  • Elim­i­nates the need to sync assets between local dev, stag­ing, and pro­duc­tion environments
  • It’s cheap (or even free) & scalable

There are oth­er advan­tages as well, but we’ll just assume you’re on-board, and get right into how to set it up.

LINKSETTING UP S3

S3 stores files in “buck­ets”, and while you can serve assets direct­ly from an S3 buck­et, I’d strong­ly rec­om­mend against it.

Don’t serve assets directly from S3 buckets

S3 buck­ets are intend­ed for asset stor­age, not serv­ing assets. It’ll work, but you’ll only be serv­ing them out of one geo­graph­ic region (wher­ev­er your S3 buck­et was cre­at­ed), and it real­ly was­n’t designed to for that.

Instead, use AWS Cloud­Front as your Con­tent Deliv­ery Net­work (CDN) that actu­al­ly serves up your assets.

Here’s what it looks like conceptually:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjGgikUB-1669738403971)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQAAAQABAAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAANABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAwAG%2F8QAIBAAAgIBBAMBAAAAAAAAAAAAAQIDBAAREjFRExQhcf%2FEABUBAQEAAAAAAAAAAAAAAAAAAAAB%2F8QAGhEAAgMBAQAAAAAAAAAAAAAAAQIAETESIf%2FaAAwDAQACEQMRAD8A1lxoblSREsqgVgGYHg9ZQv6lWvGh84Ztu%2FcBz%2B4y0ayo6rCoVzqw7OFZrqqwLGEVVkHwrrlJN%2BZCIt9Ns%2F%2FZ)]

AWS S3 + Cloud­Front Overview

The idea is that when a per­son loads one of your web pages with an image on it, the image will point to a Cloud­Front URL.

If that image is in the cache, it’ll return it from a CDN Edge serv­er that is geo­graph­i­cal­ly near the per­son load­ing the page. This makes it quick, with low latency.

If the image isn’t in the cache, Cloud­Front pulls it from your S3 buck­et, returns it to the per­son, and prop­a­gates the image to the CDN Edge locations.

S3 Buckets shouldn’t be publicly accessible

The rule of thumb here is that S3 buck­ets aren’t pub­licly acces­si­ble. Instead, Cloud­Front is giv­en per­mis­sion to pull assets from the S3 buckets.

That said, let’s get into set­ting it all up.

LINKSTEP 1: HAVE AN AWS ACCOUNT

If you don’t already have an AWS account, you’re going to need one. Go to your AWS Con­sole and either log in to your account, or cre­ate a new account.

If you want the billing to go direct­ly to your clients, you can either cre­ate an AWS account for them, or use their exist­ing account.

If you fac­tor in the rel­a­tive­ly low cost of S3 into your main­te­nance con­tracts or the like, you can just have one account for all of your clients.

If you don’t have one already, you should also set up an admin account for AWS now.

LINKSTEP 2: CREATE AN S3 BUCKET

Now that we have an AWS account, the first thing we’re going to do is set up our S3 buck­et. We’re going to use kebab-case for all of our AWS enti­ty names, and we’ll use the format:

project-name + - + descriptor

We’ll be set­ting up S3 + Cloud­Front for devMode.fm, so the project name is devmode, and the buck­et name is devmode-bucket.

In your AWS Con­sole, click on Ser­vices → S3 → + Cre­ate Buck­et. Fill in the name of the buck­et, and click through to the end (we won’t be chang­ing any set­tings from the default oth­er than the name):

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pAgYlftu-1669738403978)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAALABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAgAD%2F8QAIBAAAQMCBwAAAAAAAAAAAAAAAQACAwRBERITITFRgf%2FEABQBAQAAAAAAAAAAAAAAAAAAAAP%2FxAAXEQADAQAAAAAAAAAAAAAAAAAAARJR%2F9oADAMBAAIRAxEAPwDF9VMN9SyLauYuGLzz0hYKaBn9CanoMrD%2F2Q%3D%3D)]

Cre­at­ing an S3 bucket

Note that for Per­mis­sions, it’s set to Block *all* pub­lic access. As dis­cussed above, our S3 buck­et will be pri­vate, and the Cloud­Front dis­tri­b­u­tion will be public.

For most projects, I cre­ate one buck­et, and use sub-fold­ers in the buck­et for dif­fer­ent Asset Vol­umes. You can cer­tain­ly also cre­ate more than one buck­et if that’ll work bet­ter for you.

LINKSTEP 3: CREATE A CUSTOM POLICY

Next we’ll set up a cus­tom Iden­ti­ty and Access Man­age­ment (IAM) pol­i­cy to con­trol access. IAM poli­cies can be attached to any AWS object, and they con­trol who can access what, with some fair­ly fine-grained permissions.

We’re using a cus­tom pol­i­cy because we want to grant as lit­tle access as pos­si­ble, but still have it work correctly.

This isn’t a fancy watch. We don’t add complications just because they look cool

From your AWS Con­sole, click on Ser­vices → IAM → Poli­cies → Cre­ate Pol­i­cy.

Click on the JSON tab, and then paste this in:

custom policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "acm:ListCertificates",
                "cloudfront:GetDistribution",
                "cloudfront:GetStreamingDistribution",
                "cloudfront:GetDistributionConfig",
                "cloudfront:ListDistributions",
                "cloudfront:ListCloudFrontOriginAccessIdentities",
                "cloudfront:CreateInvalidation",
                "cloudfront:GetInvalidation",
                "cloudfront:ListInvalidations",
                "elasticloadbalancing:DescribeLoadBalancers",
                "iam:ListServerCertificates",
                "sns:ListSubscriptionsByTopic",
                "sns:ListTopics",
                "waf:GetWebACL",
                "waf:ListWebACLs"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetBucketLocation",
                "s3:ListAllMyBuckets"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::REPLACE-WITH-BUCKET-NAME"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:*"
            ],
            "Resource": [
                "arn:aws:s3:::REPLACE-WITH-BUCKET-NAME/*"
            ]
        }
    ]
}

custom policy

Make sure you replace REPLACE-WITH-BUCKET-NAME with the name of the buck­et we cre­at­ed in Step 2 (in our case devmode-bucket), in both places.

Then click on Review Pol­i­cy, and give your pol­i­cy a name (in our case devmode-policy) and descrip­tion, then click on Cre­ate Pol­i­cy:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCTGlRcL-1669738403989)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAALABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAQIG%2F8QAHBAAAgICAwAAAAAAAAAAAAAAAQIAEQMhEhNh%2F8QAFAEBAAAAAAAAAAAAAAAAAAAAAP%2FEABQRAQAAAAAAAAAAAAAAAAAAAAD%2F2gAMAwEAAhEDEQA%2FAN2zcWoXHsB0VO%2FInYBkZmKJamjA%2F9k%3D)]

Cre­at­ing an IAM policy

LINKSTEP 4: CREATE A GROUP

Instead of attach­ing the IAM pol­i­cy we cre­at­ed to a buck­et or a user, we’re going to cre­ate a group, and attach it to the group.

The IAM policy gets attached to the group

We’re doing this because it makes it triv­ial to move users in and out of the group, and the group is what is con­trol­ling access permissions.

You also then won’t be out of luck if you some­how lose the user cre­den­tials, you can just cre­ate a new user and assign it to the group.

From your AWS Con­sole, click on Ser­vices → IAM → Groups → Cre­ate New Group, and give your group a name (in our case devmode-group).

At the Attach Pol­i­cy screen, search for the pol­i­cy we cre­at­ed in Step 3, and check it and click Next Step:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ap9EFMJr-1669738403991)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAAKABADASIAAhEBAxEB%2F8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEDBv%2FEABkQAQEBAAMAAAAAAAAAAAAAAAEAAxJRYf%2FEABQBAQAAAAAAAAAAAAAAAAAAAAD%2FxAAUEQEAAAAAAAAAAAAAAAAAAAAA%2F9oADAMBAAIRAxEAPwDfcTqcU91MlFHyD%2F%2FZ)]

Cre­at­ing a group

Then click on Cre­ate Group to cre­ate your new group.

LINKSTEP 5: CREATE A USER

Next we’re going to cre­ate a user, and assign it to the group we just cre­at­ed. The user we cre­ate will be a gener­ic project user, rather than an actu­al person.

From your AWS Con­sole, click on Ser­vices → IAM → Users → Add user, and give your user a name (in our case devmode-user). Also check only the Pro­gra­mat­ic access check­box under Access type:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZioFDGZF-1669738403993)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAANABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAgEG%2F8QAGhABAAIDAQAAAAAAAAAAAAAAAQACESFBMf%2FEABQBAQAAAAAAAAAAAAAAAAAAAAD%2FxAAUEQEAAAAAAAAAAAAAAAAAAAAA%2F9oADAMBAAIRAxEAPwDdq044zzcVUXzcckD%2F2Q%3D%3D)]

Cre­at­ing a user: details

This ensures that using these cre­den­tials, there’s no AWS Man­age­ment Con­sole access. For that, you’ll use your reg­u­lar admin account & credentials.

Click on Next: Per­mis­sions, then add the user to the group we cre­at­ed in Step 4:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hiE5LvU-1669738404009)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAANABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAQMG%2F8QAGxABAAMBAAMAAAAAAAAAAAAAAQACESExUYH%2FxAAUAQEAAAAAAAAAAAAAAAAAAAAA%2F8QAFBEBAAAAAAAAAAAAAAAAAAAAAP%2FaAAwDAQACEQMRAD8A3NVN21vPqJc49fkoW1TIwP%2FZ)]

Cre­at­ing a user: permissions

Then click on Next: Tags (we don’t set any tags here), then click on Next: Review:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o5JJki9R-1669738404012)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAANABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAgAG%2F8QAGxAAAwACAwAAAAAAAAAAAAAAAAERITFBcYH%2FxAAUAQEAAAAAAAAAAAAAAAAAAAAA%2F8QAFBEBAAAAAAAAAAAAAAAAAAAAAP%2FaAAwDAQACEQMRAD8A3absVnQsc1%2BC0QH%2F2Q%3D%3D)]

Cre­at­ing a user: review

Then click on Cre­ate User. You’ll be tak­en to a screen where you can see your Access key ID and Secret access key:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ia2gZTfC-1669738404018)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAAGABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAAIG%2F8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIAAxEiMSH%2FxAAUAQEAAAAAAAAAAAAAAAAAAAAA%2F8QAFBEBAAAAAAAAAAAAAAAAAAAAAP%2FaAAwDAQACEQMRAD8A3IJydiPeSEvV7Gr2JU4OeRED%2F9k%3D)]

Cre­at­ing a user: credentials

Click on Down­load .csv to down­load a CSV file that has your cre­den­tials in it. You will need these cre­den­tials to access your S3 buck­et, and this is the only time you’ll be able to retrieve them.**
**

LINKSTEP 6: CREATE A CLOUDFRONT DISTRIBUTION

Now we need to cre­ate a Cloud­Front Dis­tri­b­u­tion that will be act­ing as our CDN, and actu­al­ly deliv­er­ing our assets to the users who request them.

From your AWS Con­sole, click on Ser­vices → Cloud­Front → Cre­ate Dis­tri­b­u­tion, and click on the Get Start­ed but­ton below the Web heading.

Alter the fol­low­ing settings:

  • Ori­gin domain — choose the ori­gin for the S3 buck­et we cre­at­ed in Step 2

  • S3 buck­et access

    • select

      Yes use OAI (buck­et can restrict access to only CloudFront)

      • click Cre­ate New OAI, give it a name, save it, select it
    • Buck­et pol­i­cy

      • select Yes, update the buck­et policy
  • Com­press object automatically

    • select Yes
  • View­er Pro­to­col Pol­i­cy — Redi­rect HTTP to HTTPS

  • Allowed HTTP Meth­ods — GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

  • Cache key and ori­gin requests

    • select

      Cache pol­i­cy and ori­gin request pol­i­cy

      (rec­om­mend­ed)

      • Cache pol­i­cy

        • select Cachin­gOp­ti­mized

N.B.: For your buck­et to work with Cloud­Front, the name must con­form to DNS nam­ing require­ments. For Regions launched in 2019 or lat­er, that for­mat is: bucket-name.s3.region.amazonaws.com

Here’s a full screen­shot for the set­tings we’re using for devMode.fm:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jQcHpd9k-1669738404024)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQEAYABgAAD%2F%2FgA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2ODApLCBxdWFsaXR5ID0gNTAK%2F9sAQwAQCwwODAoQDg0OEhEQExgoGhgWFhgxIyUdKDozPTw5Mzg3QEhcTkBEV0U3OFBtUVdfYmdoZz5NcXlwZHhcZWdj%2F9sAQwEREhIYFRgvGhovY0I4QmNjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2Nj%2F8AAEQgALQAQAwEiAAIRAQMRAf%2FEAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC%2F%2FEALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29%2Fj5%2Bv%2FEAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC%2F%2FEALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5%2Bjp6vLz9PX29%2Fj5%2Bv%2FaAAwDAQACEQMRAD8A7mNQCcKv4DmpNo9KiVfmOPX1%2FwDr1NzjqKAGRnqAD%2BdP59P1pkTdQT0PFSHpQBChO4jI69OalFMReSePyp9AH%2F%2FZ)]

Cre­at­ing a Cloud­Front Distribution

Then click on Cre­ate Dis­tri­b­u­tion.

You’ll be tak­en to a strange “Cloud­Front Pri­vate Con­tent Get­ting Start­ed” page; this isn’t an error page, and there aren’t any more steps to take.

We just need to grab a cou­ple of set­tings from our new­ly cre­at­ed Cloud­Front distribution.

From your AWS Con­sole, click on Ser­vices → Cloud­Front → then click on the Cloud­Front dis­tri­b­u­tion we just created:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVPtpKKF-1669738404028)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAAKABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAAAgMG%2F8QAHhAAAQQCAwEAAAAAAAAAAAAAAQACAxESIQQyYXH%2FxAAUAQEAAAAAAAAAAAAAAAAAAAAA%2F8QAFBEBAAAAAAAAAAAAAAAAAAAAAP%2FaAAwDAQACEQMRAD8A3E5EeOJok7KcdOFh2XtockbZ9Vm9Qg%2F%2F2Q%3D%3D)]

Cloud­Front Dis­tri­b­u­tion Settings

We’re going to need the Dis­tri­b­u­tion ID and Domain Name set­tings, so copy them down somewhere.

We’re all done with the AWS S3 + Cloud­Front setup!

LINKSTEP 7: CONFIGURE YOUR ASSET VOLUMES IN CRAFT CMS

Next we need to con­fig­ure Craft CMS to use our new S3 buck­et set­up. If you’re using some­thing oth­er than Craft CMS, you’ll need to fill in the anal­o­gous settings.

The key point to remem­ber is that the pub­lic URL will be our Cloud­Front dis­tri­b­u­tion URL (in our case https://dnzwsrj1eic0g.cloudfront.net); make sure you add the https:// pro­to­col to it.

First, we’ll need to install the first-par­ty Ama­zon S3 plu­g­in.

Next we’ll need to set up our Asset Vol­umes. I use Envi­ron­ment Vari­ables in my .env file to store all of my secrets, so they aren’t in the data­base, and the don’t end up in Git via Project Con­fig:

.env file environment variables

# S3 settings
S3_KEY_ID=XXXXXXXXXX
S3_SECRET=XXXXXXXXXX
S3_BUCKET=devmode-bucket
S3_REGION=us-east-2

# CloudFront settings
CLOUDFRONT_URL=https://dnzwsrj1eic0g.cloudfront.net
CLOUDFRONT_DISTRIBUTION_ID=E17SKV1U1OTZKW
CLOUDFRONT_PATH_PREFIX=

.env file environment variables

In the Craft CMS CP, go to Set­tings → Assets → New vol­ume, and fill in the vol­ume set­tings as shown:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0aOZa6xg-1669738404033)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAHAAcAAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAAbABADASIAAhEBAxEB%2F8QAFwABAAMAAAAAAAAAAAAAAAAAAgEDBv%2FEABwQAAICAgMAAAAAAAAAAAAAAAABAgMRMTJBgf%2FEABQBAQAAAAAAAAAAAAAAAAAAAAD%2FxAAUEQEAAAAAAAAAAAAAAAAAAAAA%2F9oADAMBAAIRAxEAPwDdQrjjQnVFrDRMOOxIAQ8GV19jA%2F%2FZ)]

Craft CMS Asset Vol­ume settings

Note that Buck­et has been set to Man­u­al so we can use our envi­ron­ment vari­ables, and we’ve man­u­al­ly added episodes to Sub­fold­er.

Also note that we have turned Make Uploads Pub­lic OFF. If you enable it, it will set a man­u­al ACL on your S3 assets to allow pub­lic access, which isn’t what we want. We want pri­vate S3 assets with pub­lic access through Cloud­Front only

If you’re using Project Con­fig, your project.yaml will end up look­ing like the following:

project.yaml

  e69c8edb-d562-4367-9a05-91a6fd2c7d99:
    name: 'Devmode Episodes'
    handle: devmodeEpisodes
    type: craft\awss3\Volume
    hasUrls: true
    url: $CLOUDFRONT_URL
    settings:
      subfolder: episodes
      keyId: $S3_KEY_ID
      secret: $S3_SECRET
      bucketSelectionMode: manual
      bucket: $S3_BUCKET
      region: $S3_REGION
      expires: '3 months'
      makeUploadsPublic: ''
      storageClass: ''
      cfDistributionId: $CLOUDFRONT_DISTRIBUTION_ID
      cfPrefix: $CLOUDFRONT_PATH_PREFIX
      autoFocalPoint: ''
    sortOrder: 4

project.yaml

Look, mah, no secrets!

Then we can upload an image to our new Asset Volume:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v0fiIRer-1669738404045)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAALABADASIAAhEBAxEB%2F8QAFgABAQEAAAAAAAAAAAAAAAAABQQH%2F8QAIxAAAgIBAgYDAAAAAAAAAAAAAQIDBAUAEgYREyFhcRRBUf%2FEABUBAQEAAAAAAAAAAAAAAAAAAAAB%2F8QAFREBAQAAAAAAAAAAAAAAAAAAAAH%2F2gAMAwEAAhEDEQA%2FAEeC1%2BZj5DOkcuwqqlgOw2%2BtN5KjAMbaIgiBETnmFH4fGs1wubyNGu6VbJjUkEjYp%2BvI1bY4mzEleRHuEqykEdNe45etWj%2F%2F2Q%3D%3D)]

Uploaded Image in the Craft CMS CP

And we can ver­i­fy that the image is indeed com­ing from our Cloud­Front dis­tri­b­u­tion URL:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nz8YSmL4-1669738404049)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQIAOQA5AAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAANABADASIAAhEBAxEB%2F8QAFwAAAwEAAAAAAAAAAAAAAAAAAQIFBv%2FEACEQAAIBBAICAwAAAAAAAAAAAAIDAQAEESEFBhJBEyIx%2F8QAFAEBAAAAAAAAAAAAAAAAAAAAAP%2FEABQRAQAAAAAAAAAAAAAAAAAAAAD%2F2gAMAwEAAhEDEQA%2FAJ3XXOu7eYZiRXgYkVjqMe9U3ZXMtLZfwNEgcOC8kjExrfqs%2FwAfy7rBRrVGjn7b%2FaPIcu6%2FStbRGBXGBxQf%2F9k%3D)]

Uploaded Image Cloud­Front dis­tri­b­u­tion URL

LINKFILL YOUR BUCKETS

That’s all you need to start enjoy­ing the ben­e­fits of cloud stor­age in S3, and Cloud­Front as a glob­al Con­tent Deliv­ery Network.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QWvRKv9E-1669738404053)(data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQAAAQABAAD%2F2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P%2F2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P%2FwAARCAAJABADASIAAhEBAxEB%2F8QAFQABAQAAAAAAAAAAAAAAAAAAAgX%2FxAAjEAACAgEACwAAAAAAAAAAAAABAwIEABESExQiMTJBUWFx%2F8QAFQEBAQAAAAAAAAAAAAAAAAAABAX%2FxAAcEQABBAMBAAAAAAAAAAAAAAARAAECEwMEIeH%2F2gAMAwEAAhEDEQA%2FAKD1XC5a6yxokDrSPKPg4aqrh229rEBE8PvLKu2G10n6MkUwbXI76ntllaCv%2F9k%3D)]

This whole man­u­al set­up can be auto­mat­ed via an AWS Cloud­For­ma­tion stack… but that’s left as an exer­cise for the read­er (or maybe anoth­er article).

Thanks to all around great guy Jonathan Melville of CodeMDD.io for this help with this article.

Hap­py uploading!文章来源地址https://www.toymoban.com/news/detail-766546.html

FURTHER READING

  • Setting Up Your Own Image Transform Service
  • Creating a Reverse Proxy for Partytown with AWS Cloudfront
  • Post-Mortem: Applied Image Optimization

到了这里,关于using-aws-s3-buckets-cloudfront-distribution-with-craft-cms的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AWS CloudFront + Route53 + EC2 + Certificate Manager

    先理解它是怎么运转的 用户请求Route53解析到CloudFront,CloudFront解析EC2也就是资源。 了解了运作,接下来就一步步实现 EC2是服务器,并不是资源,他的资源其实就是URL地址 下面我们先找到EC2的URL资源地址,资源其实就是数据、图片、文件这些东西 为了排除干扰,这里先不设

    2024年04月16日
    浏览(52)
  • AWS 专题学习 P8 (ECS、EKS、Lambda、CloudFront、DynamoDB)

    专题内容总览和系列博客目录 https://blog.csdn.net/weixin_40815218/article/details/135590291 辅助资料( PDF ) https://download.csdn.net/download/weixin_40815218/88741566 Docker 是一个用于部署应用程序的软件开发平台 Docker 容器可以在任何操作系统上运行,应用程序运行在容器中 应用程序运行过程相同,

    2024年01月21日
    浏览(38)
  • AWS S3 bucket 的 ACL 控制

    在新的 AWS S3 控制中,启用了一个默认的配置。 这个默认的配置能够阻止用户的访问。 首先需要对 Object 所有者进行修改。 在打开的界面中,选择 ACLs 启用。 然后选择选项。   然后单击保存。 随后,就可以对 ACL 进行编辑了。 通常可以通过这个配置来完成对参考的默认访问

    2024年02月13日
    浏览(35)
  • 使用亚马逊(AWS)云服务在S3上实现图片缩放功能(CloudFront/S3[AccessPoint/LambdaAccessPoint])

    亚马逊云服务中的S3对象存储功能和国内阿里云的oss对象存储使用基本一致。但是涉及到存储内容处理时,两家有些差别。 比如:对于云存储中的图片资源,阿里云比较人性化对于基本的缩放裁剪功能已经帮我们封装好了,只需要在url地址后面拼接参数即可,但是亚马逊S3存

    2024年02月16日
    浏览(40)
  • azure-cognitiveservices-speech api error while using with AWS Lambda

    1.在mac上安装 正常运行没有问题,服务部署到docker 容器中后调用Azure语音评估服务报错 Cancellation Reason 初始化平台失败 2.解决方案,变更 azure-cognitiveservices-speech 版本为 1.18 再次调用服务,完美解决

    2024年02月15日
    浏览(35)
  • Cloudfront HTTPS 性能优化

    HTTP/2 相比廉颇老矣的 HTTP/1.x,HTTP/2 在底层传输做了很大的改动和优化包括有: 每个服务器只用一个连接,节省多次建立连接的时间,在TLS上效果尤为明显 加速 TLS 交付,HTTP/2 只耗时一次 TLS 握手,通过一个连接上的多路利用实现最佳性能 更安全,通过减少 TLS 的性能损失,

    2024年02月11日
    浏览(32)
  • Amaon CloudFront助力出海业务访问优化

    企业的展示网站需要面向多个国家的客户时,由于地理位置的原因。往往会出现一个痛点,网络延迟太高,以至于图片、视频播放时会非常卡顿。客户的访问体验非常差,直接影响到企业收益。此篇文章九河云综合分析Amaon CloudFront: 随着云计算等技术的快速发展, CDN (内容

    2024年02月08日
    浏览(35)
  • Elasticsearch bucket_script、bucket_selector、bucket_sort 区别和应用场景?

    请教老师, 上面的是我在es保存的数据, 想写一个dsl, 求出来 beijing 占比 50%, shanghai 占比 50%。 死磕Elasticsearch知识星球 https://t.zsxq.com/0bqpcJiLL 类似问题,样例数据单看计算不复杂,“beijing” 2 个,“上海” 2 个,“beijing”占比: 2/(2+2) = 50%; \\\"shanghai\\\"同样计算,占比 50%。 业

    2023年04月09日
    浏览(54)
  • Amazon CloudFront 部署小指南(六)- Lambda@Edge 基础与诊断

    内容简介 本文适用于希望使用 Amazon CloudFront Lambda@Edge 提升 Amazon CloudFront 边缘计算能力的用户,旨在帮助您更好的进行 CloudFront Lambda@Edge 的开发、调试、测试、部署等工作。 首先我们会对 CloudFront Lambda@Edge 做个简单的介绍,然后分七个步骤为您讲述如何创建一个带有 CloudFr

    2024年02月11日
    浏览(29)
  • MongoDB聚合:$bucket

    $bucket 将输入文档按照指定的表达式和边界进行分组,每个分组为一个文档,称为“桶”,每个桶都有一个唯一的 _id ,其值为文件桶的下线。每个桶中至少要包含一个输入文档,也就是没有空桶。 语法 groupBy 对文档进行分组的表达式。若指定字段路径,需要在字段名前加上

    2024年01月23日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包