Deploying a Front End to S3

This is a guide meant to help you deploy any front end project or static files like (html, js, css) to an S3 bucket. For example if you have a node.js module you created with Vite. You can deploy updates quickly this way without having to log into AWS console. This guide assumes you are working with Visual Studio Code.

Deployment Architecture

Here's how front-end deployment to S3 works:

graph TB
    subgraph "Development Environment"
        Dev[Developer]
        VSCode[VS Code]
        Vite[Vite Build Tool]
        Dist[dist/ folder<br/>Built Assets]
    end
    
    subgraph "AWS Infrastructure"
        S3[S3 Bucket<br/>Static Website Hosting]
        
        subgraph "Optional CDN Layer"
            CloudFront[CloudFront Distribution<br/>Global CDN]
            Cache[Edge Caching]
        end
        
        subgraph "Access Control"
            IAM[IAM User/Role<br/>S3 Permissions]
            Policy[Bucket Policy<br/>Public Read]
        end
    end
    
    subgraph "Users"
        Web[Web Browsers]
        Mobile[Mobile Devices]
    end
    
    Dev -->|Code Changes| VSCode
    VSCode -->|npm run build| Vite
    Vite -->|Generate| Dist
    Dist -->|npm run deploy<br/>aws s3 sync| S3
    
    S3 -->|Origin| CloudFront
    CloudFront -->|Global Distribution| Cache
    
    Web & Mobile -->|HTTPS Requests| CloudFront
    CloudFront -->|Cache Miss| S3
    Cache -->|Fast Delivery| Web & Mobile
    
    IAM -.->|Deploy Permissions| S3
    Policy -.->|Read Access| S3
    
    style S3 fill:#90EE90
    style CloudFront fill:#87CEEB
    style Vite fill:#FFE4B5

Install AWS CLI

Use the following command to install the AWS command line interface on your development environment. Follow this guide for more information. You will also need to set up your credentials afterwards and may need to install some more python packages.

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Deploy your project

Just add the following "deploy" line to your package.json file to deploy your files to S3. The rest you see are some Vite default commands. Be sure to update the name of your bucket and project.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "aws s3 sync dist s3://bucket-name/project-name --delete"
  },

Now you can deploy with just one command.

npm run deploy

Enhanced Deployment Script

For production deployments, you might want to add cache control and CloudFront invalidation:

"scripts": {
    "deploy": "npm run build && aws s3 sync dist s3://bucket-name --delete --cache-control max-age=31536000 && aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths '/*'"
}

That's it!