Posts

Uploading files to AWS S3 with Presigned URLs (Extended Version)

Image
Introduction In my previous post, I showed you how to upload files to AWS S3 using presigned URLs. Today, we’re taking it a step further: creating a permanent file URL that doesn't expire. This is perfect for when you need to save a link to your database and use it anytime. There are two main ways to handle this: 1. Using only AWS S3 for storage and access Pros: Easy to set up; everything is managed within S3. Great for internal apps or dev environments where high security and performance aren't a priority yet. Cons:  Inconsistent Speeds: If a user in London tries to access a bucket in Singapore, it will be slow. Security Risks: If your S3 link is leaked, someone could spam requests, costing you a lot of money. S3 isn't built to handle DDoS attacks. 2. Using S3 combined with CloudFront (CDN) Pros: Better User Experience: Website images load almost instantly because they are cached on servers worldwide. Lower Costs: CloudFront handles repeated requests so your S3 bucket does...
Post a Comment
Read more

How to Deploy a React App to an AWS S3 Bucket

Image
Introduction If you’ve read my previous posts on AWS S3, you already know that S3 is great for file storage. But here is a cool tip: since frontend projects (like React, Angular, or Vue) build into static files, we can host them on S3 and use them just like a regular website! In this post, I’ll show you how to deploy a React app to S3 for direct access, as well as how to set it up using CloudFront. Prerequisites Before we start, you should have a basic understanding of AWS S3, how to set up the AWS CDK, and how to create a Bucket. Implementation First, let's create a simple React project using Vite with two pages: Home and About. Feel free to use your own content! App.tsx import { BrowserRouter as Router , Routes , Route , Link } from 'react-router-dom' ; import Home from './page/Home' ; import About from './page/About' ; function App () {   return (     < Router >       < nav style = { { padding: '10px' , borderBottom: '...
Post a Comment
Read more