2026년 Astro 6와 VPS를 활용한 정적 사이트 아키텍처
"Na Derevo" 웹사이트는 Astro 6를 SSG 모드로 사용하여 깔끔한 정적 파일을 생성합니다: 프로젝트 홈페이지, MENO 제품 랜딩 페이지, 블로그. 양국어 지원(러시아어/영어)은 SPA나 SSR 없이 구현됩니다. 서버 측에서는 300루블 VPS에 Nginx를 사용하고, SSL은 Certbot으로 처리합니다. 분석 도구는 동의 메커니즘이 적용된 Yandex.Metrica입니다.
성능을 위해 스택을 최소화했습니다:
- 프레임워크: Astro 6 (SSG)
- 언어: TypeScript (strict)
- 콘텐츠: Astro 콘텐츠 컬렉션 + Markdown/MDX
- 서버: Nginx
- SSL: Certbot (Let's Encrypt)
- 분석: Yandex.Metrica (선택 사항)
Astro는 HTML, CSS, JS가 포함된 dist 폴더를 생성하며, 프로덕션 환경에서는 Node.js가 필요 없습니다. Nginx가 파일을 직접 제공하므로 SSR보다 빠릅니다.
현지화 및 URL 구조
i18n을 위한 Astro 구성:
locales: ['ru', 'en'],
prefixDefaultLocale: true,
redirectToDefaultLocale: false구조:
naderevo.com/ru/— 홈페이지 (러시아어)naderevo.com/en/— 홈페이지 (영어)naderevo.com/ru/blog/— 블로그 (러시아어)naderevo.com/en/blog/— 블로그 (영어)naderevo.com/— 리디렉션 페이지 (noindex)
루트 페이지는 localStorage, 쿠키 또는 Accept-Language를 통해 언어를 감지하고 리디렉션합니다. 두 언어 모두 접두사를 사용하면 hreflang과 canonical을 간소화할 수 있습니다. 콘텐츠 컬렉션은 프론트매터 타이핑을 보장하여 필드가 누락되면 빌드가 실패합니다.
SEO 인프라
각 페이지에는 다음이 포함됩니다:
- 기본 태그: canonical, hreflang (x-default 포함), Open Graph, Twitter Card.
- 구조화된 데이터:
<head>의 JSON-LD (홈페이지용 WebSite, 랜딩 페이지용 SoftwareApplication, 글용 BlogPosting). - 사이트맵:
@astrojs/sitemap으로 생성되며 유틸리티 페이지는 필터링됩니다. - robots.txt:
User-agent: *
Allow: /
Sitemap: https://naderevo.com/sitemap-index.xmlAI 크롤러에 개방됩니다. astro.config.mjs는 사이트맵과 OG에서 절대 URL을 사용하기 위해 site: 'https://naderevo.com'을 설정합니다.
배포 및 서버 구성
VPS는 Nginx를 통해 정적 파일을 제공합니다. Vercel/Netlify 대신 VPS를 선택한 이유: 리디렉션과 헤더를 완전히 제어할 수 있고, 벤더 종속성이 없습니다.
nginx.conf의 리디렉션:
# http -> https
server {
listen 80;
return 301 https://$host$request_uri;
}
# www -> apex
server {
server_name www.naderevo.com;
return 301 https://naderevo.com$request_uri;
}에셋 캐싱:
Cache-Control: public, max-age=31536000, immutable파일 이름의 해시(Astro)는 배포 시 캐시를 무효화합니다.
보안 헤더:
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-originSSL은 Certbot으로 자동 업데이트됩니다. 이전 글 슬러그를 위한 레거시 리디렉션도 포함됩니다.
개인정보 중심 분석
Yandex.Metrica는 동의 후 로드됩니다. 쿠키 배너는 선택 사항을 쿠키나 localStorage에 저장합니다. 거부 시:
- 스크립트가 로드되지 않습니다.
- 분석 쿠키가 삭제됩니다.
목표는 data-metrika-goal을 통해 설정합니다. ID는 PUBLIC_YANDEX_METRIKA_ID에서 가져오며, 개발 환경에서는 선택 사항입니다.
부하를 줄이기 위해 Webvisor와 클릭맵은 비활성화됩니다.
TypeScript 및 구성
tsconfig.json:
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
}Strict 모드는 컴포넌트, 컬렉션, i18n 구성에서 오류를 잡아냅니다.
구현 제한 사항
- 리디렉션 페이지
/(noindex) — SEO 절충: 가중치는/ru/,/en/로 이동합니다. - 모든 페이지에 동일한 OG 이미지 사용 (고유 이미지 계획 중).
- Metrica에서 세션 기록 없음.
핵심 요점
- Astro SSG + Nginx — 정적 사이트에 최대 속도와 신뢰성을 제공합니다.
- 콘텐츠 컬렉션을 통한 완전한 콘텐츠 타이핑.
- SEO 준비 완료: hreflang, JSON-LD, 개방형 robots.txt.
- 개인정보 보호: 동의 후에만 분석.
- VPS가 PaaS보다 저렴하고 구성 제어가 완전합니다.
— Editorial Team
아직 댓글이 없습니다.