Skip to content

Deploy to AWS

This page teaches you how to deploy Finance App to AWS using S3 and CloudFront. You do not need any AWS experience.

By the end of this page, you will have:

  • An AWS account
  • Your Finance App files uploaded to S3
  • A CloudFront distribution serving your site globally
  • A live website accessible from a public URL

What Is AWS?

Section titled “What Is AWS?”

Amazon Web Services (AWS) is a cloud platform from Amazon. It provides many services. For static websites like Finance App, you need two of them:

Service Purpose
Amazon S3 Stores your HTML, CSS, JavaScript, and images
Amazon CloudFront Delivers your files globally with fast loading and HTTPS

This combination is a standard architecture for static websites .

Before You Start

Section titled “Before You Start”

Make sure you have:

  • An AWS account (you can create one at https://aws.amazon.com/)
  • Your project built locally with npm run build. This creates a dist/ folder with your final site files.
  • A browser
  • About 20 minutes

Important: AWS S3 and CloudFront are not free forever. For a small personal website, the cost is usually around $1 to $3 per month after the free tier .

Step 1 — Create an S3 Bucket

Section titled “Step 1 — Create an S3 Bucket”
  1. Log in to the AWS Management Console at https://console.aws.amazon.com/
  2. In the search bar, type S3 and open the S3 service
  3. Click Create bucket
  4. Fill in the form:
Field What to Enter
Bucket name A globally unique name, like finance-app-yourname
AWS Region Choose the one closest to your audience
Block Public Access Keep this enabled
  1. Click Create bucket

Important: Keep public access blocked. CloudFront will access your files securely without making the bucket public .

Step 2 — Upload Your Files

Section titled “Step 2 — Upload Your Files”
  1. Open your new bucket
  2. Click Upload
  3. Click Add files and select all files from your local dist/ folder
  4. Click Upload

After the upload finishes, you should see your files listed in the bucket, including index.html.

Step 3 — Create a CloudFront Distribution

Section titled “Step 3 — Create a CloudFront Distribution”
  1. In the AWS search bar, type CloudFront and open the CloudFront service
  2. Click Create distribution
  3. Configure the following:
Field What to Select
Origin domain Select your S3 bucket from the dropdown
Origin access Select Origin access control settings (recommended) and create a new OAC
Viewer protocol policy Redirect HTTP to HTTPS
Default root object index.html
  1. Leave other settings at their defaults
  2. Click Create distribution

Important: After creating the distribution, a banner will appear with an S3 bucket policy. Copy this policy and apply it to your S3 bucket under Permissions → Bucket policy .

Step 4 — Wait and Test

Section titled “Step 4 — Wait and Test”
  1. CloudFront takes a few minutes to deploy. Wait for the status to change from Deploying to Deployed.
  2. Copy the Distribution domain name, which looks like:
https://d1234abcd.cloudfront.net
  1. Open this URL in your browser. Your Finance App site should appear.

Step 5 — Update Your Site Later

Section titled “Step 5 — Update Your Site Later”

When you change content and rebuild your site:

  1. Run npm run build locally
  2. Upload the new files to your S3 bucket (repeat Step 2)
  3. In CloudFront, go to the Invalidations tab
  4. Click Create invalidation
  5. Enter /* in the path field
  6. Click Create invalidation

This clears the old cached files from CloudFront edge locations so visitors see your updates.

Optional — Add a Custom Domain

Section titled “Optional — Add a Custom Domain”

If you want to use your own domain, like yourdomain.com:

  1. In AWS Certificate Manager (ACM), request a free SSL certificate for your domain. Important: Create the certificate in the us-east-1 region .
  2. In CloudFront, edit your distribution and add your domain under Alternate domain names (CNAMEs)
  3. Select your ACM certificate under Custom SSL certificate
  4. In your domain registrar (or Route 53), create a CNAME record pointing to your CloudFront distribution domain

After adding a custom domain, update the site field in astro.config.mjs to match, then rebuild and redeploy.

Common Mistakes

Section titled “Common Mistakes”
Mistake What Happens Fix
Made S3 bucket public Security risk, not needed with CloudFront Keep bucket private and use OAC
Forgot to apply bucket policy from CloudFront Site returns Access Denied error Copy the policy from the CloudFront banner to your S3 bucket
Wrong default root object Homepage does not load Set it to index.html
Did not invalidate cache after update Old content still shows Create a CloudFront invalidation for /*
Uploaded wrong folder Site is blank or broken Upload the contents of dist/, not the whole project

Troubleshooting

Section titled “Troubleshooting”
Problem Solution
Site shows “Access Denied” Check that the bucket policy from CloudFront is applied correctly
Site shows 404 Confirm index.html is in the root of your S3 bucket, and the default root object is set to index.html
Changes do not appear Create a CloudFront invalidation for /*
CloudFront URL does not load Wait a few more minutes. Deployments can take up to 15 minutes.
Build fails locally Run npm run build on your computer first and fix any errors before uploading

Cost Estimation

Section titled “Cost Estimation”

For a small personal website or low-traffic documentation site, the estimated monthly cost is:

Service Estimated Cost
Amazon S3 storage Less than $0.50/month
CloudFront data transfer $0 – $2/month for light traffic
Origin Access Control No additional cost

Total: $0 – $2 per month for a small site .

Next Step

Section titled “Next Step”

After deploying to AWS, you can deploy the same project to other platforms, or move on to configuring your custom domain.