Question 1

How to use same origin through AWS CloudFront

Accepted Answer

This guide uses /metrics as an example of a same-origin path, but you can use any path you choose.

You should also use the URL of your server GTM container instead of https://sgtm.example.com.

Question 2

Step 1: Create an origin for your CloudFront distribution

Accepted Answer

- Go to the CloudFront console.
- Click on your CloudFront distribution.
- Switch to the Origins tab.
- Click the Create origin button.
- Fill the Origin domain field with your Stape container domain, e.g., https://sst.example.com or you can use container default domain, e.g. https://abcdabcd.us.stape.io.
- From the Protocol radio buttons, select the HTTPS only option.
- Click the Add header button.
- Fill the Header name field with X-From-Cdn.
- Fill the Value field with the cft-stape.
- Click the Create origin button.

Question 3

Step 2: Create a behavior for your CloudFront distribution

Accepted Answer

- Switch to the Behaviors tab.
- Click the Create behavior button.
- Fill the Path pattern field with your custom path prefix, e.g., /metrics/*.
- From the Origin and origin groups dropdown, select the origin added in the previous step.
- From the Viewer protocol policy radio buttons, select the HTTPS only option.
- From the Cache policy dropdown, from the Managed section, select the UserAgentRefererHeaders policy.

- Click the Save changes button.

Question 4

Step 3: Adjust your deployed script

Accepted Answer

Create and deploy a Lambda@Edge function:

- Go to the Lambda console.
- Click the Create function button.
- Fill the Function name field with a descriptive name.
- For the Runtime dropdown, ensure that the Node.js 22.x runtime is selected.
- Expand the Change default execution role section.
- For the Execution role radio buttons, select the Create a new role from AWS policy templates option.
- Fill the Role name field with a descriptive name.
- From the Policy templates - optional dropdown, select the Basic Lambda@Edge permissions (for CloudFront trigger) template.
- Click the Create function button.
- Use the following code for the function (ensure that the path prefix in the code matches the behavior path pattern prefix):

export const handler = async (event) =&gt; {
    const request = event.Records[0].cf.request;

// set 'Host' header to origin domain name
    request.headers.host = [{ key: 'Host', value: request.origin.custom.domainName }];

// trim '/metrics' prefix from request URI
    if (request.uri.startsWith('/metrics')) {
        request.uri = request.uri.replace(/^\/metrics/, '');
    }

return request;
};

- Click the Deploy button.
- From the Actions dropdown, select the Deploy to Lambda@Edge option.
- From the Distribution dropdown, select your CloudFront distribution.
- From the Cache behavior dropdown, select the behavior added previously.
- For the CloudFront event dropdown, ensure that the Origin request option is selected.
- Check the Confirm deploy to Lambda@Edge checkbox.
- Click the Deploy button.
- Wait for the Lambda@Edge function and CloudFront distribution to be deployed.

You can verify the proxy is working by opening your proxy path in the browser. Go to https://sgtm.example.com/metrics. If you see error 400, then everything is working correctly. You can also run a preview of the server container on your /metrics path.

After following these steps, add your /path for the same origin to the Custom Loader's settings. Check the article on Same Origin Path to do this.

How to use same origin through AWS CloudFront

Step 1: Create an origin for your CloudFront distribution

Step 2: Create a behavior for your CloudFront distribution

Step 3: Adjust your deployed script

Related articles