Route53 & CloudFront

AWS Route 53 and CloudFront - GrackerAI Portal

Host your GrackerAI portal at a /portal subdirectory using AWS services to map domain.com/portal to portal1.pseo.one.

Create CloudFront Distribution

Navigate to CloudFront (opens in a new tab) inside the AWS console and click on Create distribution.

Create CloudFront Distribution Create CloudFront Distribution

Create CloudFront Distribution

For the Origin domain, input portal1.pseo.one where your portal is currently deployed. Click on Use: portal1.pseo.one.

portal1.pseo.one

Add Default Origin

After creating the distribution, navigate to the Origins tab.

Origins Tab -1

Origins Tab -2

We need to add your main Domain website as the default origin. This should be where your main domain.com domain currently points to.

For instance, if your main website is hosted on:

  • Vercel: Use your .vercel.app domain
  • Netlify: Use your .netlify.app domain
  • Custom hosting: Use your current hosting URL

Create a new Origin and add your main website URL as the Origin domain.

By this point, you should have two Origins:

  1. portal1.pseo.one (for the portal)
  2. Your main website origin (for everything else)

Set Behaviors

Behaviors in CloudFront enable control over the subpath logic. We're creating the following routing logic:

  • If a user visits /portal/*, proxy to portal1.pseo.one
  • If a user visits any other page, route to your main Domain website

Behavior Configuration 1

Create behavior by clicking the Create behavior button.

/portal/*

The behavior should have a Path pattern of /portal/* with Origin and origin groups pointing to portal1.pseo.one. Behavior Configuration 1 Behavior Configuration 1 Behavior Configuration 1

Path pattern: /portal/*
Origin: portal1.pseo.one

Click Save changes.

Preview Distribution

Test your distribution by going to the General tab and visiting the Distribution domain name URL.

  • All pages should direct to your main Domain website
  • Appending /portal to the URL should proxy to portal at portal1.pseo.one

Troubleshooting

Portal Working But Pagination Not Working

If your portal is loading correctly but pagination is not working, this is likely due to CloudFront not forwarding query strings to the origin. Follow these steps to fix it:

  1. Go to Behaviors in the CloudFront distribution

    • Navigate to your CloudFront distribution
    • Click on the Behaviors tab
  2. Edit the Path Pattern

    • Select the path pattern (e.g., /portal/* or /blog/*)
    • Click on Edit

    Edit Behavior

  3. Check Origin Request Policy

    • Scroll down to the Origin request policy section in the behavior settings

    Origin Request Policy

  4. View the Policy Details

    • Click on View Policy to see the current policy settings
  5. Check Origin Request Settings

    • Look for the Query strings setting in the Origin request settings

    Origin Request Settings

    • If Query strings is set to None, this is why pagination is not working
    • Query parameters (like ?page=2) are not being forwarded to your origin
  6. Edit the Policy

    • Click on Edit to modify the Origin request policy

    Edit Policy

  7. Update Query String Settings

    • Change Query strings from None to All or select specific query strings you need
    • This will ensure pagination parameters are forwarded to your origin
    • Click Save changes
  8. Wait for Deployment

    • CloudFront will need to deploy these changes
    • This typically takes 5-15 minutes
    • You can monitor the status in the Distributions list

After the changes are deployed, test your pagination to confirm it's working correctly.