AWS Route 53 and CloudFront - GrackerAI Portal

Host your GrackerAI portal at a /portal subdirectory using AWS services to map gracker.ai/portal to portal.pseo.one.

Create CloudFront Distribution

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

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

portal.pseo.one

For Cache key and origin requests, select Caching Optimized.

For Web Application Firewall (WAF), enable security protections.

The remaining settings should be default. Click Create distribution.

Add Default Origin

After creating the distribution, navigate to the Origins tab.

We need to add your main GrackerAI website as the default origin. This should be where your main gracker.ai 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. portal.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/*, route to portal.pseo.one
• If a user visits any other page, route to your main GrackerAI website

Create three behaviors by clicking the Create behavior button.

/portal/*

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

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

For Cache policy, select CachingOptimized and create behavior.

/portal

The second behavior should be the same as the first one but with a Path pattern of /portal and Origin and origin groups pointing to the same portal.pseo.one.

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

Default (*)

Edit the Default (*) behavior to change the Origin and origin groups to your main GrackerAI website origin.

This ensures all traffic not matching /portal or /portal/* goes to your main website.

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 GrackerAI website
• Appending /portal to the URL should route to your portal at portal.pseo.one

Connecting with Route53

Now we'll connect the CloudFront distribution to your primary gracker.ai domain.

Navigate to Route53 (opens in a new tab) in the AWS console, and click into the Hosted zone for gracker.ai. Click Create record.

For the root domain (gracker.ai):

1. Leave Record name blank
2. Toggle Alias on
3. Select Route traffic to → Alias to CloudFront distribution
4. Choose your CloudFront distribution from the dropdown
5. Click Create records

For www subdomain (optional):

1. Enter www in Record name
2. Toggle Alias on
3. Select Route traffic to → Alias to CloudFront distribution
4. Choose your CloudFront distribution from the dropdown
5. Click Create records

You may need to remove existing A records if they currently exist.

SSL Certificate (Important)

To use a custom domain with CloudFront, you need an SSL certificate:

1. Go to AWS Certificate Manager in the US East (N. Virginia) region
2. Click Request a certificate
3. Choose Request a public certificate
4. Add domain names:
   • gracker.ai
   • www.gracker.ai
5. Choose DNS validation
6. Add the CNAME records to your Route53 hosted zone for validation
7. Once validated, go back to your CloudFront distribution
8. Edit the distribution and select your certificate under Custom SSL certificate

Testing

After DNS propagation (can take up to 48 hours), you should be able to:

• Visit gracker.ai → See your main GrackerAI website
• Visit gracker.ai/portal → Be routed to your portal at portal.pseo.one
• Visit gracker.ai/portal/any-page → Be routed to portal pages

Troubleshooting

Common issues:

1. 502 Bad Gateway: Check that portal.pseo.one is accessible and accepts requests with the Host header set to gracker.ai
2. SSL errors: Ensure your certificate includes both gracker.ai and www.gracker.ai
3. Caching issues: CloudFront caches responses. Use the Invalidations tab to clear cache during testing
4. Origin headers: Your portal at portal.pseo.one may need to be configured to accept requests from the CloudFront distribution

Cache invalidation: To clear CloudFront cache during testing:

1. Go to your distribution's Invalidations tab
2. Click Create invalidation
3. Enter /portal/* to clear portal cache or /* for everything