Setting up AWS CloudFront as a reverse proxy

Last updated:

|Edit this page

Note: If you are using the EU cloud then use eu instead of us in all domains (e.g. us.i.posthog.com -> eu.i.posthog.com)

CloudFront can be used as a reverse proxy. Although there are multiple other options if you're using AWS.

By default, CloudFront doesn't forward headers, cookies, or query parameters received from the origin that PostHog uses. To set these up, you need an "origin request policy" as in the instructions below.

Create a distribution

  1. On the AWS dashboard, search for CloudFront, then create a new CloudFront distribution
  2. Set the origin domain to your PostHog instance us.i.posthog.com or eu.i.posthog.com for PostHog Cloud).
  3. Select HTTPS only.
  4. Under Default cache behavior, go to Viewer. “Under Allowed HTTP methods,” select “GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE,” and check OPTIONS under “Cache HTTP methods.” This allows all HTTP methods.
  5. Under Cache policy, click “Create policy.” On the “Create cache policy” page:
    1. Name your policy “origin-cors.”
    2. Scroll to “Cache key settings,” click the dropdown for “Headers” that says “Include the following headers,” select Origin and Authorization.
    3. Under “Query strings,” select “All.”
    4. Click “Create” at bottom of the page.
a screenshot of the cloudfront cache policy settings
  1. Back on the “Create distribution” page, select your “origin-cors” cache policy.
  2. Under “Origin request policy,” choose “CORS-CustomOrigin.”
  3. Under “Response headers policy,” choose “CORS-with-preflight-and-SecurityHeadersPolicy.”
  4. Do not enable AWS Web Application Firewall (WAF).
  5. Click “Create distribution” at bottom of the page.
  6. Edit the Cloudfront Distribution and add the assets origin us-assets.i.posthog.com or eu-assets.i.posthog.com.
  7. Add another behavior the path will be /static/*.
  8. Under "Origin,", choose the one created above.
  9. Under “cache policy,” choose “origin-cors”
  10. Under “Origin request policy,” choose “CORS-CustomOrigin.”
  11. Under “Response headers policy,” choose “CORS-with-preflight-and-SecurityHeadersPolicy.”

Once created, copy the distribution domain name, and set it as your API host in your PostHog initialization like this:

JavaScript
posthog.init('<ph_project_api_key>',
{
api_host: 'https://<distribution_domain_name>.cloudfront.net',
ui_host: 'https://us.posthog.com' // or 'https://eu.posthog.com' if your PostHog is hosted in Europe
}
)

You can find out about CloudFront pricing on the AWS website.

Setup video

Questions?

Was this page useful?

Next article

Setting up Caddy as a reverse proxy

Caddy makes setting up a reverse proxy with TLS simple. For these examples: Sub out YOUR_TRACKING_DOMAIN for the domain you use for proxying to PostHog. We'd suggest something like e.yourdomain.com . Make sure your DNS records point to the server where Caddy is running. Make sure ports 80 and 443 are open and directed toward Caddy. Basic setup First, install Caddy . Next, create a Caddyfile that listens for incoming requests and proxies them to PostHog: Run caddy start from the same…

Read next article