{"id":1384,"date":"2022-11-30T07:52:39","date_gmt":"2022-11-30T07:52:39","guid":{"rendered":"https:\/\/precisefuture.com\/?p=1384"},"modified":"2023-02-08T09:07:36","modified_gmt":"2023-02-08T09:07:36","slug":"improve-the-user-experience-performance-and-the-organic-ranking-of-your-site-by-deploying-a-cdn-with-amazon-cloudfront","status":"publish","type":"post","link":"https:\/\/precisefuture.com\/en\/general-information\/improve-the-user-experience-performance-and-the-organic-ranking-of-your-site-by-deploying-a-cdn-with-amazon-cloudfront\/","title":{"rendered":"Improve the user experience, performance and organic positioning of your site by deploying a CDN with Amazon CloudFront"},"content":{"rendered":"

Summary: We present the most secure way to create an S3 bucket with the required permissions to function as a static content store, how to create and configure an SSL certificate to ensure content delivery is done securely, and finally how to configure Amazon CloudFront to that functions as the CDN of your website and loads the content from the S3 bucket created in the first part.<\/p>\n\n\n\n

Create an S3 bucket for the storage of the static content of a website<\/h2>\n\n\n\n

Go to the AWS console, select the S3 service, and select the Create new bucket option.
Give the bucket a name (I recommend using the same name that your CDN subdomain will have to make it easier for you to identify. Eg: if the site is example.com and you want to name your CDN cdn.example.com use this same name for the bucket.<\/p>\n\n\n\n

Initial bucket configuration:<\/h3>\n\n\n\n
    \n
  1. Select the area where you will be staying. Important: If your site is hosted on Amazon Lightsail, the bucket and the lightsail instance must be in the same zone<\/li>\n\n\n\n
  2. In the Bucket Configuration section, make sure to select the ACLs disabled (recommended) option<\/li>\n\n\n\n
  3. Then in Block Public Access settings for this bucket select the option Block all public access<\/strong><\/li>\n\n\n\n
  4. Keep the rest of the options as default and click create bucket, (the last options should look like this)<\/li>\n<\/ol>\n\n\n\n

    \"\"<\/p>\n\n\n\n

    Create and configure an SSL certificate to ensure content delivery is done securely to your users<\/h2>\n\n\n\n

    Once in the AWS console, look for the Amazon Certificate Manager (ACM) service. This service is used to create public SSL certificates and its configuration is extremely easy.<\/p>\n\n\n\n

    AWS Certificate Manager CloudFront<\/h3>\n\n\n\n

    Once in ACM select the "Request" option select the "Request a public certificate" option and then click Next<\/p>\n\n\n\n

    \"\"<\/p>\n\n\n\n

    CloudFront subdomain<\/h3>\n\n\n\n
      \n
    1. Write the name of the subdomain that you will use as CDN (cdn.example.com in this example)<\/li>\n\n\n\n
    2. In Validation method select the DNS option<\/li>\n\n\n\n
    3. and as algorithm selects RSA 2048<\/li>\n<\/ol>\n\n\n\n

      \"\"<\/p>\n\n\n\n

      CloudFront certificate<\/h3>\n\n\n\n
        \n
      1. Click on request and look for the new certificate in the list that appears (if it does not appear, just refresh the page)<\/li>\n\n\n\n
      2. Select the certificate and you will see the details<\/li>\n\n\n\n
      3. You must create a new CNAME record in your DNS. The name and value of this registry appear in the \u201cDomains\u201d section<\/li>\n<\/ol>\n\n\n\n

        A green mark with the text "verified" will appear when the new record is active, this may take a few minutes. If you registered your domain using the Amazon Route 53 service, all you have to do is click on the \u201cCreate records in Route 53\u201d option and AWS will take care of creating the record.<\/p>\n\n\n\n

        Create Amazon CloudFront Distribution to Serve Content Residing in S3<\/h2>\n\n\n\n

        First, go to the AWS CloudFront service and select "Create New Distribution" on the next screen you must enter the following configuration:<\/p>\n\n\n\n

        AWS CloudFront control settings<\/h3>\n\n\n\n

        In Origin > Origin domain you only have to select the S3 bucket in which you are going to store the static content<\/p>\n\n\n\n

        In Origin > Origin access select the option \u201cOrigin access control settings\u201d and \u201cCreate control settings\u201d. You will see a notice explaining that you must update the bucket permissions, this is done when you finish creating the distribution<\/p>\n\n\n\n

        AWS CloudFront cache policy<\/h3>\n\n\n\n

        Then in \u201cDefault cache behavior\u201d make sure to check \u201credirect http to https\u201d and Allowed HTTP methods GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE and select OPTIONS in the next part \u201cCache HTTP methods\u201d<\/p>\n\n\n\n

        In the \u201cCache key and origin requests\u201d section, check the \u201cCache policy and origin request policy\u201d option, right here select the CachingOptimized option in \u201cCache Policy\u201d and \u201cCORS-S3Origin\u201d in Origin request Policy<\/p>\n\n\n\n

        At the end of this same section, in \u201cResponse headers policy\u201d select CORS-and-SecurityHeadersPolicy<\/p>\n\n\n\n

        Then, in the setting section, select the one that best suits your target audience from the 3 options. We recommend \u201cUse all edge locations\u201d to guarantee the best possible performance.<\/p>\n\n\n\n

        AWS CloudFront alternate domain name (CNAME)<\/h3>\n\n\n\n

        In the \u201cAlternate domain name (CNAME)\u201d section, select Add item and write the name of the subdomain that you will use for your CDN. In this example it would be \u201ccdn.example.com\u201d<\/p>\n\n\n\n

        Then in the dropdown that appears below select the SSL certificate that you created using ACM<\/p>\n\n\n\n

        Support for CloudFront http2 and http3<\/h3>\n\n\n\n

        In \u201cSupported HTTP versions\u201d mark the support for http\/2 and http\/3<\/p>\n\n\n\n

        Click on \u201cCreate distribution\u201d<\/p>\n\n\n\n

        Almost there\u2026 All that remains is to update your DNS and S3 bucket policy.<\/p>\n\n\n\n

        Update the CloudFront DNS CNAME<\/h3>\n\n\n\n

        In CloudFront, select the distribution you created and copy the value that appears in \u201cDistribution domain name\u201d. Create a new CNAME record in your DNS with the following values<\/p>\n\n\n\n

        TYPE<\/strong><\/td>YAM<\/strong><\/td>VALUE<\/strong><\/td><\/tr>
        CNAME<\/td>cdn.example.com<\/td>value you copied from \u201c<\/em>Distribution domain name\u201d* It must have the structure: lettersandnumbers.cloudfront.net<\/strong>*<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

        AWS CloudFront S3 bucket policy<\/h3>\n\n\n\n

        Lastly, with the distribution selected, go to the \u201cOrigins\u201d tab, mark the origin that appears and click the Edit button. Almost at the beginning, in the "Origin access" section, look at the notice that appears and click on the "Copy policy" option to copy to the clipboard the policy that allows access to this Amazon CloudFront distribution to the S3 bucket and then click on the link below with the text \u201cGo to S3 bucket permissions\u201d.<\/p>\n\n\n\n

        This will take you to the S3 bucket that you have selected as the origin of your Amazon CloudFront distribution. Scroll down until you find the \u201cBucket policy\u201d section and click edit. Paste the content of the clipboard (Ctrl + V or Right click > paste), check that the indentation is correct (it usually happens that it does not copy well and this can cause you to not be able to save the changes). The first character must be "{" so you must delete any white space that appears before this symbol.<\/p>\n\n\n\n

        Checking the operation of the AWS CloudFront service<\/h2>\n\n\n\n

        This is it, your CDN with Amazon CloudFront is now created. To test that all the configuration is correct in your S3 bucket, select the Objects tab, drag any image from your computer to that tab. Open a new tab in your browser and type the URL of the image you uploaded to your CDN which would have the following path:<\/p>\n\n\n\n

        https:\/\/[subdomain]\/[upload_image]<\/code><\/pre>\n\n\n\n
        Suppose that the image is called img-1.png, then following the same example with which we have been working, the route would be: https:\/\/cdn.example.com\/img-1.png<\/p>","protected":false},"excerpt":{"rendered":"
        Summary: We present the most secure way to create an S3 bucket with the required permissions to function as a static content store, how to create and configure an SSL certificate to ensure content delivery is done securely, and finally how to configure Amazon CloudFront to that functions as CDN of your site [\u2026]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"cliente":[],"herramienta":[],"class_list":["post-1384","post","type-post","status-publish","format-standard","hentry","category-informacion-general"],"acf":[],"_links":{"self":[{"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/posts\/1384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/comments?post=1384"}],"version-history":[{"count":3,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/posts\/1384\/revisions"}],"predecessor-version":[{"id":1860,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/posts\/1384\/revisions\/1860"}],"wp:attachment":[{"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/media?parent=1384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/categories?post=1384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/tags?post=1384"},{"taxonomy":"cliente","embeddable":true,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/cliente?post=1384"},{"taxonomy":"herramienta","embeddable":true,"href":"https:\/\/precisefuture.com\/en\/wp-json\/wp\/v2\/herramienta?post=1384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}