COST: $0 (with AWS Free Tier)

TIME: 15-20 Minutes

SERIES: Deploy like a Pro on AWS

Every curious developer starting with the cloud asks the same questions: “What’s the right way to deploy my app?” or “How do I deploy this like a real production application?”

If that's you, you're in the right place. Forget dragging files into a server. Forget overpaying for an EC2 instance you don't need.

This article will show you the modern, professional method for deploying a frontend application (React, Vue, Angular, etc.) on AWS. This architecture is cost-effective, infinitely scalable, and fully automated. The concepts you learn here are the standard across AWS, GCP, and Azure.

The Core Concept: Static Files Don't Need a Server

First, a fundamental rule: Never jump directly into a cloud service without understanding the why.

Modern frontend frameworks like React, Angular, or Vue have one thing in common: when you run the build command (e.g., npm run build), they don't give you a server. They give you a build or dist folder.

This folder contains static files: HTML, CSS, JavaScript, and images. The browser understands these files directly. The browser doesn’t know or care about React.js or JSX. Your complex framework code has been compiled down to the basic building blocks of the web that browser can use.

Since we are only dealing with a folder of static files, using a full-blown virtual server like an EC2 instance is inefficient and expensive. It's like using a cargo ship to deliver a pizza.

The professional approach for production focuses on three things:

1. Cost-Effectiveness: Use the cheapest possible storage.

2. Scalability & Performance: Serve content to users globally, fast.

3. Automation: Never deploy manually. Ever.

Here’s how we achieve it:

• For Cost, we use Amazon S3. It’s an object storage service, perfect for hosting static files at an incredibly low cost.

• For Scalability and Performance, we use Amazon CloudFront. This is a Content Delivery Network (CDN) that caches our website in data centers all over the world, delivering it to users from the location nearest to them. This means low latency and lightning-fast load times.

• For Automation, we build a CI/CD pipeline with GitHub Actions. When we push new code to our repository, it will automatically build our application and deploy the new files to S3.

The Hands-On Lab: Let's Build It

Follow along. No steps skipped.

Prerequisites

Before we start, make sure you have the following:

• An AWS Account (The Free Tier is more than enough for this tutorial).

• A GitHub Account.

• Node.js installed on your computer.

Step 1: Get the Frontend Project

For this tutorial, we'll use a simple React quiz app. First, you need to get the code onto your computer.

1. Open your terminal or command prompt.

2. Clone the repository using the following git command:

   /

    git clone https://github.com/vinsin21/cloud-quiz-craft.git
   

3. Navigate into the newly created project directory:

    cd cloud-quiz-craft
   

(Optional) Run the Project Locally

Let's make sure the app works on your machine before deploying it.

1. Install all the necessary project dependencies by running:

    npm install
   

2. Start the local development server:

    npm run dev
   

3. Open your web browser and go to http://localhost:3000. You should see the quiz app running.

4. Once you're done, go back to your terminal and press CTRL + C to stop the local server.

   

(Optional) See the Build Folder

Let's generate the dist folder to see the static files we've been talking about.

1. In your terminal, run the build command:

    npm run build
   

   You will now see a new dist folder in your project. This folder contains the final HTML, CSS, and JavaScript that we will deploy. You can delete this dist folder now; to ensure our CI/CD pipeline is the only thing creating our production build, guaranteeing a clean state every time.

   

Step 2: Create and Configure the S3 Bucket

An S3 bucket is a container in the cloud where our static files will live.

1. Log in to your AWS Management Console and navigate to the S3 service.

2. Click the Create bucket button.

3. Bucket name: Give it a globally unique name. This means no one else in the world can have the same name. A good practice is to add your name or a random number to it (e.g., my-pro-frontend-app-2025-cloud-quize).

4. Object Ownership: Select “ACLs disabled (recommended)”

5. Block Public Access settings: This is a critical security step. Ensure the box for Block all public access is checked. We will not make the bucket public. CloudFront will be the only service allowed to access it.

   

6. Leave all other settings as default and click Create bucket.

Step 3: Set Up the CloudFront Distribution (CDN)

CloudFront will act as the public face of our website, fetching our files from the private S3 bucket and serving them to users quickly and securely.

1. In the AWS Console, navigate to the CloudFront service.

2. Click Create a CloudFront distribution.

3. Step 1: Get started

   • Distribution name: Enter a descriptive name like cloudfront-for-cloud-quiz-app.

   • Description (optional): Add a note like This CloudFront distribution is for cloud quiz web app.

   • Distribution type: Select Single website or app.

   • Leave Custom domain and Tags as default.

   • Click Next.

4. Step 2: Specify origin

   • Origin type: Select Amazon S3.

   • S3 origin: Click the field and select the S3 bucket you just created from the dropdown list (e.g., my-pro-frontend-app-2025-cloud-quize.s3.ap-south-1.amazonaws.com).

   • Origin path - optional: Leave this empty.

   • Under Settings, ensure Allow private S3 bucket access to CloudFront is checked and Allow private S3 bucket access to CloudFront - Recommended is selected.

     • This creates a special Origin access control (OAC) that allows CloudFront to read objects from your S3 bucket without making your bucket public.

   • Leave Origin settings and Cache settings as "Use recommended settings".

   • Click Next.

5. Step 3: Enable security

   • Under Web Application Firewall (WAF), select Do not enable security protections. Because it charges $8-$14 per month (For this tutorial, we don't need WAF, but for production applications, you might consider enabling it.)

   • Click Next.

6. Step 4: Review and create

   • Review all the settings you've configured.

   • At the bottom, click Create distribution.

     

   • The status will show as "Deploying" for a few minutes while CloudFront provisions its resources globally.

     

Step 4: Create an IAM Role for GitHub Actions

We need to give GitHub a secure way to access our AWS account to upload files. We'll use an IAM Role, which is the modern, password-less way to grant permissions.

Part A: Set Up the GitHub Identity Provider

1. In the AWS Console, navigate to the IAM service.

2. On the left-hand menu, click Identity providers and then click Add provider.

   

3. Select OpenID Connect.

   • Provider URL: https://token.actions.githubusercontent.com

   • Audience: sts.amazonaws.com

   • Click Add provider.

Part B: Create the Custom IAM Policy

1. In the IAM service, click on Policies in the left-hand menu.

2. Click the Create policy button.

3. Select the JSON editor tab.

4. Delete the template content and paste the following policy. Remember to replace YOUR_BUCKET_NAME with your actual S3 bucket name.

   JSON

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "AllowFileUploadsAndSyncToS3",
                "Effect": "Allow",
                "Action": [
                    "s3:PutObject",
                    "s3:ListBucket",
                    "s3:DeleteObject"
                ],
                "Resource": [
                    "arn:aws:s3:::YOUR_BUCKET_NAME",
                    "arn:aws:s3:::YOUR_BUCKET_NAME/*"
                ]
            },
            {
                "Sid": "InvalidateCloudFrontCache",
                "Effect": "Allow",
                "Action": "cloudfront:CreateInvalidation",
                "Resource": "*"
            }
        ]
    }
   

   

5. Click Next.

6. On the "Review and create" page, give the policy a name like GitHub-S3-Deploy-Policy.

7. Click Create policy.

Part C: Create the IAM Role

4. Now, go to Roles in the left menu and click Create role.

5. For Trusted entity type, select Web identity.

6. Under Web identity, choose the Identity provider you just created. The Audience should be automatically selected.

7. For GitHub organization, enter only your GitHub username. For example: vinsin21. Do not paste the full URL.

8. For GitHub repository, enter only the name of your repository. For example: cloud-quiz-craft.

   

9. Click Next.

10. On the Add permissions page, use the search bar to find the policy you created in Part B: GitHub-S3-Deploy-Policy.

11. Check the box next to your custom policy in the search results.

12. Click Next.

13. Give the role a name like GitHub-S3-Deploy-Role, review the details, and click Create role.

14. Finally, click on the role you just created from the list and copy its ARN. It will look like arn:aws:iam::123456789012:role/GitHub-S3-Deploy-Role. Save this for the next step.

Step 5: Build the CI/CD Pipeline with GitHub Actions

This is the final step where we automate everything.

1. Go to your forked repository on GitHub.com.

2. Click on the Settings tab.

3. In the left menu, go to Secrets and variables > Actions.

4. Click New repository secret and create the following four secrets:

   • AWS_ROLE_ARN: Paste the IAM Role ARN you copied earlier.

   • AWS_REGION: Enter the region of your S3 bucket (e.g., ap-south-1).

   • AWS_S3_BUCKET: Enter your unique S3 bucket name.

   • CLOUDFRONT_DISTRIBUTION_ID: Go to your CloudFront distribution page in AWS and copy its ID (it looks like E123ABCDEF45G).

   • 

5. Now, go back to your project code in VS Code. Create a new folder structure: .github/workflows/.

6. Inside the workflows folder, create a new file named deploy.yml.

   

7. Paste the following code into deploy.yml:

    name: Deploy Frontend to AWS S3
   
    on:
      push:
        branches:
          - main # Trigger deployment only on pushes to the main branch
   
    jobs:
      deploy:
        runs-on: ubuntu-latest
        permissions:
          id-token: write # Required for OIDC authentication to AWS
          contents: read
   
        steps:
          - name: Checkout repository
            uses: actions/checkout@v4
   
          - name: Configure AWS Credentials
            uses: aws-actions/configure-aws-credentials@v4
            with:
              role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
              aws-region: ${{ secrets.AWS_REGION }}
   
          - name: Setup Node.js
            uses: actions/setup-node@v4
            with:
              node-version: '20'
   
          - name: Install dependencies
            run: npm install
   
          - name: Build application
            run: npm run build
   
          - name: Deploy to S3
            # Syncs the build directory (dist) with the S3 bucket
            run: aws s3 sync ./dist s3://${{ secrets.AWS_S3_BUCKET }} --delete
   
          - name: Invalidate CloudFront Cache
            # This ensures users see the new version immediately
            run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths "/*"
   

The Result: Push and Watch the Magic

You're all set! Now, commit and push your changes, including the new deploy.yml file, to your GitHub repository.

1. In your terminal, run these commands one by one:

    git add .
    git commit -m "feat: Add CI/CD deployment workflow"
    git push origin main
   

   

2. Go to the Actions tab in your GitHub repository. You will see your workflow running. It will:

   1. Check out your code.

   2. Securely authenticate with AWS.

   3. Install dependencies and build your project.

   4. Sync the new files to your S3 bucket.

   5. Tell CloudFront to refresh its cache.

3. Once the pipeline shows a green checkmark, go back to your CloudFront dashboard in AWS, copy the Distribution domain name (e.g., d123xyz.cloudfront.net), and paste it into your browser.

Troubleshooting: Fixing the Common "Access Denied" Error

After deploying, it's very common to see an XML AccessDenied error when you visit your CloudFront URL. Don't worry, your pipeline worked perfectly! This is a simple permissions issue between CloudFront and S3.

Here are the two most common causes and how to fix them.

1. Add a Default Root Object

CloudFront doesn't automatically know that index.html is your main page. You have to tell it.

• In your CloudFront distribution, go to the General tab.

• Under Settings, click Edit.

• In the Default root object field, type index.html.

• Click Save changes.

Your application is now live, served from a global CDN, and deployed with a professional-grade CI/CD pipeline.

To test it, make a small change to the code (e.g., change the title in src/App.jsx), commit, and push again. Within minutes, your change will be live without any manual intervention.

That's how you deploy like a pro.
`Note` Added terraform scripts so you can provision entire AWS infrastructure in one click: terraform script

Next Steps: In a future article, we'll see how to deploy backend Rest API like a pro!