<?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: MOHA PRASATH SA</title>
    <description>The latest articles on DEV Community by MOHA PRASATH SA (@moha_prasathsa_8539853b2).</description>
    <link>https://dev.to/moha_prasathsa_8539853b2</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%2F4125519%2F0d0387b5-bf24-44bb-a446-8733a947f6cd.png</url>
      <title>DEV Community: MOHA PRASATH SA</title>
      <link>https://dev.to/moha_prasathsa_8539853b2</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/moha_prasathsa_8539853b2"/>
    <language>en</language>
    <item>
      <title>M for Moha, M for Amazon MQ: My First AWS Deep Dive</title>
      <dc:creator>MOHA PRASATH SA</dc:creator>
      <pubDate>Wed, 16 Sep 2026 02:42:35 +0000</pubDate>
      <link>https://dev.to/moha_prasathsa_8539853b2/m-for-moha-m-for-amazon-mq-my-first-aws-deep-dive-1fda</link>
      <guid>https://dev.to/moha_prasathsa_8539853b2/m-for-moha-m-for-amazon-mq-my-first-aws-deep-dive-1fda</guid>
      <description>&lt;p&gt;Cloud computing is not only about storing files or running websites. Modern applications also need different systems and services to communicate with each other reliably.&lt;/p&gt;

&lt;p&gt;For my AWS workshop, I explored &lt;strong&gt;Amazon MQ&lt;/strong&gt;, an AWS managed message broker service. Since my name starts with &lt;strong&gt;M&lt;/strong&gt;, I selected an AWS service starting with the same letter.&lt;/p&gt;

&lt;p&gt;My blog title is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;M for Moha, M for Amazon MQ: My First AWS Deep Dive&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In a distributed application, different components often need to exchange information.&lt;/p&gt;

&lt;p&gt;For example, imagine a college application where students register for courses. The registration system may need to send information to another system responsible for notifications, while another system may update student records.&lt;/p&gt;

&lt;p&gt;If all these systems communicate directly with each other, the architecture can become complicated.&lt;/p&gt;

&lt;p&gt;This is where &lt;strong&gt;message brokers&lt;/strong&gt; can help.&lt;/p&gt;

&lt;p&gt;Amazon MQ is a managed message broker service provided by AWS. It supports popular messaging technologies such as &lt;strong&gt;Apache ActiveMQ Classic and RabbitMQ&lt;/strong&gt;, allowing applications to communicate using established messaging protocols.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Amazon MQ?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Amazon MQ&lt;/strong&gt; is a managed message broker service from AWS.&lt;/p&gt;

&lt;p&gt;A message broker acts as an intermediate system between applications.&lt;/p&gt;

&lt;p&gt;Instead of Application A directly communicating with Application B, Application A can send a message to the broker. Application B can then receive the message from the broker.&lt;/p&gt;

&lt;p&gt;A simplified example is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Application A
     |
     | Message
     v
+----------------+
|  Amazon MQ     |
| Message Broker |
+----------------+
     |
     | Message
     v
Application B
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Amazon MQ is particularly useful when applications already use messaging technologies such as &lt;strong&gt;RabbitMQ or ActiveMQ Classic&lt;/strong&gt; and organizations want a managed service instead of managing the broker infrastructure themselves.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why was Amazon MQ created?
&lt;/h2&gt;

&lt;p&gt;Traditional message brokers require organizations to manage servers, software installation, configuration, maintenance, monitoring and availability.&lt;/p&gt;

&lt;p&gt;Amazon MQ provides a managed approach.&lt;/p&gt;

&lt;p&gt;AWS manages much of the underlying infrastructure, allowing developers to concentrate more on their applications and messaging architecture.&lt;/p&gt;

&lt;p&gt;Another important reason is compatibility.&lt;/p&gt;

&lt;p&gt;Organizations may already have applications built around established messaging systems. Moving everything to a completely different messaging technology can require significant application changes.&lt;/p&gt;

&lt;p&gt;Amazon MQ supports existing messaging technologies and protocols, making migration to AWS easier in suitable scenarios.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Amazon MQ Works
&lt;/h2&gt;

&lt;p&gt;The basic process can be explained in four steps.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Producer creates a message
&lt;/h3&gt;

&lt;p&gt;A producer application generates 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;"Student registration completed"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Message is sent to the broker
&lt;/h3&gt;

&lt;p&gt;The producer sends the message to Amazon MQ.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Broker manages the message
&lt;/h3&gt;

&lt;p&gt;The broker receives and manages the message according to the configured messaging system.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Consumer receives the message
&lt;/h3&gt;

&lt;p&gt;A consumer application receives and processes the message.&lt;/p&gt;

&lt;p&gt;The overall flow is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;+-------------+
|   Producer  |
| Application |
+------+------+
       |
       | Message
       v
+----------------+
|    Amazon MQ   |
| Message Broker |
+-------+--------+
        |
        | Message
        v
+-------------+
|  Consumer   |
| Application |
+-------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This approach helps applications communicate without requiring a direct connection between every application component.&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Managed Message Brokers
&lt;/h3&gt;

&lt;p&gt;Amazon MQ provides managed message broker infrastructure.&lt;/p&gt;

&lt;p&gt;Instead of manually setting up and maintaining the broker servers, developers can use AWS infrastructure to run their messaging workloads.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Support for Popular Messaging Technologies
&lt;/h3&gt;

&lt;p&gt;Amazon MQ supports &lt;strong&gt;ActiveMQ Classic and RabbitMQ&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This is useful for organizations that already have applications using these technologies.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. High Availability Options
&lt;/h3&gt;

&lt;p&gt;Amazon MQ provides deployment options designed for availability and resilience.&lt;/p&gt;

&lt;p&gt;For workloads where message delivery is important, organizations can configure appropriate broker deployments and availability options.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Security
&lt;/h3&gt;

&lt;p&gt;Amazon MQ integrates with AWS security capabilities.&lt;/p&gt;

&lt;p&gt;Applications can use network controls such as VPC security groups, and communication can be protected using encryption and authentication mechanisms supported by the selected broker.&lt;/p&gt;

&lt;p&gt;Security configuration should always be designed according to the application's requirements.&lt;/p&gt;

&lt;h2&gt;
  
  
  College / Student Use Case
&lt;/h2&gt;

&lt;p&gt;A practical college use case would be a &lt;strong&gt;Campus Notification System&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Consider a college with multiple applications:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Student registration system&lt;/li&gt;
&lt;li&gt;Attendance system&lt;/li&gt;
&lt;li&gt;Examination system&lt;/li&gt;
&lt;li&gt;Notification system&lt;/li&gt;
&lt;li&gt;Email/SMS service&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When a student registers for an event, the registration application could publish a message.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fci27w9iydnysnqy12mjt.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fci27w9iydnysnqy12mjt.jpg" alt=" " width="800" height="1219"&gt;&lt;/a&gt;&lt;br&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;Student:
Moha

Event:
AWS Cloud Workshop

Status:
Registered
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Instead of directly calling the notification system, the registration application can send a message through a message broker.&lt;/p&gt;

&lt;p&gt;The notification service can then process the message and send the student a confirmation.&lt;/p&gt;

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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;             Student
                |
                v
       +----------------+
       | Registration   |
       | Application    |
       +-------+--------+
               |
               v
        +-------------+
        |  Amazon MQ  |
        +------+------+ 
               |
        +------+------+
        |             |
        v             v
+---------------+ +---------------+
| Email Service | | Notification |
|               | | Service       |
+---------------+ +---------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This allows different campus applications to communicate through messaging rather than being tightly connected.&lt;/p&gt;

&lt;h2&gt;
  
  
  Simple Example
&lt;/h2&gt;

&lt;p&gt;A simplified messaging example can be represented as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Producer
   |
   | "Assignment submitted"
   v
Amazon MQ
   |
   | Message
   v
Notification Service
   |
   v
Student receives notification
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The actual implementation depends on whether RabbitMQ or ActiveMQ Classic is selected and on the application's programming language and messaging protocol.&lt;/p&gt;

&lt;p&gt;For a student project, the concept can be demonstrated using a small producer-consumer application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Advantages
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Reduced Infrastructure Management
&lt;/h3&gt;

&lt;p&gt;AWS manages much of the underlying infrastructure, reducing the amount of server administration required.&lt;/p&gt;

&lt;h3&gt;
  
  
  Compatibility
&lt;/h3&gt;

&lt;p&gt;Applications using supported messaging technologies can potentially move to Amazon MQ without completely redesigning their messaging architecture.&lt;/p&gt;

&lt;h3&gt;
  
  
  Useful for Distributed Applications
&lt;/h3&gt;

&lt;p&gt;Message brokers can help separate application components and support asynchronous communication.&lt;/p&gt;

&lt;h3&gt;
  
  
  Integration with AWS
&lt;/h3&gt;

&lt;p&gt;Amazon MQ can operate within AWS networking and security environments, making it useful for applications already running on AWS.&lt;/p&gt;

&lt;h2&gt;
  
  
  Limitations and Things to Consider
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Cost
&lt;/h3&gt;

&lt;p&gt;Amazon MQ is a paid AWS service. Costs depend on factors such as broker instance type, deployment configuration and data transfer.&lt;/p&gt;

&lt;p&gt;Students should check current AWS pricing before creating resources.&lt;/p&gt;

&lt;p&gt;For a short workshop, resources should be created carefully and deleted after testing to avoid unnecessary charges.&lt;/p&gt;

&lt;h3&gt;
  
  
  Complexity
&lt;/h3&gt;

&lt;p&gt;Message brokers introduce additional infrastructure and concepts.&lt;/p&gt;

&lt;p&gt;Developers need to understand queues, exchanges, topics, consumers, producers, acknowledgements and message delivery behaviour depending on the broker technology.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scalability
&lt;/h3&gt;

&lt;p&gt;The scalability characteristics depend on the selected broker, configuration and workload.&lt;/p&gt;

&lt;p&gt;It is important to design the messaging architecture according to expected traffic rather than assuming unlimited scaling.&lt;/p&gt;

&lt;h3&gt;
  
  
  Security
&lt;/h3&gt;

&lt;p&gt;Authentication, authorization, encryption, network access and credentials need to be configured properly.&lt;/p&gt;

&lt;p&gt;A production messaging system should not expose a broker unnecessarily to the public internet.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;Through this AWS workshop task, I understood that cloud computing is not only about hosting applications.&lt;/p&gt;

&lt;p&gt;Communication between distributed applications is also an important part of cloud architecture.&lt;/p&gt;

&lt;p&gt;Amazon MQ introduced me to the concept of &lt;strong&gt;message brokers&lt;/strong&gt; and showed how producers and consumers can communicate through an intermediate messaging system.&lt;/p&gt;

&lt;p&gt;The college notification example also helped me understand how the concept can be applied to a real student or campus application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Amazon MQ is an AWS managed message broker service that can help applications communicate using established messaging technologies such as RabbitMQ and ActiveMQ Classic.&lt;/p&gt;

&lt;p&gt;Its managed infrastructure, compatibility with existing messaging technologies, security capabilities and integration with AWS make it useful for suitable distributed application architectures.&lt;/p&gt;

&lt;p&gt;For my AWS workshop, exploring Amazon MQ helped me understand an important cloud concept: &lt;strong&gt;applications do not always need to communicate directly with each other. A message broker can act as a reliable communication layer between them.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;AWS Documentation — Amazon MQ&lt;/li&gt;
&lt;li&gt;AWS Documentation — Amazon MQ for ActiveMQ&lt;/li&gt;
&lt;li&gt;AWS Documentation — Amazon MQ for RabbitMQ&lt;/li&gt;
&lt;li&gt;AWS Pricing — Amazon MQ&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Always check the latest AWS documentation and pricing before deploying resources.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>cloud</category>
      <category>learning</category>
    </item>
    <item>
      <title># Day1: Deploying My Portfolio with AWS S3 and CloudFront on Cloud Workshop</title>
      <dc:creator>MOHA PRASATH SA</dc:creator>
      <pubDate>Tue, 15 Sep 2026 06:57:00 +0000</pubDate>
      <link>https://dev.to/moha_prasathsa_8539853b2/-day1-deploying-my-react-portfolio-with-aws-s3-and-cloudfront-on-cloud-workshop-3j0e</link>
      <guid>https://dev.to/moha_prasathsa_8539853b2/-day1-deploying-my-react-portfolio-with-aws-s3-and-cloudfront-on-cloud-workshop-3j0e</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8helxf5ujo64p7xdiv76.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8helxf5ujo64p7xdiv76.png" alt=" " width="800" height="328"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fscwu9jfks05vl2ma1a1n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fscwu9jfks05vl2ma1a1n.png" alt=" " width="800" height="328"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxnadogw2finqufyy1dye.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxnadogw2finqufyy1dye.png" alt=" " width="799" height="388"&gt;&lt;/a&gt;This was my first hands-on experience deploying a frontend application using AWS services. Instead of stopping at the development stage, I wanted to understand how a website can be hosted using cloud infrastructure.&lt;/p&gt;

&lt;p&gt;For this deployment, I worked with &lt;strong&gt;Amazon S3&lt;/strong&gt; and attempted to configure &lt;strong&gt;Amazon CloudFront&lt;/strong&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  My Portfolio
&lt;/h2&gt;

&lt;p&gt;The portfolio was developed using:&lt;/p&gt;

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

&lt;p&gt;It contains sections for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;About Me&lt;/li&gt;
&lt;li&gt;Skills&lt;/li&gt;
&lt;li&gt;Projects&lt;/li&gt;
&lt;li&gt;Contact&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After completing the React application, I generated the production files using:&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;The generated files were available in the &lt;code&gt;dist&lt;/code&gt; folder.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Creating an S3 Bucket
&lt;/h2&gt;

&lt;p&gt;The first step was creating an &lt;strong&gt;Amazon S3 bucket&lt;/strong&gt; for my portfolio.&lt;/p&gt;

&lt;p&gt;After creating the bucket, I uploaded the website files into it.&lt;/p&gt;

&lt;p&gt;The main file 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;Along with the other required website assets.&lt;/p&gt;

&lt;p&gt;The basic structure was:&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
│
├── index.html
├── assets/
└── other files
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 2: Configuring Static Website Hosting
&lt;/h2&gt;

&lt;p&gt;After uploading the files, I configured the bucket for &lt;strong&gt;static website hosting&lt;/strong&gt;.&lt;/p&gt;

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

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

&lt;/div&gt;



&lt;p&gt;This tells S3 which HTML file should be loaded as the main page of the website.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Configuring Access
&lt;/h2&gt;

&lt;p&gt;I then worked through the S3 access and permission settings required to make the static website accessible.&lt;/p&gt;

&lt;p&gt;This was one of the useful parts of the process because it made me understand that simply uploading a file to S3 does not automatically make it available to everyone.&lt;/p&gt;

&lt;p&gt;There are separate considerations for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Bucket access&lt;/li&gt;
&lt;li&gt;Object permissions&lt;/li&gt;
&lt;li&gt;Static website hosting&lt;/li&gt;
&lt;li&gt;Public access settings&lt;/li&gt;
&lt;li&gt;Security policies&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After configuring the required settings, I was able to work with the S3-hosted version of my portfolio.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Trying Amazon CloudFront
&lt;/h2&gt;

&lt;p&gt;The next step was to add &lt;strong&gt;Amazon CloudFront&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The architecture I wanted to create was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                User
                  │
                  ▼
          Amazon CloudFront
                  │
                  ▼
              Amazon S3
                  │
                  ▼
          React Portfolio
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CloudFront acts as a CDN and can distribute website content through AWS edge locations.&lt;/p&gt;

&lt;p&gt;I wanted to use it as the delivery layer in front of my S3-hosted portfolio.&lt;/p&gt;

&lt;h2&gt;
  
  
  The CloudFront Problem
&lt;/h2&gt;

&lt;p&gt;While creating the CloudFront resource, I encountered an AWS account-level verification error.&lt;/p&gt;

&lt;p&gt;AWS displayed the following message:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Your account must be verified before you can add new CloudFront resources."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So, at this stage, &lt;strong&gt;CloudFront deployment was not completed&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;This was actually an important part of the learning experience.&lt;/p&gt;

&lt;p&gt;I initially thought deploying a website would simply be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Write Code → Upload Files → Website Online
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But the process also involves:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Application
    ↓
Build
    ↓
Cloud Storage
    ↓
Permissions
    ↓
Service Configuration
    ↓
Account Verification
    ↓
CDN / Delivery
    ↓
Production Website
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;This small project helped me understand several AWS concepts practically.&lt;/p&gt;

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

&lt;p&gt;I learned how S3 can be used to store and serve static website files.&lt;/p&gt;

&lt;h3&gt;
  
  
  Static Website Hosting
&lt;/h3&gt;

&lt;p&gt;I learned how an &lt;code&gt;index.html&lt;/code&gt; file can be configured as the entry point for a static website.&lt;/p&gt;

&lt;h3&gt;
  
  
  Permissions
&lt;/h3&gt;

&lt;p&gt;I learned that storage, website hosting, and access permissions are separate configuration areas.&lt;/p&gt;

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

&lt;p&gt;I learned the role of CloudFront as a CDN in front of an S3-based website, even though I could not complete the CloudFront deployment because of the account verification restriction.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cloud Deployment
&lt;/h3&gt;

&lt;p&gt;Most importantly, I learned that deploying an application involves more than writing code. Cloud services have their own account requirements, permissions, security configurations, and service restrictions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Current Architecture
&lt;/h2&gt;

&lt;p&gt;The part I successfully configured was:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React Portfolio
       │
       ▼
   npm run build
       │
       ▼
    index.html
       │
       ▼
    Amazon S3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The architecture I am working toward 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
                     │
                     ▼
             Amazon CloudFront
                     │
                     ▼
                 Amazon S3
                     │
                     ▼
             React Portfolio
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  react #aws #amazonS3 #cloudfront #javascript #webdevelopment #cloud #devops #learning
&lt;/h1&gt;

</description>
      <category>aws</category>
      <category>frontend</category>
      <category>react</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
