Global Distribution 🌍 - Making Your Project Fast Worldwide for Rift Rewind
Get That Smooth Performance Worldwide!
Learn how to make your project fast and accessible for users around the world. Solve the problems of distance, speed, and security that every application faces - because nobody likes lag.
Rift Rewind Developer Challenge - Day 4 🎮
Welcome to Day 4 of the Riot Games Rift Rewind Developer Challenge ! 🚀 Today you'll solve a fundamental problem that every web application faces: how do you make your project fast for users whether they're next door or on the other side of the world?
In about 30 minutes, you'll learn why distance matters on the internet (spoiler: it's like ping in League), how to solve the speed problem, and how to keep your files secure while making them globally accessible. We're not just making your project work, we're learning how the internet actually delivers content and why some apps feel instant while others feel like you're playing on 200ms ping.
This means understanding why a user in Tokyo might have a slow experience accessing files stored in Mexico City (it's not their internet, it's physics), learning how the world's fastest websites solve this problem, and implementing the same solution for your project. The goal is to understand the fundamental challenges of global web delivery and fix them like a pro.
By the end of today, you'll have a project that loads quickly for users anywhere in the world. Time to eliminate that lag!
What You Will Accomplish Today
✅ Understand why distance affects application speed (it's basically ping IRL)
✅ Learn how global content delivery works
✅ Set up worldwide distribution for your project
✅ Keep your storage secure while serving content globally
✅ Learn how global content delivery works
✅ Set up worldwide distribution for your project
✅ Keep your storage secure while serving content globally
What You Will Need
Step 1: The Distance Problem (AKA Why Lag Exists) 🌐
Let's start with a simple question: why do some websites load instantly while others take forever? It's the same reason you hate playing on high ping.
The physics of the internet: When someone visits your application, their request travels through cables, fiber optics, and wireless signals to reach your server. Just like in League, distance creates latency. Data traveling from Tokyo to Mexico City takes longer than data traveling within the same city - it's literally the speed of light working against you.
Real-world example: Your project files are stored in Mexico City. A user in Tokyo clicks on your app. Their request travels ~11,000 kilometers (6,800 miles) to Mexico City. Your server sends the files back ~11,000 kilometers to Tokyo. Total distance: ~22,000 kilometers just to load one page! That's like playing League with your game server on the moon.
This problem creates:
- Slow loading times: Long distances mean delays (high ping vibes)
- Unreliable connections: More distance = more things that can go wrong
- Poor user experience: Users leave slow apps faster than you leave a ranked game with an AFK teammate
Step 2: How the World's Fastest Websites Solve This 🚀
Major websites like Amazon, Netflix, and Google have solved this problem. Here's their secret (and it's not buying better internet):
Bring content closer to users. Instead of storing everything in one location, they copy their content to servers around the world. When someone visits their website, they get content from the nearest server, not from thousands of miles away. It's like having multiple game servers in different regions instead of making everyone play on NA from Korea.
This system has a name: Content Delivery Network (CDN). A CDN is a network of servers distributed globally that work together to deliver content quickly. Think of it like Riot having game servers in NA, EU, KR, etc. - you connect to the closest one for the best experience.
How a CDN works:
- You upload your project files to one central location (your "origin")
- The CDN automatically copies these files to servers worldwide
- When someone visits your app, they get content from the nearest server
- Result: Your project loads quickly no matter where the user is located
Benefits:
- Speed: Content comes from nearby servers (low ping energy)
- Reliability: If one server has issues, others can take over (no more "servers are down" excuses)
- Security: Built-in protection against attacks
- Cost savings: Less load on your main server
Step 3: Set Up Global Distribution for Your Project 🌍
Now let's implement this solution for your project. AWS provides a CDN service called CloudFront that we'll use to distribute your content globally - think of it as creating server regions for your app.
We'll create a global distribution network for your project and connect it securely to your private storage bucket. Then we'll configure it to serve your content from locations worldwide and test it to make sure everything works properly.
Open the CDN service - In the AWS Console, search for "CloudFront" and click on it
Create your global distribution - Click "Create CloudFront distribution"
Distribution name - Give your distribution a name (e.g., "Rift Rewind Global Distribution")
Distribution type - Select "Single website or app" and click "Next"
Skip custom domain setup - Leave the domain field empty for now (we'll add this later if needed) and click "Next"
Specify your origin:
- Origin type: Select "Amazon S3"
- S3 origin: Click "Browse S3" and select your bucket from Day 2
- Origin path: Leave empty (unless your project files are in a specific folder inside your bucket)
- Settings: Use the default recommended settings
- Leave "Allow private S3 bucket access to CloudFront" checked ✅
Origin settings - Use recommended origin settings
Cache settings - Use recommended cache settings tailored to serving S3 content
Skip security protections - Choose "Do not enable security protections" and click "Next". (AWS WAF provides advanced protection against web attacks, but for learning projects with no sensitive data or user input, the built-in CloudFront security is sufficient. We're also trying to avoid extra costs while learning 💰)
Review and create - Review your settings and click "Create distribution"
You'll know you're done when: You see a new distribution with status "Deploying" - it's like waiting for a game update to install globally.
Step 4: Configure Your Default Page 🏡
Now let's set a default root object for your distribution. This makes your domain automatically serve your main page when users access your root URL - like setting a default landing page.
When someone visits your project's main address (like
d1234567890123.cloudfront.net), they're accessing the "root URL" without any specific file name. Your CDN doesn't know which file to show them, so users see an error instead of your project. It's like clicking "Play" but the game doesn't know which champion you want to play.Setting
index.html as the default root object tells your CDN "when someone visits the main address, automatically show them index.html." This ensures your project works like any professional application with clean URLs that go straight to your content.Edit your distribution - Click on "Edit" under the "Settings" on the "General" tab of your distribution
Set default root object:
- Scroll down to Default root object field
- Enter:
index.html(no forward slash) - Click "Save changes"
Step 5: Test Your Global Project 🧪
Now let's test that everything works! Time to see if we've eliminated the lag.
Wait for global deployment - Your distribution status will show "Deploying" for 5-15 minutes. This time is needed to copy your content to servers worldwide (it's like Riot pushing an update to all regions). Refresh the page to check progress.
Get your global URL - Once the status shows "Deployed", copy your distribution domain (something like
d1234567890123.cloudfront.net)Test your project - Open
https://your-distribution-domain.cloudfront.net in your browser. Your project should load quickly from anywhere in the world.Verify security - Try accessing your storage bucket directly (the URL from Day 3). You should still see "Access Denied" - this means your security is still tight.
You'll know you're done when: Visiting your CloudFront domain automatically shows your project, but direct S3 access is still blocked. It's like having a bouncer who only lets VIPs (CloudFront) into your private club (S3).
Step 6: Understand Your Security Setup 🔒
Good news! When you selected "Allow private S3 bucket access to CloudFront" in Step 3, AWS automatically configured the security for you - no manual setup required.
What happened behind the scenes: AWS automatically created an Origin Access Control (OAC) and updated your S3 bucket policy. Think of OAC like giving your CDN a special VIP pass to your private storage. Users can get content through the CDN, but they can't access your storage directly - only CloudFront has the VIP pass.
This means your files stay completely private in S3, but CloudFront can still serve them to users worldwide. This is much more secure than making your S3 bucket public, which would be like leaving your account password in Twitch chat.
Security benefits:
- Files remain private and secure in S3
- Only CloudFront can access your storage
- Users get fast content delivery without compromising security
- No risk of accidental public exposure
Checklist ✅
Check the items below to make sure you have completed today's challenge:
- [ ] Created global distribution for your project
- [ ] Connected it securely to your private storage
- [ ] Verified project loads quickly through the global URL
- [ ] Confirmed storage bucket remains private and secure
Next Steps 🚀
Congratulations! 🎉 You've solved the fundamental challenge of global web delivery. Your project now:
- ✅ Loads quickly for users anywhere in the world (low ping for everyone!)
- ✅ Maintains enterprise-grade security
- ✅ Uses a global CDN for reliability and performance
- ✅ Costs practically nothing within your Free Tier limits
You've essentially created your own global server infrastructure, just like the big tech companies use. Your project now has the same performance advantages as major applications - users in Tokyo will have just as good an experience as users next door.
In the next step of the Rift Rewind challenge, we'll build on this solid foundation!
Pro tip: The CloudFront URL might look ugly now (like
d1234567890123.cloudfront.net), but later you can connect it to a custom domain name to make it look professional. For now, focus on the fact that your project loads fast globally - that's the real achievement here.GG on optimizing global performance! Your users will thank you. 🌍⚡
Remember: Fast applications = happy users = successful projects. You've just implemented the same technology that powers Netflix, Amazon, and other global platforms. That's pretty epic.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article