Skip to content

Improve CloudFront proxying guide #437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Improve CloudFront proxying guide #437

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9b63219
Improve CloudFront proxying guide
Oct 8, 2023
4a7f793
Fix a small typo
Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions docs/proxy/guides/cloudfront.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@ First for the analytics script:
- Origin or Origin Group: The origin we created in step 1
- Viewer Protocol Policy: `HTTPS Only`
- Allowed HTTP Methods: `GET, HEAD`
- Cache policy: `Managed-CachingOptimized`

And another for the event API:

- Path Pattern: `/api/event`
- Origin or Origin Group: The origin we created in step 1
- Viewer Protocol Policy: `HTTPS Only`
- Allowed HTTP Methods: `GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE`
- Cache policy: `Managed-CachingDisabled`
- Origin Request Policy: `Managed-UserAgentRefererHeaders`

## Step 3: Adjust your deployed script
Expand All @@ -41,4 +43,41 @@ Deploy these changes to your CloudFront site. You can verify the proxy is workin

Using our extensions such as hash-based routing, page exclusions or outbound link click tracking? Change the file name from script.js to the script you want to use: script.hash.js, script.exclusions.js or script.outbound-links.js. Want to use more than one extension? You can chain them like this: script.hash.exclusions.outbound-links.js.

## (Optional) Configure CloudFront Distribution using CloudFormation template

This template has been abbreviated to only include fields that are relevant to proxy Plausible script and API requests and is not fully functional. It would at least include origins for serving your actual website content and cache behaviours for it.

```yaml
AWSTemplateFormatVersion: 2010-09-09

Resources:
MyDistributionName:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
CacheBehaviors:
- AllowedMethods: ['GET', 'HEAD']
# Or use /js/script.* to match script extensions
PathPattern: '/js/script.js'
TargetOriginId: plausible
ViewerProtocolPolicy: 'https-only'
# Managed-CachingOptimized policy
CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6
- AllowedMethods: ['GET', 'HEAD', 'OPTIONS', 'PUT', 'POST', 'PATCH', 'DELETE']
PathPattern: '/api/event'
TargetOriginId: plausible
ViewerProtocolPolicy: 'https-only'
# Managed-CachingDisabled policy
CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad
# Managed-UserAgentRefererHeaders policy
OriginRequestPolicyId: acba4595-bd28-49b8-b9fe-13317c0390fa
Origins:
- DomainName: 'plausible.io'
Id: plausible
CustomOriginConfig:
OriginProtocolPolicy: 'https-only'
```

*Note:* Managed policies in CloudFormation templates are referred to using their UUIDs. To find out more read the documentation for [Managed Cache policies](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-managed-cache-policies.html) and [Managed Origin request policies](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-managed-origin-request-policies.html).

Thanks to [@thomasjsn](https://github.com/thomasjsn) for contributing these instructions!