4강. 정적 사이트와 서버 애플리케이션의 배포 차이

?1. 이번 강의에서 해결할 문제

정적 호스팅과 서버 호스팅을 같은 상품으로 생각하면 Pages에 API를 올리려 하거나 불필요한 서버 비용을 지불할 수 있습니다.

✓2. 학습 목표

✓이 강의를 마치면

• 정적 파일 제공과 요청 시 서버 실행을 구분합니다.
• 각 배포 방식의 비용·보안·상태 관리 차이를 설명합니다.
• 현재 학습 사이트에 정적 배포가 충분한 이유를 판단합니다.

◇3. 핵심 개념

정적 사이트는 빌드 시 페이지를 만들고 호스팅은 동일 파일을 전달합니다. FastAPI는 요청마다 Python 코드가 실행되며 프로세스, 포트, 런타임, 환경 변수, 로그, 보안 업데이트가 필요합니다. localStorage 기반 학습 진행률은 각 브라우저에 저장되므로 현재 사이트는 서버 없이 동작하지만 기기 간 동기화나 계정 기능은 제공하지 못합니다.

✎4. 단계별 실습

1. PowerShell

실행 위치: Docusaurus 저장소 루트

실행 전 확인: build가 최신인지 npm.cmd run build 성공 시간을 확인합니다.

대상: 정적 build 결과의 파일 종류

PowerShell

Get-ChildItem .\build -File -Recurse | Group-Object Extension | Sort-Object Count -Descending | Select-Object Count, Name
Get-ChildItem .\build -Filter *.html -Recurse | Select-Object -First 5 FullName

예상 결과: HTML·CSS·JS·이미지 같은 정적 파일과 생성된 문서 HTML이 표시됩니다.

2. 설계 비교

실행 위치: 배포 선택표

실행 전 확인: 비용이 변하는 서비스 이름 대신 필요한 자원을 비교합니다.

대상: Docusaurus와 FastAPI

설계 비교

Docusaurus: 파일 호스팅, 서버 프로세스 없음, 브라우저 localStorage
FastAPI: Python 프로세스, 네트워크 포트, 비밀·로그·DB 연결 가능
공통: 도메인, HTTPS, 변경 이력, 상태 확인, 복구 절차

예상 결과: 기능 요구를 보고 정적 또는 서버 배포를 선택할 수 있습니다.

→5. 배포·운영 흐름이 동작하는 이유

정적 빌드는 요청 전에 계산이 끝나므로 호스팅 시 코드를 실행할 컴퓨팅 자원이 필요 없습니다. API는 요청과 데이터에 따라 결과가 달라 런타임과 운영 상태가 필요합니다.

!6. 자주 하는 실수와 안전한 해결법

!자주 하는 실수

• 실수: 정적 사이트에서 서버 환경 변수를 런타임에 숨길 수 있다고 생각 안전한 해결: 브라우저로 전달된 값은 비밀이 아니며 정적 번들에 넣지 않습니다.
• 실수: Pages에서 FastAPI 프로세스 실행 시도 안전한 해결: 별도 서버·컨테이너 호스팅을 선택 사항으로 검토합니다.
• 실수: 기기 간 진도 동기화를 localStorage로 기대 안전한 해결: 현재 구조는 브라우저별 로컬 기록이라는 한계를 문서화합니다.

✎7. 직접 실습

✎직접 실습

1. 현재 사이트 기능을 정적 가능·서버 필요로 분류합니다.
2. FastAPI 배포에 추가되는 운영 자원을 다섯 가지 적습니다.
3. 월 비용 0원 정적 구조에서 포기하는 기능을 설명합니다.

실습 기록에는 변경 SHA, 실행 위치, 확인 대상, 예상 결과와 실제 결과를 남기고 실제 토큰·비밀번호·SSH 개인 키·.env 내용은 포함하지 않습니다.

?8. 이해 점검 질문 3개

?이해 점검

1. 정적 호스팅이 요청마다 실행하는 서버 코드는 무엇인가요?
2. FastAPI 배포에 지속 실행 자원이 필요한 이유는 무엇인가요?
3. 현재 localStorage 구조의 대표적인 한계는 무엇인가요?

■9. 핵심 요약

■핵심 요약

정적 배포는 미리 만든 파일을 제공하고 서버 배포는 요청마다 코드를 실행합니다. 현재 학습 사이트는 서버 없는 기능 범위 덕분에 Pages만으로 운영할 수 있습니다.