Deploying a Static Webpage - S3 & Cloudfront
Kanishkanth

Kanishkanth @kanishkanth

About: hu-man

Location:
Tamilnadu, India
Joined:
Jan 22, 2025

Deploying a Static Webpage - S3 & Cloudfront

Publish Date: Jan 24
2 0

1. Installing React and Node:
i. Installed Node.js as a prerequisite for React development, ensuring access to the npm package manager for creating and managing React applications. Verified the installation using node -v and npm -v commands.
Image description
ii. Used the npx create-react-app command to generate the initial React project structure. This step provided a boilerplate for building scalable React applications.
Image description

2. React Landing Page:
Developed a visually appealing landing page with essential components and content section to serve as the entry point of the application.
Image description

3. React app with personal info:
Created a dedicated component to display personal information such as name, profession, and contact details, showcasing the flexibility of React components.
Image description

4. S3 Bucket Creation:
i. Logged into the AWS Management Console to create an S3 bucket. Specified a unique bucket name, region, and configured necessary settings such as versioning and encryption.
ii. Adjusted the bucket's public access settings based on the use case, ensuring secure storage and accessibility of uploaded files.
Image description

5. Adding Bucket Policy:
Defined a JSON-based bucket policy to control access permissions. Configured the policy to allow public read access for files hosted in the bucket if needed.
Image description

6. S3 Output:
Retrieved the S3 bucket URL to access and preview the hosted files, confirming that the output rendered correctly in the browser.
Image description

7. React Page using CDN:
Leveraged the S3 bucket's static website hosting feature to generate a Content Delivery Network (CDN) link for the React app. Configured the bucket to serve files as a static website.
Image description

Comments 0 total

    Add comment