Welcome to the site!
The site you're currently viewing was built using React.js with 100% deployment and hosting through Amazon Web Services.
What is AWS and Why this topic?
Amazon web service is an online platform that provides scalable and cost-effective cloud computing solutions. AWS is a broadly adopted cloud platform that offers several on-demand operations like compute power, database storage, and content delivery to help corporates scale and grow. AWS is widely used by Fortune 500 Companies such as Netflix, Comcast, and GE.To my knowledge no one on the Front-End team has had an introductory course or developed using Amazon Web Services. There is a need in Front-End for someone to be knowledgable about this topic in order to support the team with DevOps asset migrations and application deployment (Vercel vs. AWS).
Traditional Way Of Hosting A Website
Here are the steps on "How To Host Your Own Website (2023)" according to Forbes
- Choose a Content Management System (CMS)
- WordPress is a free, open source CMS, it does require third-party web hosting. A popular tool for individuals without any coding experience who want to build websites and blogs
- All-in-one website builder, such as Wix, Squarespace or Shopify
- Purchase a Web Hosting Service
- Through Bluehost, DreamHost, Hostinger, IONOS, and etc.
- Some Web Hosting Service also include a public SSL/TLS Certificate with their service
- Get a Domain Name
- Purchasing your domain through Namecheap, Domain.com or Google Domains, and etc.
- EX: jovenebio.com
- Connect Your Domain To Your Web Host
- Connecting process can vary depending on where you purchased your web hosting service
- Install WordPress (or Migrate An Existing Site)
- You can now launch the website you designed through WordPress
Before Getting Started:
AWS Free Tier:
- To access multiple Amazon Web Services tools you can sign up for the free tier account here
- Once completed you will purchase a domain through Amazon Route 53
Tools Used:
React.js - Open-source JavaScript framework and library developed by Facebook. Used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript
AWS Route 53 - Amazon's Domain Name System (DNS) Service Tool
AWS S3 - Object storage service where you will store your files and objects such as index.html
AWS Certificate Manager - Sockets Layer (SSL) and Transport Layer Security (TLS) Certificate Provider
AWS Cloudfront - Content Delivery Network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency and high transfer speeds
AWS Guides Used:
Here are the guides I used during my training. It's better to go over the official documentation over me having to reinvent the wheel. I will comment on the steps where I ran into an since the direction was unclear to me at the time.
- STEP 2: When registering a subdomain it's better to use a "*" (Wildcard) over "www" as a subdomain since this encompasses any subdomain you may create in the future as long as the root domain is the same. This will save you time in having to register each subdomain such as "www, dev, www-dev, and etc"
- STEP 5: I set this up but didnt really use the feature. This is a nice to have but logging is not necessary for launching the static site in AWS. However, you may find this useful depending on your site needs
- STEP 11: In this step, you create the alias records that you add to the hosted zone for your domain maps example.com and www.example.com. Instead of using IP addresses, the alias records use the Amazon S3 website endpoints. Amazon Route 53 maintains a mapping between the alias records and the IP addresses where the Amazon S3 buckets reside. You create two alias records, one for your root domain and one for your subdomain.
- Once you have your site up and running you will notice your site is listed as unsecure. You will need to register for a public site SSL/TLS certificate. This is done through Amazon Certificate Manager
- Amazon only provides public certificates from their N.Virginia servers. Make sure to register your certificate through the N. Virgina server even if your main server is elsewhere such as the Ohio server
- You will be able to save time by registering your root domain and the subdomain with the wildcard "*".
- To make your life easier choose to validate through DNS since this will validate using Amazon S3 Buckets
- You will use Amazon Cloudfront to connect your public SSL/TLS certificate by creating a distribution list
- Choose your root domain and subdomain. Your certificate will be available in the dropdown. The other settings can be left at their default state
- Once the distribution is complete go back to your S3 buckets. Update the alias buckets to reference to the Amazon Cloudfront distribution link
Next Steps
- Continue learning AWS skillsets and eventually receive AWS Certification. There's a free certification program through AWS Skill Builder
- Keep practicing and coding with React.js