나만의 블로그 만들기 - 2. 웹 호스팅 하기 (Oracle Cloud, Nginx, Next.js, Turbopack)

Netlify, Vercel, 또는 GitHub Pages를 사용하는 웹 호스팅은 무료로 제공되며 배포와 관리가 쉽고, CDN 으로 최적화된 속도도 제공한다.

Pricing and Plans

3개의 웹 호스팅을 무료 플랜일 경우 비교해보았다.

	상업적 사용	사용량(bandwidth) 제한
Netlify	일부 가능	100 GB per month
Vercel	불가	100 GB per month
Github	불가	100 GB per month

각 사이트에서 제공하는 설명을 참고해서 호스팅 할 곳을 고르면 될 것 같다.

내 웹 사이트는 한글로 작성되기에 한국에서만 빠르게 접속 할 수 있으면 되고, 추후에 광고도 달아서 수입도 얻어볼 수 있다면 좋을 것 같다. 그래서 Oracle Cloud 에서 제공되는 Arm 기반 Ampere A1 코어 및 24GB 메모리의 컴퓨터를 사용할 것이다.

Oracle

OCI Price List
네트워크 대역폭(Gbps): 4

	상업적 사용	사용량(bandwidth) 제한
Oracle Cloud	가능	10TB

Apache vs Nginx vs Caddy

Nginx vs Caddy Performance
Nginx vs Apache Performance

결론적으로 Nginx 를 쓰면 되겠다.

React vs Next.js

블로그는 검색이 잘되어야 하기 때문에 향상된 SEO 를 위해 Next.js 선택. 카테고리 필터링, 태그 페이지, RSS 피드 등의 복잡한 기능들이 추가될 가능성을 고려.

Next.js vs Remix vs Gatsby

주요 비교

Feature	Next.js	Remix	Gatsby
렌더링 방식	SSG, SSR, ISR, CSR	SSR	SSG
SEO	뛰어남	뛰어남	뛰어남
생태계 성숙도	매우 성숙	아직 미성숙	성숙
동적 콘텐츠	가능 (SSR, ISR)	가능 (SSR 중심)	제한적
빌드 시간	중간	빠름	느림 (게시물 많을수록 길어짐)
데이터 처리 방식	자유 (API, 파일 기반 등)	서버 중심 (폼, 액션 기반)	GraphQL 기반
초기 학습 난이도	중간	낮음	중간 (GraphQL 학습 필요)

완전한 정적인 콘텐츠 일지 확신하지 못하기에 Gatsby 는 보류. Remix는 실시간 업데이트가 필요한 동적인 상호작용이 블로그에는 필요하지 않기에 보류(Openai 의 remix 이전처럼). 결론적으로 유동적인 Next.js 을 선택.

Create Next App

Getting Started: Installation

npx create-next-app@latest

bash

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next

bash

따끈따끈 한 Turbopack

Turbopack Dev is not Stable도 써보면 좋을 것 같아서 추가했다.

Vite 같은 프레임워크는 개발 모드에서 소스코드를 번들하지 않고 사용하는 기술을 사용한다. 대신에 브라우저의 ES Modules 시스템에 의존한다. 이렇게 하면 단 하나의 파일만 변환하면 되기 때문에 놀라울 정도로 반응성이 뛰어난 업데이트가 가능하다. 터보도 이 방식을 실험했는데, 많은 모듈로 구성된 대규모 애플리케이션브라우저에서 네트워크 요청이 많아지면 시작 시간이 느리다고 한다. 결론은 webpack 처럼 번들링하지만 Rust 로 작성해서 더 빠르게 수행하도록 했다고 한다.

재사용가능한 터보 빌드 엔진을 만들어서 병렬적으로 작업을 수행하고 캐싱을 통해 같은 작업은 무조건 한번만 하게끔 했다고 한다.
esbuild 는 lazy loading 이라는 개념이 없는데, turbo 는 도입.

🦦

Turbopack의 개발 모드는 수신된 요청에 따라 앱의 가져오기 및 내보내기에 대한 최소 그래프를 구축하고 필요한 최소한의 코드만 번들로 묶습니다.

링크에 지원하지 않는 css-in-js 라이브러리도 참고하면 좋을 것 같다. 성능 프로파일도 할 수 있는데 참고하면 좋을 것 같다.

https://github.com/antonputra/tutorials/tree/221/lessons/221/nginx