[AWS] CloudFront에서 S3를 원본으로 추가

When adding S3 as an origin in CloudFront, there are typically two options:

1. REST Endpoint

   bucket-name.s3.ap-northeast-2.amazonaws.com

   • This is the default option selected by CloudFront.
   • It allows access only at the object level, and does not automatically map a /path/ request to path/index.html.

2. Website Endpoint

   bucket-name.s3-website.ap-northeast-2.amazonaws.com

   • When a /path/ request is made, it automatically returns path/index.html.

---

What is an SPA?

SPA stands for Single Page Application — an application that runs entirely within a single HTML page.

Key Characteristics

1. Single HTML Page Architecture

   • The application loads the main HTML file once at the beginning.
   • All subsequent content updates are handled dynamically by JavaScript, without reloading the page.
   • The URL or visible content may change, but the browser does not perform a full page reload.

2. Client-Side Routing

   • In an SPA, navigation between URLs is handled by the client-side router, not the server.
   • For example, when navigating to /mypage/, the browser does not request a new page from the server — instead, JavaScript renders the corresponding view on the same page.

3. Fast User Experience

   • Since the app only loads once and then dynamically fetches or updates data, navigation feels much faster than traditional multi-page websites.

4. Use of Browser History API

   • SPAs use the browser’s History API to manage navigation.
   • This allows SPAs to change the URL (e.g., /home/, /mypage/, /signup/) without performing an actual page reload, maintaining the illusion of multiple pages.

---

Advantages of SPAs

• Fast Navigation – No need to reload pages from the server, resulting in a smoother and faster experience.
• Highly Interactive UI – Easy to implement dynamic and real-time user interactions.

---

Disadvantages

• Slow Initial Load – The first page load may take longer since all necessary resources (JS, CSS, etc.) must be downloaded upfront.

• SEO Challenges – Without server-side rendering, search engines may have difficulty indexing dynamic content.

  • To address this, developers often use SSR (Server-Side Rendering) or SSG (Static Site Generation) techniques.

---

Examples of SPAs

• Gmail – You can read, compose, and switch between emails without reloading the page.
• Facebook / Twitter – Feeds and posts are updated dynamically without page reloads.

---

Because SPAs rely heavily on client-side routing, the server does not directly return an HTML file corresponding to each requested URL.
Instead, the JavaScript application handles the routing and dynamically renders the appropriate content.