DEV Community: Pablo Eliseo

Deploying a React + Vite SPA to a Private S3 Bucket with CloudFront and OAC

Pablo Eliseo — Wed, 19 Feb 2025 14:19:32 +0000

Deploying a React + Vite single-page application (SPA) to a private AWS S3 bucket while using CloudFront with Origin Access Control (OAC) requires careful setup, especially to handle client-side routing and asset paths properly. This guide will walk you through the complete process, highlighting critical aspects such as custom_error_response in CloudFront and the base config in vite.config.js.

1. Understanding How OAC, CloudFront, and S3 Work Together

What is Origin Access Control (OAC)?

OAC is a mechanism that allows CloudFront to securely access private content stored in an S3 bucket without exposing the bucket to the public internet. It replaces the older Origin Access Identity (OAI) with better security and fine-grained access control.

How CloudFront Works with S3 and OAC

S3 Bucket: Stores your static site files (HTML, JS, CSS, images, etc.). Since it's private, it cannot be accessed directly via a public URL.
CloudFront Distribution: Acts as a content delivery network (CDN), caching and serving requests efficiently.
OAC: Grants CloudFront permission to fetch content from the private S3 bucket.
Custom Error Handling: Ensures deep links and client-side routing work properly by redirecting 404 errors for non-existing objects to index.html.

With this setup, users access CloudFront, which in turn retrieves the content from the private S3 bucket, ensuring security and performance.

2. Setting Up the S3 Bucket

Since the S3 bucket is private, it must be configured to allow CloudFront access via OAC.

Terraform Configuration:

resource "aws_s3_bucket" "spa_bucket" {
  bucket = "react-vite-app"
  acl    = "private"
}

resource "aws_s3_bucket_policy" "bucket_policy" {
  bucket = aws_s3_bucket.spa_bucket.id

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Sid       = "AllowCloudFrontAccess"
        Effect    = "Allow"
        Principal = { Service = "cloudfront.amazonaws.com" }
        Action    = "s3:GetObject"
        Resource  = "${aws_s3_bucket.spa_bucket.arn}/*"
        Condition = {
          StringEquals = { "AWS:SourceArn" = aws_cloudfront_distribution.spa_distribution.arn }
        }
      }
    ]
  })
}

3. Creating a CloudFront Distribution with Custom Error Handling

A major challenge when deploying an SPA is handling client-side routing. When a user directly visits /dashboard or /profile, CloudFront will look for dashboard/index.html or profile/index.html in S3, which doesn't exist. To fix this, we use custom_error_response to serve index.html whenever CloudFront encounters a 404 error.

Why Use `custom_error_response`?

SPAs rely on client-side routing. The React app should handle the routes, not CloudFront.
Prevents 404 errors. Instead of returning a 404 from S3, CloudFront serves index.html, allowing React to handle the routing.

Terraform Configuration:

resource "aws_cloudfront_distribution" "spa_distribution" {
  enabled = true

  origin {
    domain_name = aws_s3_bucket.spa_bucket.bucket_regional_domain_name
    origin_id   = "spa-s3-origin"
    origin_access_control_id = aws_cloudfront_origin_access_control.oac.id
  }

  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "spa-s3-origin"
    viewer_protocol_policy = "redirect-to-https"

    forwarded_values {
      query_string = true
      cookies { forward = "none" }
    }
  }

  custom_error_response {
    error_code         = 404
    response_code      = 200
    response_page_path = "/index.html"
  }
}

It is very important here not to use the origin_request_policy_id = "216adef6-5c7f-47e4-b989-5492eafa07d3" # AllViewer - Default ID as the AllViewer request policy forwards the host to the S3 bucket which will be configured to only accept requests from Cloudfront.

4. Why Use Vite Instead of Webpack?

Advantages of Vite

Faster Development: Vite uses native ES modules, significantly improving development speed compared to Webpack.
Better Performance: It only rebuilds changed files instead of bundling everything together.
Optimized Build Output: Vite produces highly optimized static assets, reducing bundle size and improving load times.

For SPAs, especially with React, Vite provides a better developer experience and faster deployments.

5. When to Use This Approach vs. Other Alternatives

Use This Approach When:

You need a pure client-side application without server-side rendering (SSR).
You want cost-effective static hosting with high security.
You want full control over AWS infrastructure.

Consider Other Options When:

Next.js: If you need SSR or static site generation (SSG), Next.js on Vercel or AWS Lambda may be a better choice.
Gatsby: If your site is primarily static content with pre-built pages.
AWS Amplify: If you prefer a managed service that simplifies the deployment process.

6. Configuring Vite for Correct Asset Paths

Why the `base` Option in `vite.config.js`?

Vite's base configuration determines how URLs are resolved in the generated output. If not set correctly, assets (JavaScript, CSS, favicon) may try to load from incorrect paths when navigating to deeper routes.

Why Use `base: '/'`?

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/", // Ensures all assets use absolute paths from the root
  plugins: [react()],
  build: {
    outDir: "dist",
  },
});

7. Deploying with GitHub Actions

To automate deployment, we use GitHub Actions to build and upload the React app to the S3 bucket. I am using Github Actions Secrets and Variables for configuring the workflow.

name: Deploy to S3
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v3
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Dependencies
        run: npm install
      - name: Build Application
        run: npm run build
      - name: Configure
        uses: aws-actions/configure-aws-credentials@v4.0.2
        with:
          aws-region: "${{ vars.AWS_REGION }}"
          role-to-assume: "arn:aws:iam::${{ vars.AWS_ACCOUNT_ID }}:role/github-actions_role"
          role-session-name: "GitHub-Actions_Publish_Static_Site"
      - name: Deploy static site to S3 bucket
        run: aws s3 sync ./dist/ s3://${{ vars.AWS_S3_BUCKET_NAME }} --delete --region ${{ vars.AWS_REGION }}

Also, I am configuring the AWS credentials by using a IAM role. See this guide for more information on the topic.

Conclusion

This guide covered deploying a React + Vite SPA securely on AWS using S3, CloudFront, and OAC. By setting up CloudFront with custom_error_response, using Vite for efficient builds, and automating deployment with GitHub Actions, you ensure a smooth, performant, and cost-effective solution for hosting your SPA.
You can find the full code (with some more improvements) in this GitHub repository

The Future is Remote: The Pros, Cons, and Solutions to Working from Home

Pablo Eliseo — Mon, 16 Oct 2023 10:42:14 +0000

Introduction:

Hi, I am Pablo, a software engineer at One Beyond. Even before I joined this company I worked remotely from several locations, including Maastricht, Berlin and Valladolid, my hometown.

I enjoyed everything in the first months. The obvious advantages of working from home energized me, but over time, it grew a little more challenging for me. I made the decision to do my own research about remote work at that time because, despite being my first time, a lot of individuals effectively run their businesses in this way.

A sizeable part of IT company personnel has been working remotely for a while now, so I wanted to ask these colleagues if this is their dream situation. In my opinion, the quality of life can increase tremendously after you know what to expect and how to deal with the drawbacks related to remote working.

Additionally, I would like to note that the entire post is based on my experience with remote work. Therefore, it is obvious that it is biased by my personal viewpoint and that it varies from person to person. Some advantages and disadvantages may be more objective than others, though. I do not want to claim to be an authority; I just want to share my opinion about this topic with you.

Pros of Working Remotely:

Flexibility: One of the most prized benefits. Work hours should be scheduled around your most productive times or around your personal commitments. I, for example, like to go to the gym first thing in the morning. Then I start working a bit later, but I'm fully awake and productive.
Cost Savings: Working from home cuts down the daily commute, leading to marked savings on fuel, public transport, and vehicle upkeep. Additionally, preparing meals at home curbs expenses on often-overpriced office dining options.
Work-Life Balance: The flexibility afforded by remote working in the UK makes it considerably easier to juggle work responsibilities with personal obligations, be it spending quality time with family, pursuing hobbies, or attending to household chores without feeling overwhelmed.

Access to a Global Talent Pool: In the UK's evolving business landscape, remote work breaks down geographic barriers, allowing companies to tap into a vast global talent pool, ensuring they're not confined to hiring just within their immediate vicinity or region.
Reduced Overhead for Companies: Embracing remote work in the UK context allows businesses to significantly cut costs, as the need for extensive office space, associated utilities, and various on-site resources diminishes, leading to more streamlined operations and increased profitability.
Environmentally Friendly: Within the drive towards sustainability, remote working offers tangible benefits; fewer individuals commuting daily leads to reduced carbon emissions and less traffic congestion, contributing to a greener, cleaner environment and supporting the country's eco-conscious goals.
Customized Work Environment: In the modern work landscape, remote employees have the liberty to tailor their workspace to their preferences, fostering a comfortable environment that not only boosts morale but also enhances productivity by catering to individual needs and tastes.

Cons of Working Remotely:

Isolation: For employees, the shift to remote work can heighten feelings of loneliness due to diminished face-to-face interactions, potentially impacting well-being and cohesion across various teams and time zones.

Distractions: The home environment introduces unique challenges, where anything from playful dogs to pending domestic chores can divert attention, potentially impeding productivity and focus during working hours.
Overworking: A notable concern arises for many individuals who struggle to "switch off" and delineate professional responsibilities from personal time, lacking the traditional boundaries set by a physical office environment.
Communication Barriers: Navigating the world of global remote employment presents challenges, notably the potential hurdles in ensuring clear and effective communication or collaboration, given the absence of face-to-face interactions and the nuances lost in virtual exchanges.
Security Issues: There is an amplified concern surrounding the potential vulnerabilities in safeguarding confidential data, with the absence of controlled office infrastructures potentially compromising information security protocols.
Lack of Team Cohesion: The absence of regular face-to-face interactions poses challenges in fostering genuine team chemistry, potentially making it harder to cultivate a sense of unity and shared purpose among diverse team members.

How to successfully work from home:

Combat Isolation:

Virtual Social Events: Plan online game evenings, coffee breaks, or team-building activities. In our team, we have a weekly meeting to talk about non-work-related stuff or play a simple online game.
Co-working Spaces: People who miss working in an office setting might spend some time in shared communal workspaces.

Minimize Distractions:

Dedicated Workspace: Create a separate environment for work to help you psychologically distinguish between work and home modes. I usually work from a spare room I set up as my working office.
Time management strategies: These strategies, such as the Pomodoro technique, a time management method where work is broken into intervals, typically 25 minutes long, separated by short breaks, can help you stay focused.

Prevent Overworking:

Set Up Clearly Delineated Boundaries: Choose your work's start and end times. It can be helpful to have another activity booked after your finishing time, such as language classes or practicing a sport.
Regular Breaks: Be careful and remember to take brief rest periods, most of the time 5 minutes is enough.

Enhance Communication:

Tools & Software: For seamless communication, use collaborative applications like Slack, Zoom, or Microsoft Teams.
To make sure everyone is on the same page, schedule daily or weekly team meetings.

Address Security Concerns:

Use encryption and a virtual private network (VPN) to secure data transfer when needed, protecting it from unauthorized interception and ensuring privacy.
Regular Training: Inform staff members of the best ways to keep data integrity.

Build Team Cohesion:

On-site Retreats: Plan quarterly or annual retreats to foster interpersonal relationships. I cannot wait for Christmas dinner!
Tools for Team Collaboration: Sites like Jira or Asana can keep everyone in the loop. A properly organized Jira board can give you all the insight you need to know about what your colleagues are doing.

Conclusion:

Despite working remotely having its share of difficulties, there are many advantages. The proper tactics, resources, and attitude can help you get through such obstacles.

As remote work becomes more prevalent, adapting and adjusting to this paradigm is not only necessary but also a chance for growth, balance, and profitability.

Remote work has offered me the luxury of balancing work and life from the comfort of my home, ending long commutes and rigid office hours. But I understand that it could be difficult for some people. Is this virtual work environment something you would thrive in, or would you miss the buzz and camaraderie of a traditional office? Can you stay disciplined and productive without the physical boundaries of a workplace?

DEV Community: Pablo Eliseo

Deploying a React + Vite SPA to a Private S3 Bucket with CloudFront and OAC

1. Understanding How OAC, CloudFront, and S3 Work Together

What is Origin Access Control (OAC)?

How CloudFront Works with S3 and OAC

2. Setting Up the S3 Bucket

Terraform Configuration:

3. Creating a CloudFront Distribution with Custom Error Handling

Why Use custom_error_response?

Terraform Configuration:

4. Why Use Vite Instead of Webpack?

Advantages of Vite

5. When to Use This Approach vs. Other Alternatives

Use This Approach When:

Consider Other Options When:

6. Configuring Vite for Correct Asset Paths

Why the base Option in vite.config.js?

Why Use base: '/'?

7. Deploying with GitHub Actions

Conclusion

The Future is Remote: The Pros, Cons, and Solutions to Working from Home

Introduction:

Pros of Working Remotely:

Cons of Working Remotely:

How to successfully work from home:

Combat Isolation:

Minimize Distractions:

Prevent Overworking:

Enhance Communication:

Address Security Concerns:

Build Team Cohesion:

Conclusion:

Why Use `custom_error_response`?

Why the `base` Option in `vite.config.js`?

Why Use `base: '/'`?