Configure your origin<\/strong><\/li>\n<\/ol>\nTo set up CloudFront, you need to specify the origin from where CloudFront should fetch your web application files. This can be either an S3 bucket or an HTTP server hosted on EC2.<\/p>\n
If you are using an S3 bucket as your origin, you need to grant CloudFront access to the bucket. To do this, navigate to your S3 bucket and select the “Permissions” tab. Click on “Edit bucket policy” and paste the following policy:<\/p>\n
{\n \"Version\": \"2012-10-17\",\n \"Id\": \"PolicyForCloudFrontPrivateContent\",\n \"Statement\": [\n {\n \"Sid\": \"1\",\n \"Effect\": \"Allow\",\n \"Principal\": {\n \"AWS\": \"arn:aws:iam::cloudfront:user\/CloudFront Origin Access Identity YOUR-CLOUDFRONT-ACCESS-IDENTITY\"\n },\n \"Action\": \"s3:GetObject\",\n \"Resource\": \"arn:aws:s3:::YOUR-BUCKET-NAME\/*\"\n }\n ]\n}\n<\/code><\/pre>\nReplace “YOUR-CLOUDFRONT-ACCESS-IDENTITY” with the actual CloudFront access identity and “YOUR-BUCKET-NAME” with the actual S3 bucket name.<\/p>\n
If you are using an EC2 instance as your origin, you need to ensure that HTTP traffic is allowed on the instance. You can do this by adding a security group rule that allows incoming traffic on port 80 (HTTP).<\/p>\n
\n- Create a CloudFront distribution<\/strong><\/li>\n<\/ol>\n
To create a CloudFront distribution, navigate to the CloudFront console and click “Create Distribution.”<\/p>\n
In the “Web” section, click “Get Started.”<\/p>\n
Under “Origin Domain Name,” specify the domain name of your S3 bucket or EC2 instance. CloudFront will automatically detect the correct protocol (HTTP or HTTPS).<\/p>\n
Under “Viewer Protocol Policy,” select “Redirect HTTP to HTTPS.” This ensures that all traffic to your CloudFront distribution is encrypted.<\/p>\n
Under “Cache Key and Origin Requests,” select “Use legacy cache settings.” This is suitable for most web applications and provides better caching performance.<\/p>\n
Under “Distribution Settings,” specify a “Price Class” that determines the network coverage of your CloudFront distribution. Choose “Use All Edge Locations (Best Performance)” for global coverage or “Use Only US, Canada and Europe (Lowest Price)” for cost savings.<\/p>\n
Under “Alternate Domain Names (CNAMEs),” specify the domain name of your web application. This allows you to use a custom domain name instead of the default CloudFront domain name.<\/p>\n
\n- Configure SSL certificate<\/strong><\/li>\n<\/ol>\n
If you want to use a custom domain name with SSL, you need to configure an SSL certificate. You can either use a free SSL certificate provided by AWS Certificate Manager (ACM) or upload your own SSL certificate.<\/p>\n
To use an ACM certificate, navigate to the ACM console and click “Request a certificate.” Follow the prompts to generate a new SSL certificate for your custom domain name. Once the SSL certificate is issued, select your CloudFront distribution in the CloudFront console and click “Edit.” Under “SSL Certificate,” select “Custom SSL Certificate (example.com)” and select the ACM certificate from the dropdown menu.<\/p>\n
If you want to upload your own SSL certificate, you need to ensure that it is in PEM format and that it contains the private key. Once you have the SSL certificate in the correct format, select your CloudFront distribution in the CloudFront console and click “Edit.” Under “SSL Certificate,” select “Custom SSL Certificate (example.com)” and upload your SSL certificate.<\/p>\n
\n- Configure DNS<\/strong><\/li>\n<\/ol>\n
To use your custom domain name with CloudFront, you need to configure your DNS settings to point to your CloudFront distribution. You can either use Route 53, AWS’s DNS service, or your own DNS provider.<\/p>\n
If you are using Route 53, navigate to the Route 53 console and create a new Alias record set that points to your CloudFront distribution.<\/p>\n
If you are using your own DNS provider, you need to create a CNAME record that points to your CloudFront distribution.<\/p>\n
\n- Test your CloudFront distribution<\/strong><\/li>\n<\/ol>\n
Once you have configured your CloudFront distribution, you can test it by visiting your web application using your custom domain name.<\/p>\n
CloudFront provides detailed logs that can be used to troubleshoot any issues. To access the logs, navigate to your S3 bucket and select the “Properties” tab. Click on “Enable logging” and specify a Target Bucket, Prefix, and permissions. CloudFront logs will be written to the specified S3 bucket.<\/p>\n
Conclusion<\/h2>\n
In this tutorial, you learned how to set up a CloudFront distribution for your web application. CloudFront provides several benefits such as improved website performance, reduced latency, and better scalability. By following these steps, you can easily set up CloudFront for your web application and enjoy the benefits of AWS’s content delivery network.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction If you are running a web application, then ensuring it performs optimally across the world is essential. This is where AWS CloudFront comes in. CloudFront is a content delivery network that speeds up the distribution of your static and dynamic web content, such as HTML, CSS, JavaScript, and images, Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[317,202,1711,1712,713,1710],"yoast_head":"\nSetting up CloudFront Distribution for your web application - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setting up CloudFront Distribution for your web application\" \/>\n<meta property=\"og:description\" content=\"Introduction If you are running a web application, then ensuring it performs optimally across the world is essential. This is where AWS CloudFront comes in. CloudFront is a content delivery network that speeds up the distribution of your static and dynamic web content, such as HTML, CSS, JavaScript, and images, Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:14:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:47:57+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"Setting up CloudFront Distribution for your web application\",\n\t \"datePublished\": \"2023-11-04T23:14:08+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:57+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\"\n\t },\n\t \"wordCount\": 844,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"Amazon Web Services\\\"\",\n\t \"\\\"AWS\\\"\",\n\t \"\\\"CDN\\\"\",\n\t \"\\\"content delivery network\\\"]\",\n\t \"\\\"web application\\\"\",\n\t \"[\\\"Setting up CloudFront Distribution\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\",\n\t \"url\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\",\n\t \"name\": \"Setting up CloudFront Distribution for your web application - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:14:08+00:00\",\n\t \"dateModified\": \"2023-11-05T05:47:57+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Setting up CloudFront Distribution for your web application\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Setting up CloudFront Distribution for your web application - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/","og_locale":"en_US","og_type":"article","og_title":"Setting up CloudFront Distribution for your web application","og_description":"Introduction If you are running a web application, then ensuring it performs optimally across the world is essential. This is where AWS CloudFront comes in. CloudFront is a content delivery network that speeds up the distribution of your static and dynamic web content, such as HTML, CSS, JavaScript, and images, Continue Reading","og_url":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:14:08+00:00","article_modified_time":"2023-11-05T05:47:57+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Setting up CloudFront Distribution for your web application","datePublished":"2023-11-04T23:14:08+00:00","dateModified":"2023-11-05T05:47:57+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/"},"wordCount":844,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Amazon Web Services\"","\"AWS\"","\"CDN\"","\"content delivery network\"]","\"web application\"","[\"Setting up CloudFront Distribution\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/","url":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/","name":"Setting up CloudFront Distribution for your web application - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:14:08+00:00","dateModified":"2023-11-05T05:47:57+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/setting-up-cloudfront-distribution-for-your-web-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Setting up CloudFront Distribution for your web application"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4211"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=4211"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4211\/revisions"}],"predecessor-version":[{"id":4347,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/4211\/revisions\/4347"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=4211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=4211"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=4211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}