How To Use a Custom Domain With AWS CloudFront In Laravel

In a previous post, we saw how to serve S3 Assets through AWS CloudFront in a Laravel project. In this post, we are going to build on that and learn how to configure our Cloudfront distribution to use a custom domain.

Without wasting any time, let's get started.

Step 1. Request A Certificate

In order to serve your S3/CloudFront assets on a custom domain with HTTPS enabled, you need to configure your CloudFront Distribution with a valid SSL certificate. Follow the following steps to obtain a free SSL certificate using AWS Certificate Manager (ACM).

1. Open the Request a certificate page in the AWS Certificate Management console

2. Make sure you are in the US East (N. Virginia) us-east-1 region. The region you are on is displayed at the top right corner of the page. If you are not already in this region, select it from the dropdown menu. CloudFront only supports ACM certificates from this region. Although your CloudFront distribution doesn't have to be in this region.

3. Enter the custom domain or sub-domain you want to use for the CloudFront Distribution in the input field provided. For the purpose of this tutorial, let's assume that our custom domain is assets.example.com.

4. Click the Next button at the bottom right of the page.

   

5. On the next page, make sure DNS validation is selected as the validation method. Then click the Next button.

   

6. On the next page, add tags for this certificate, if necessary, or simply click the Review button.

7. Review the details on the next page, then click the Confirm and request button.

8. On the Validation page that follows, click on your custom domain to expand the dropdown. You will see a Name/Value pair for the domain that you provided (Highlighted in green in the image below). You will also notice that the validation status says Pending validation. In order to prove that you own the domain you provided, you'll need to add the provided values as a CNAME record in your domain's DNS. 

   

9. Open your domain's DNS configuration page on a new tab, and add the provided values. The exact steps to add a CNAME record to your domain's DNS vary from provider to provider, but the process is similar. The image below shows how to add it to Cloudflare. This should give you an idea of how to add it to your own DNS provider.

   

10. Go back to the ACM page and click the Continue button to return back to the certificate Manager home page. The status of the certificate should change to “Issued”. This may take several minutes.

Step 2. Configure CloudFront Distribution

1. Open the CloudFront console, and

2. Select the relevant existing distribution (created in the previous post)

   

3. On the distribution details page, click the Edit button.

   

4. On the CloudFront Distribution Edit settings page, click the Add item button in the Alternate domain name (CNAME) section.

5. Enter the custom domain name in the field provided. This should be identical to the domain you used to request a certificate in step 1.

6. In the Custom SSL certificate section, select the certificate you created in step 1.

   If this option is greyed out, it could be either because;

   1. the certificate was not created in the us-east-1 region as explained in step 1, or

   2. the certificate status has not changed to "Issued". In this case, just wait a few more minutes and then click the refresh button next to the Custom SSL certificate input field.

      

7. Once you have successfully selected the Custom SSL certificate from the dropdown menu, scroll to the bottom of the page and click the Save changes button.

8. The new settings can take up to 15 minutes to re-deploy, so just chill. 🛀

Step 3. Link CloudFront distribution with DNS Provider

Next, we need to add another CNAME record to our DNS to allow our custom domain name to point to our CloudFront distribution.

From the CloudFront distribution page, copy the Cloudfront distribution domain name.

Open your DNS configuration page again and add another CNAME record.

Again, assuming that our custom domain is assets.example.com, the image below shows how to add it to Cloudflare.

Note that on some DNS providers you may need to add the full domain name (assets.example.com in this case) in the name field instead of just assets.

Again, it can take several minutes for the new DNS record to propagate.

Step 4. Update Your Laravel Config.

Finally, we need to update our Laravel config to use the new domain name. In the previous post, we configured our domain in the AWS_URL environmental variable. So all we need to do now is to open our .env file and update the value of this variable. Again assuming our custom domain is assets.example.com, we simply update it like so;

AWS_URL=assets.example.com

And that's it. If we are using the Storage Facade’s url() method to output our asset URLs, all our assets should update to use the new domain.

If you have any questions, drop them in the comment section below and I will do my best to answer them. ✌🏽