<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: TANUJ AJ</title>
    <description>The latest articles on DEV Community by TANUJ AJ (@tanuj_aj_c22d6688be1eaa79).</description>
    <link>https://dev.to/tanuj_aj_c22d6688be1eaa79</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4125507%2Fb2ee0fdc-d435-4b0b-9751-7eb2e272edc7.png</url>
      <title>DEV Community: TANUJ AJ</title>
      <link>https://dev.to/tanuj_aj_c22d6688be1eaa79</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/tanuj_aj_c22d6688be1eaa79"/>
    <language>en</language>
    <item>
      <title>T for Tanuj, T for Timestream: Exploring Amazon Timestream</title>
      <dc:creator>TANUJ AJ</dc:creator>
      <pubDate>Wed, 16 Sep 2026 04:33:21 +0000</pubDate>
      <link>https://dev.to/tanuj_aj_c22d6688be1eaa79/t-for-tanuj-t-for-timestream-exploring-amazon-timestream-25n2</link>
      <guid>https://dev.to/tanuj_aj_c22d6688be1eaa79/t-for-tanuj-t-for-timestream-exploring-amazon-timestream-25n2</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;As part of my AWS learning activity, I participated in the Rhyming Game Contest, where each student had to select an AWS service connected to the first letter of their name.&lt;/p&gt;

&lt;p&gt;My name is &lt;strong&gt;Tanuj A J&lt;/strong&gt;, so I selected &lt;strong&gt;Amazon Timestream&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In this blog, I will explain what Amazon Timestream is, why it was created, how it works, its key features, a practical college/student use case, a simple example, advantages, limitations, cost considerations, and security aspects.&lt;/p&gt;




&lt;h1&gt;
  
  
  ☁️ What is Amazon Timestream?
&lt;/h1&gt;

&lt;p&gt;&lt;strong&gt;Amazon Timestream&lt;/strong&gt; is a fully managed, purpose-built time-series database service from AWS.&lt;/p&gt;

&lt;p&gt;A time-series database is designed to store data points that are recorded over time. Examples include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Temperature readings&lt;/li&gt;
&lt;li&gt;CPU utilization&lt;/li&gt;
&lt;li&gt;Weather measurements&lt;/li&gt;
&lt;li&gt;IoT sensor readings&lt;/li&gt;
&lt;li&gt;Application metrics&lt;/li&gt;
&lt;li&gt;Website activity&lt;/li&gt;
&lt;li&gt;Vehicle telemetry&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example, imagine a temperature sensor sending a reading every second:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;10:00:01 → 28°C
10:00:02 → 28.1°C
10:00:03 → 28.2°C
10:00:04 → 28.4°C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The important part is not just the temperature value, but &lt;strong&gt;how that value changes over time&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Amazon Timestream was designed specifically for workloads involving large amounts of time-series data. AWS describes Timestream for LiveAnalytics as a serverless, scalable service capable of storing and analyzing very large volumes of time-series data while automatically managing the underlying infrastructure.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why was Timestream created?
&lt;/h3&gt;

&lt;p&gt;Traditional relational databases can store time-series information, but applications dealing with huge volumes of continuously generated measurements can require specialized approaches.&lt;/p&gt;

&lt;p&gt;Amazon Timestream was created to make it easier to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ingest large volumes of time-series data&lt;/li&gt;
&lt;li&gt;Analyze recent and historical data&lt;/li&gt;
&lt;li&gt;Automatically manage data storage&lt;/li&gt;
&lt;li&gt;Scale according to workload&lt;/li&gt;
&lt;li&gt;Perform time-based analytics&lt;/li&gt;
&lt;li&gt;Reduce database administration work&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It is particularly useful for IoT, application monitoring, operational analytics, and telemetry workloads.&lt;/p&gt;




&lt;h1&gt;
  
  
  ⚙️ How It Works
&lt;/h1&gt;

&lt;p&gt;At a basic level, the process looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;      Data Sources
           │
           ▼
 ┌─────────────────────┐
 │ IoT / Applications   │
 │ Sensors / Devices   │
 └──────────┬──────────┘
            │
            ▼
 ┌─────────────────────┐
 │ Amazon Timestream   │
 │                     │
 │  Data Ingestion     │
 └──────────┬──────────┘
            │
            ▼
 ┌─────────────────────┐
 │     Storage         │
 │                     │
 │ Memory Store        │
 │        ↓            │
 │ Magnetic Store      │
 └──────────┬──────────┘
            │
            ▼
 ┌─────────────────────┐
 │ Query &amp;amp; Analytics   │
 └──────────┬──────────┘
            │
            ▼
      Dashboard /
       Application
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The basic workflow is:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Data is generated&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sensors, applications, devices, or other systems continuously generate measurements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Data is ingested&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The data is sent to Amazon Timestream.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Data is stored&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Timestream provides different storage tiers for recent and historical information.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Data is queried&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Applications can use SQL-based queries to analyze the data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Results are used&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The results can be used for dashboards, monitoring, alerts, analytics, or machine-learning workflows.&lt;/p&gt;

&lt;p&gt;Amazon's architecture separates data ingestion, storage, and query processing so that these components can scale independently.&lt;/p&gt;




&lt;h1&gt;
  
  
  🧩 Storage Architecture
&lt;/h1&gt;

&lt;p&gt;One of the interesting parts of Timestream is its storage model.&lt;/p&gt;

&lt;p&gt;It provides:&lt;/p&gt;

&lt;h3&gt;
  
  
  Memory Store
&lt;/h3&gt;

&lt;p&gt;The memory store is designed for recent data and workloads that require fast access to current information.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Current temperature
Current CPU usage
Current server metrics
Live sensor readings
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Magnetic Store
&lt;/h3&gt;

&lt;p&gt;The magnetic store is designed for historical data and cost-efficient long-term storage.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Last month's temperature data
Previous year's server metrics
Historical IoT readings
Long-term application statistics
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Timestream can automatically move data between these storage tiers based on retention policies configured by the user.&lt;/p&gt;




&lt;h1&gt;
  
  
  ⭐ Key Features
&lt;/h1&gt;

&lt;h2&gt;
  
  
  1. Serverless and Automatic Scaling
&lt;/h2&gt;

&lt;p&gt;Amazon Timestream is serverless, which means developers don't need to manage database servers or manually provision capacity.&lt;/p&gt;

&lt;p&gt;It can automatically scale based on the workload.&lt;/p&gt;

&lt;p&gt;This is useful when an application suddenly starts receiving a much larger amount of sensor or monitoring data.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. Time-Series Optimized
&lt;/h2&gt;

&lt;p&gt;Timestream is specifically designed for time-series workloads.&lt;/p&gt;

&lt;p&gt;Instead of treating time as just another column, its architecture and query capabilities are designed around data that changes over time.&lt;/p&gt;

&lt;p&gt;It also provides built-in time-series functions for analyzing trends, aggregates, and other time-based patterns.&lt;/p&gt;




&lt;h2&gt;
  
  
  3. Automatic Data Lifecycle Management
&lt;/h2&gt;

&lt;p&gt;Managing recent and historical data manually can become complicated.&lt;/p&gt;

&lt;p&gt;Timestream simplifies this by allowing retention policies that control how long data remains in the memory store before moving to the magnetic store.&lt;/p&gt;

&lt;p&gt;This can reduce the amount of manual data-management work required.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. SQL-Based Queries
&lt;/h2&gt;

&lt;p&gt;Developers familiar with SQL can use SQL-style queries to analyze time-series information.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="nb"&gt;time&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;temperature&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;campus_temperature&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="nb"&gt;time&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;ago&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="n"&gt;h&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="nb"&gt;time&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This type of query could be used to retrieve recent temperature readings.&lt;/p&gt;




&lt;h2&gt;
  
  
  5. AWS Integrations
&lt;/h2&gt;

&lt;p&gt;Timestream can integrate with other AWS services and tools.&lt;/p&gt;

&lt;p&gt;Examples include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS IoT Core&lt;/li&gt;
&lt;li&gt;Amazon Kinesis&lt;/li&gt;
&lt;li&gt;Amazon MSK&lt;/li&gt;
&lt;li&gt;Amazon SageMaker&lt;/li&gt;
&lt;li&gt;Amazon QuickSight&lt;/li&gt;
&lt;li&gt;Grafana&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These integrations make it possible to collect data, store it, analyze it, visualize it, and use it in machine-learning workflows.&lt;/p&gt;




&lt;h1&gt;
  
  
  🎓 College / Student Use Case
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Smart Campus Monitoring System
&lt;/h2&gt;

&lt;p&gt;A practical use case for my college could be a &lt;strong&gt;Smart Campus Monitoring System&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Imagine that sensors are installed across the campus to measure:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Classroom temperature&lt;/li&gt;
&lt;li&gt;Electricity consumption&lt;/li&gt;
&lt;li&gt;Server room temperature&lt;/li&gt;
&lt;li&gt;Air quality&lt;/li&gt;
&lt;li&gt;Water usage&lt;/li&gt;
&lt;li&gt;Laboratory equipment status&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The sensors could continuously send measurements to a backend system.&lt;/p&gt;

&lt;h3&gt;
  
  
  Architecture
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;        Campus Sensors
              │
              ▼
       AWS IoT Core
              │
              ▼
      Amazon Timestream
              │
       ┌──────┴──────┐
       ▼             ▼
   Recent Data   Historical Data
       │             │
       └──────┬──────┘
              ▼
       Analytics Layer
              │
       ┌──────┴──────┐
       ▼             ▼
   Dashboard      ML Model
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, an AIML student could build a model that analyzes historical temperature and equipment data to identify unusual patterns.&lt;/p&gt;

&lt;p&gt;The system could then be used for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Predictive maintenance&lt;/li&gt;
&lt;li&gt;Energy monitoring&lt;/li&gt;
&lt;li&gt;Classroom environment monitoring&lt;/li&gt;
&lt;li&gt;Equipment failure detection&lt;/li&gt;
&lt;li&gt;Campus resource optimization&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This would also provide a practical project combining &lt;strong&gt;IoT + Cloud + AI/ML&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  💻 Simple Example
&lt;/h1&gt;

&lt;p&gt;Suppose our college has a temperature sensor in a computer laboratory.&lt;/p&gt;

&lt;p&gt;Every minute, it sends:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Timestamp: 2026-09-16 10:00:00
Room: AIML-Lab-1
Temperature: 24.5°C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Another reading arrives:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Timestamp: 2026-09-16 10:01:00
Room: AIML-Lab-1
Temperature: 24.8°C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The application could store these readings in Timestream.&lt;/p&gt;

&lt;p&gt;A simple query could retrieve the latest readings:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight sql"&gt;&lt;code&gt;&lt;span class="k"&gt;SELECT&lt;/span&gt;
    &lt;span class="nb"&gt;time&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;room&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;temperature&lt;/span&gt;
&lt;span class="k"&gt;FROM&lt;/span&gt; &lt;span class="n"&gt;lab_temperature&lt;/span&gt;
&lt;span class="k"&gt;WHERE&lt;/span&gt; &lt;span class="n"&gt;room&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s1"&gt;'AIML-Lab-1'&lt;/span&gt;
&lt;span class="k"&gt;ORDER&lt;/span&gt; &lt;span class="k"&gt;BY&lt;/span&gt; &lt;span class="nb"&gt;time&lt;/span&gt; &lt;span class="k"&gt;DESC&lt;/span&gt;
&lt;span class="k"&gt;LIMIT&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result could then be displayed on a dashboard.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;AIML LAB - TEMPERATURE

10:00 AM    24.5°C
10:01 AM    24.8°C
10:02 AM    25.0°C
10:03 AM    25.2°C
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the temperature suddenly increases, the application could trigger an alert or send the data to a machine-learning model for anomaly detection.&lt;/p&gt;

&lt;p&gt;AWS provides SDKs, APIs, CLI support, and sample code for working with Timestream.&lt;/p&gt;




&lt;h1&gt;
  
  
  ✅ Advantages
&lt;/h1&gt;

&lt;h3&gt;
  
  
  1. Fully Managed
&lt;/h3&gt;

&lt;p&gt;AWS manages much of the underlying infrastructure, allowing developers to focus on their applications instead of database administration.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Automatic Scaling
&lt;/h3&gt;

&lt;p&gt;Timestream can scale according to workload, which is useful for applications where data volume changes over time.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Designed for Time-Series Data
&lt;/h3&gt;

&lt;p&gt;The service is specifically designed for data such as metrics, telemetry, sensor readings, and monitoring information.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Data Lifecycle Management
&lt;/h3&gt;

&lt;p&gt;Users can configure retention policies to manage recent and historical data across storage tiers.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. AWS Ecosystem Integration
&lt;/h3&gt;

&lt;p&gt;Timestream can work with AWS IoT, Kinesis, SageMaker, QuickSight, Grafana, and other tools.&lt;/p&gt;




&lt;h1&gt;
  
  
  ⚠️ Limitations / Things to Consider
&lt;/h1&gt;

&lt;h2&gt;
  
  
  💰 Cost
&lt;/h2&gt;

&lt;p&gt;Amazon Timestream uses a usage-based pricing model. AWS currently offers on-demand pricing with no minimum fees or upfront commitments, as well as Database Savings Plans for eligible usage commitments. Actual costs depend on the database engine, data ingestion, queries, storage, and workload.&lt;/p&gt;

&lt;p&gt;For students, it is important to monitor AWS usage and delete resources or stop workloads that are no longer required.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Complexity
&lt;/h2&gt;

&lt;p&gt;Although Timestream is managed, understanding concepts such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Time-series data&lt;/li&gt;
&lt;li&gt;Tables&lt;/li&gt;
&lt;li&gt;Dimensions&lt;/li&gt;
&lt;li&gt;Measures&lt;/li&gt;
&lt;li&gt;Retention policies&lt;/li&gt;
&lt;li&gt;SQL queries&lt;/li&gt;
&lt;li&gt;AWS IAM&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;is useful before building a larger application.&lt;/p&gt;

&lt;p&gt;For a beginner, starting with a small dataset is a good way to understand the service.&lt;/p&gt;




&lt;h2&gt;
  
  
  📈 Scalability
&lt;/h2&gt;

&lt;p&gt;Scalability is one of Timestream's major strengths, but highly scalable systems can also generate significant usage if large amounts of data are continuously ingested and queried.&lt;/p&gt;

&lt;p&gt;Therefore, applications should still be designed carefully and monitored.&lt;/p&gt;




&lt;h2&gt;
  
  
  🔐 Security
&lt;/h2&gt;

&lt;p&gt;Security is important when collecting data from IoT devices or applications.&lt;/p&gt;

&lt;p&gt;AWS states that Timestream data is encrypted, and the service supports AWS identity and access controls as well as AWS KMS options for applicable encryption scenarios.&lt;/p&gt;

&lt;p&gt;For a college project, IAM permissions should follow the principle of least privilege instead of giving every user administrative access.&lt;/p&gt;




&lt;h1&gt;
  
  
  🔍 When Would I Choose Timestream?
&lt;/h1&gt;

&lt;p&gt;Timestream is particularly suitable when an application continuously produces data that needs to be analyzed according to time.&lt;/p&gt;

&lt;p&gt;Examples include:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;IoT Sensors
     ↓
Application Metrics
     ↓
Server Monitoring
     ↓
Vehicle Telemetry
     ↓
Industrial Equipment
     ↓
Real-Time Analytics
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If the application mainly requires traditional transactional data such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Student ID
Student Name
Course
Department
Phone Number
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then a conventional relational database may be more appropriate.&lt;/p&gt;

&lt;p&gt;The choice of database should therefore depend on the type of data and workload.&lt;/p&gt;




&lt;h1&gt;
  
  
  🎯 Conclusion
&lt;/h1&gt;

&lt;p&gt;Amazon Timestream is a specialized AWS database service designed for &lt;strong&gt;time-series data&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Its serverless architecture, automatic scaling, storage lifecycle management, time-series analytics capabilities, and integration with other AWS services make it useful for applications involving continuously generated data.&lt;/p&gt;

&lt;p&gt;For students, Timestream can be especially interesting when building projects involving &lt;strong&gt;IoT, cloud computing, monitoring, analytics, and AI/ML&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;For example, a Smart Campus Monitoring System could collect sensor data using AWS IoT, store it in Timestream, visualize it through a dashboard, and use machine learning to detect unusual patterns.&lt;/p&gt;

&lt;p&gt;Through this activity, I learned that choosing the right database depends not only on how much data an application has, but also on &lt;strong&gt;the type of data, how frequently it changes, and how it needs to be analyzed&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;And finally:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;T for Tanuj, T for Timestream! 🚀☁️&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  📚 References
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;AWS — Amazon Timestream Overview&lt;/li&gt;
&lt;li&gt;AWS — Amazon Timestream Documentation&lt;/li&gt;
&lt;li&gt;AWS — Amazon Timestream Architecture&lt;/li&gt;
&lt;li&gt;AWS — Amazon Timestream Features&lt;/li&gt;
&lt;li&gt;AWS — Amazon Timestream Pricing&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>aws</category>
      <category>cloud</category>
      <category>database</category>
      <category>learning</category>
    </item>
    <item>
      <title>Day-1 Cloud Workshop</title>
      <dc:creator>TANUJ AJ</dc:creator>
      <pubDate>Tue, 15 Sep 2026 06:54:48 +0000</pubDate>
      <link>https://dev.to/tanuj_aj_c22d6688be1eaa79/day-1-cloud-workshop-5022</link>
      <guid>https://dev.to/tanuj_aj_c22d6688be1eaa79/day-1-cloud-workshop-5022</guid>
      <description>&lt;h1&gt;
  
  
  I Built and Deployed My First React Portfolio on AWS S3 + CloudFront — And Broke It Along the Way
&lt;/h1&gt;

&lt;p&gt;As a Computer Science student, I’ve been trying to move away from just &lt;strong&gt;writing code by following tutorials&lt;/strong&gt; and actually understand how things work by building and deploying projects.&lt;/p&gt;

&lt;p&gt;One of the things I wanted to build was a simple personal portfolio.&lt;/p&gt;

&lt;p&gt;It sounded easy:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Build a React portfolio → upload it to AWS → get a public URL.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It wasn't quite that simple.&lt;/p&gt;

&lt;p&gt;I ran into permissions issues, S3 configuration problems, CloudFront errors, and eventually discovered that I had accidentally configured CloudFront to look for:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the story of how I built it, broke it, debugged it, and finally understood what was actually happening.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Starting With a Simple HTML Portfolio
&lt;/h2&gt;

&lt;p&gt;I initially created my portfolio using a single:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I kept the design intentionally simple.&lt;/p&gt;

&lt;p&gt;The portfolio contained:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;About Me&lt;/li&gt;
&lt;li&gt;Technical Skills&lt;/li&gt;
&lt;li&gt;Projects&lt;/li&gt;
&lt;li&gt;Education&lt;/li&gt;
&lt;li&gt;Areas of Interest&lt;/li&gt;
&lt;li&gt;Contact&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some of the projects and areas I included were:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CLOTE — self-hosted cloud file management&lt;/li&gt;
&lt;li&gt;Automated Data Intelligence System&lt;/li&gt;
&lt;li&gt;Graph Algorithm Visualizer&lt;/li&gt;
&lt;li&gt;ML Ad-Click Prediction&lt;/li&gt;
&lt;li&gt;City-Specific Smart Traffic System&lt;/li&gt;
&lt;li&gt;Knowledge-Based Systems&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At this point, everything worked locally.&lt;/p&gt;

&lt;p&gt;I could simply open the HTML file in my browser and see the portfolio.&lt;/p&gt;

&lt;p&gt;But then I wanted to actually &lt;strong&gt;deploy it&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  2. Moving to AWS S3
&lt;/h1&gt;

&lt;p&gt;I decided to use Amazon S3 for hosting.&lt;/p&gt;

&lt;p&gt;I created an S3 bucket and uploaded my portfolio.&lt;/p&gt;

&lt;p&gt;The object looked like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;s3://portfolio-tanuj/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;My first assumption was:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The file is uploaded, so anyone should be able to open it."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That assumption was wrong.&lt;/p&gt;

&lt;p&gt;When I tried accessing the website, I received:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight xml"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;Error&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;Code&amp;gt;&lt;/span&gt;AccessDenied&lt;span class="nt"&gt;&amp;lt;/Code&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;Message&amp;gt;&lt;/span&gt;Access Denied&lt;span class="nt"&gt;&amp;lt;/Message&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/Error&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  3. First Struggle — S3 AccessDenied
&lt;/h1&gt;

&lt;p&gt;This was my first real AWS deployment problem.&lt;/p&gt;

&lt;p&gt;The HTML itself wasn't the issue.&lt;/p&gt;

&lt;p&gt;The problem was with &lt;strong&gt;S3 permissions and website access configuration&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I had to understand the relationship between:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;S3 Bucket
    ↓
Object
    ↓
Permissions
    ↓
Static Website Hosting
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I configured static website hosting and worked through the public-access configuration and bucket policy.&lt;/p&gt;

&lt;p&gt;The important part of the bucket policy was allowing public &lt;code&gt;GetObject&lt;/code&gt; access:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"Version"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2012-10-17"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"Statement"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"Sid"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"PublicReadGetObject"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"Effect"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Allow"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"Principal"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"*"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"Action"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"s3:GetObject"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"Resource"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"arn:aws:s3:::portfolio-nith/*"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But then I ran into another issue.&lt;/p&gt;




&lt;h1&gt;
  
  
  4. My Bucket Name Wasn't What I Thought
&lt;/h1&gt;

&lt;p&gt;At one point I was working with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;tanuj-bucket-portfolio
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But when I looked at my AWS console, the actual bucket I was configuring was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;portfolio-tanuj
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That caused confusion while creating the bucket policy.&lt;/p&gt;

&lt;p&gt;AWS was telling me:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Policy has invalid resource
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The reason was simple.&lt;/p&gt;

&lt;p&gt;The policy resource has to reference the &lt;strong&gt;actual bucket name&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;So:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arn:aws:s3:::portfolio-tanuj/*
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;instead of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arn:aws:s3:::tanuj-bucket-portfolio/*
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That was a small mistake, but it taught me something important:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Don't blindly copy AWS configuration. Understand what resource you're actually configuring.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h1&gt;
  
  
  5. Then I Wanted to Use React
&lt;/h1&gt;

&lt;p&gt;Once I had the basic portfolio working, I decided to convert it into a React application.&lt;/p&gt;

&lt;p&gt;Instead of one large HTML file, I moved to a React + Vite structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;portfolio/
│
├── index.html
├── package.json
│
└── src/
    ├── main.jsx
    └── style.css
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I used React to render the portfolio sections and JavaScript arrays for things like skills and projects.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;skills&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Python&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;C / C++&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Data Structures &amp;amp; Algorithms&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Machine Learning&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;TensorFlow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;NumPy&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Pandas&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Docker&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And projects were represented as data:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;projects&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;CLOTE&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;...&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;tech&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Private Cloud • File Management&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This was my first step toward understanding how a real frontend project is structured rather than putting everything into one HTML file.&lt;/p&gt;




&lt;h1&gt;
  
  
  6. Understanding &lt;code&gt;npm run build&lt;/code&gt;
&lt;/h1&gt;

&lt;p&gt;This was another important part.&lt;/p&gt;

&lt;p&gt;I initially thought:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Since it's React, I need a server running on AWS."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Not necessarily.&lt;/p&gt;

&lt;p&gt;React can be built into static files.&lt;/p&gt;

&lt;p&gt;I ran:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Vite generated:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dist/
│
├── index.html
└── assets/
    ├── ...
    └── ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This was a major realization for me.&lt;/p&gt;

&lt;p&gt;The browser doesn't need my React source code or Node.js running on S3.&lt;/p&gt;

&lt;p&gt;The production build becomes static assets that can be served by a web server.&lt;/p&gt;

&lt;p&gt;So the deployment becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React source
     ↓
npm run build
     ↓
dist/
     ↓
AWS S3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  7. Adding CloudFront
&lt;/h1&gt;

&lt;p&gt;Then I wanted to put CloudFront in front of S3.&lt;/p&gt;

&lt;p&gt;The architecture became:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                    ┌──────────────┐
                    │    Browser   │
                    └──────┬───────┘
                           │
                           ▼
                    ┌──────────────┐
                    │  CloudFront  │
                    └──────┬───────┘
                           │
                           ▼
                    ┌──────────────┐
                    │      S3      │
                    │   index.html │
                    │    assets/   │
                    └──────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This was the point where things got interesting.&lt;/p&gt;




&lt;h1&gt;
  
  
  8. The CloudFront 404 Error
&lt;/h1&gt;

&lt;p&gt;Instead of my portfolio, CloudFront returned:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;404 Not Found

Code: NoSuchKey

Message: The specified key does not exist.

Key: index.html/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At first I had no idea why AWS was asking for:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;My S3 bucket clearly contained:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;not:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So I started looking at the CloudFront configuration.&lt;/p&gt;




&lt;h1&gt;
  
  
  9. Finding the Actual Problem
&lt;/h1&gt;

&lt;p&gt;I checked the CloudFront origin configuration.&lt;/p&gt;

&lt;p&gt;And there it was.&lt;/p&gt;

&lt;p&gt;My origin looked like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Origin type: S3 static website
Origin path: /index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That was the mistake.&lt;/p&gt;

&lt;p&gt;CloudFront already knew that the default root object was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And I had also told the origin to use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So CloudFront effectively ended up requesting:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/index.html/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;S3 obviously couldn't find that object.&lt;/p&gt;

&lt;p&gt;The error suddenly made sense.&lt;/p&gt;




&lt;h1&gt;
  
  
  10. The Fix
&lt;/h1&gt;

&lt;p&gt;I changed the CloudFront origin path from:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;to:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;(empty)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And kept the CloudFront default root object as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So the configuration became conceptually:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CloudFront

Default root object:
index.html

Origin:
portfolio-nith S3 website endpoint

Origin path:
(empty)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now the request flow made sense:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/
 ↓
CloudFront
 ↓
index.html
 ↓
S3
 ↓
portfolio
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;instead of:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/
 ↓
CloudFront
 ↓
index.html
 ↓
/index.html
 ↓
index.html/index.html ❌
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h1&gt;
  
  
  11. Why I Had to Invalidate CloudFront
&lt;/h1&gt;

&lt;p&gt;Even after fixing the configuration, CloudFront can still have cached responses.&lt;/p&gt;

&lt;p&gt;So I created a CloudFront invalidation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/*
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This tells CloudFront to remove the cached objects so that the next request can fetch the updated content.&lt;/p&gt;




&lt;h1&gt;
  
  
  12. What I Actually Learned
&lt;/h1&gt;

&lt;p&gt;The biggest thing I learned from this wasn't React.&lt;/p&gt;

&lt;p&gt;It wasn't S3.&lt;/p&gt;

&lt;p&gt;It wasn't even CloudFront.&lt;/p&gt;

&lt;p&gt;It was &lt;strong&gt;debugging&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Before this, when something didn't work, my first instinct was often:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"The code must be wrong."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But this project showed me that problems can exist at completely different layers.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Frontend
   ↓
React
   ↓
Build
   ↓
Static files
   ↓
S3
   ↓
Permissions
   ↓
CloudFront
   ↓
Caching
   ↓
Browser
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A website can have perfectly valid React code and still return a 404 because the &lt;strong&gt;infrastructure configuration is wrong&lt;/strong&gt;.&lt;/p&gt;




&lt;h1&gt;
  
  
  13. My Struggles
&lt;/h1&gt;

&lt;p&gt;These were some of the problems I faced:&lt;/p&gt;

&lt;h3&gt;
  
  
  S3
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;AccessDenied
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I had to understand bucket permissions and public access.&lt;/p&gt;

&lt;h3&gt;
  
  
  Bucket policy
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Policy has invalid resource
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I was referencing the wrong bucket name.&lt;/p&gt;

&lt;h3&gt;
  
  
  CloudFront
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;NoSuchKey
Key: index.html/index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I had incorrectly configured the origin path.&lt;/p&gt;

&lt;h3&gt;
  
  
  Caching
&lt;/h3&gt;

&lt;p&gt;Even after fixing the configuration, CloudFront could still serve an old cached response.&lt;/p&gt;




&lt;h1&gt;
  
  
  14. What I Would Do Differently Next Time
&lt;/h1&gt;

&lt;p&gt;If I were starting this deployment again, my process would be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Build React application
        ↓
2. Test locally
        ↓
3. npm run build
        ↓
4. Check dist/
        ↓
5. Upload dist contents to S3
        ↓
6. Configure S3
        ↓
7. Configure CloudFront
        ↓
8. Test CloudFront
        ↓
9. Check logs/errors if something fails
        ↓
10. Invalidate cache when required
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And most importantly:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I would change one configuration at a time and test after each change.&lt;/strong&gt;&lt;/p&gt;




&lt;h1&gt;
  
  
  15. Final Architecture
&lt;/h1&gt;

&lt;p&gt;The final concept I learned is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                 ┌───────────────────┐
                 │       User        │
                 └─────────┬─────────┘
                           │
                           ▼
                 ┌───────────────────┐
                 │     CloudFront    │
                 │       CDN         │
                 └─────────┬─────────┘
                           │
                           ▼
                 ┌───────────────────┐
                 │    S3 Bucket      │
                 │                   │
                 │   index.html      │
                 │   assets/         │
                 └───────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;My React application is built into static files and served through AWS infrastructure.&lt;/p&gt;




&lt;h1&gt;
  
  
  Final Thoughts
&lt;/h1&gt;

&lt;p&gt;This was a relatively small project, but it gave me something more valuable than just a portfolio.&lt;/p&gt;

&lt;p&gt;It gave me experience with the uncomfortable part of development:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;things not working.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I had to read errors, inspect configuration, understand what AWS was actually doing, find the mismatch, and fix it.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;index.html/index.html&lt;/code&gt; error in particular was frustrating at first.&lt;/p&gt;

&lt;p&gt;But once I understood &lt;strong&gt;why&lt;/strong&gt; it happened, it became one of the most useful lessons from the project.&lt;/p&gt;

&lt;p&gt;I'm still learning AWS, React, and software development, but I'm slowly trying to replace:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Copy the code and hope it works"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;with:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Understand what each component is doing, then debug when it doesn't."&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And I think that's a much better way to learn development.&lt;/p&gt;




&lt;h3&gt;
  
  
  Tech Stack
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Frontend&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React&lt;/li&gt;
&lt;li&gt;Vite&lt;/li&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cloud&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Amazon S3&lt;/li&gt;
&lt;li&gt;Amazon CloudFront&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Development&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;VS Code&lt;/li&gt;
&lt;li&gt;npm&lt;/li&gt;
&lt;li&gt;Git/GitHub&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  react #aws #cloudfront #s3 #webdevelopment #javascript #vite #beginners #devjourney #learninginpublic
&lt;/h1&gt;

</description>
      <category>aws</category>
      <category>cloud</category>
      <category>debugging</category>
      <category>react</category>
    </item>
  </channel>
</rss>
