shou2017.com
JP

Issues Encountered When Enabling HTTPS with CloudFront (Hugo Edition)

Mon Oct 2, 2017
Sat Aug 10, 2024
Hugo

When I decided to enable HTTPS for another site I was running with Hugo, I encountered several issues. Here’s a memo of what I struggled with.

The basics can be followed from this guide: [ACM] AWS Certificate Manager: Enabling HTTPS for CloudFront with Free Server Certificates. Following this guide should work fine.

However, I still ran into some issues.

Issue 1: Always Select the Northern Virginia Region

Do not select Tokyo by mistake. If you proceed with Tokyo, you won’t be able to select a Custom SSL Certificate. This completes the HTTPS setup. Do not touch the name servers or anything else unnecessarily.

Issue 2: Configuring config.toml for Hugo

Next is configuring Hugo’s config.toml. The basic format is fine. I saw some blogs mentioning that a trailing / is necessary, but in my case, it didn’t work. If your site has been running properly with HTTP, simply changing http to https should suffice. I got confused while searching online and ended up overcomplicating the config.toml.

baseurl = "https://shou2017.com"

Issue 3: Configuring CloudFront

Here too, following the guide AWS Reintroduction: Amazon CloudFront Edition should work fine.

For the Origin Domain Name on the CloudFront side, you must copy and paste the S3 endpoint. If it still doesn’t work, the S3 bucket policy is likely incorrect. Don’t panic if http isn’t pasted correctly when copying.

Also, make sure to enter your domain in the Alternate Domain Names (CNAMEs) field.

Using CloudFront’s Alias with Route 53 is possible.

This is about all that’s important on the CloudFront side.

Issue 4: Configuring the S3 Bucket Policy

When trying to run a static site generated by Hugo, I followed the guide [CloudFront + S3] Restricting Access to a Specific Bucket from a Specific Distribution, but it didn’t work.

The error looked like this. The index page displayed, but other pages did not.

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>E193C9CDF4319589</RequestId>
    <HostId>
xbU85maj87/jukYihXnADjXoa4j2AMLFx7t08vtWZ9SRVmU1Ijq6ry2RDAh4G1IGPIeZG9IbFZg=
    </HostId>
</Error>

The issue was with the Origin Access Identity settings. If you configure it straightforwardly, an S3 bucket policy is automatically created, and it looks like this:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E21XQ8NAGWMBQQ"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::myhost.com.cdn/*"
        }
    ]
}

The mistake here is in the Principal section. It should be like this:

"Principal": {
                "AWS": "*"
            },

If you get stuck, it takes at least 15 minutes to reconfigure everything. There are many tedious steps, so I plan to properly document this next time. Probably.

Tags
CloudFront
See Also