SvelteKit을 Cloudflare Pages에 배포하기
SvelteKit은 현대 웹 개발을 위한 강력하고 간결한 프레임워크로, 빠른 빌드와 뛰어난 성능을 제공합니다.
또한, Cloudflare Pages는 빠르고 안정적인 배포 환경을 제공하며, 개발자 친화적인 기능을 갖추고 있습니다. 이번 글에서는 SvelteKit으로 애플리케이션을 개발하고 Cloudflare Pages에 배포하는 전 과정을 살펴봅니다. 이를 통해 여러분은 현대적인 웹 애플리케이션을 더 효율적으로 개발하고 배포할 수 있는 방법을 배우게 될 것입니다.
SvelteKit 프로젝트 시작하기 #
SvelteKit 초기화
먼저, Node.js가 설치되어 있는지 확인합니다. 이후 아래 명령어로 SvelteKit 프로젝트를 초기화합니다:
$ npx sv create
...
◇ Where would you like your project to be created?
│ ./my-sveltekit-app
...
$ cd my-sveltekit-app
npx sv create 명령어는 SvelteKit의 최신 템플릿을 다운로드합니다. my-sveltekit-app은 프로젝트 디렉토리 이름입니다.
디렉터리 구조
초기화가 완료되면 프로젝트의 디렉터리 구조는 다음과 같습니다:
my-sveltekit-app/
├── src/
│ ├── routes/
│ ├── lib/
│ └── app.html
├── static/
├── svelte.config.js
├── package.json
└── vite.config.js
src/routes: 페이지와 API 엔드포인트를 정의합니다.src/lib: 공용 컴포넌트를 저장합니다.static/: 정적 파일을 보관합니다.svelte.config.js: SvelteKit 설정 파일입니다.
기본 페이지 작성
src/routes/+page.svelte 파일에 간단한 Hello World 페이지를 작성합니다:
<script>
let name = 'SvelteKit';
</script>
<h1>Welcome to {name}!</h1>
<p>이제 Cloudflare Pages에 배포해 봅시다.</p>
이제 애플리케이션이 준비되었습니다. 개발 서버를 실행하여 확인하세요:
$ npm run dev
Cloudflare Pages 소개 #
Cloudflare Pages는 Jamstack 기반 프로젝트를 위한 무료 정적 호스팅 서비스입니다. 이는 단순히 정적 파일을 제공하는 것을 넘어, 강력한 네트워크와 다양한 개발자 도구를 통해 최적의 배포 환경을 제공합니다.
주요 특징
- 글로벌 네트워크: Cloudflare의 전 세계 엣지 네트워크를 통해 콘텐츠가 빠르게 제공됩니다. 이는 사용자와 가장 가까운 서버에서 콘텐츠를 서빙하여 지연 시간을 최소화합니다.
- 자동 배포: Git 리포지토리와 연동하여 코드 변경 사항이 푸시될 때마다 자동으로 배포됩니다.
- 커스텀 도메인 지원: 손쉽게 사용자 도메인을 연결하고 HTTPS 인증서를 자동으로 설정할 수 있습니다.
- 통합된 로그와 분석: 배포된 사이트의 성능과 트래픽을 확인할 수 있는 도구를 제공합니다.
이러한 특징들은 개발과 배포 과정을 간소화하면서도 고품질의 사용자 경험을 제공합니다.
SvelteKit에서 Cloudflare Pages용 설정 #
Adapter 설치
SvelteKit은 다양한 플랫폼을 지원하는 어댑터를 제공합니다. Cloudflare Pages 배포를 위해 Cloudflare 어댑터를 설치합니다:
npm install -D @sveltejs/adapter-cloudflare
SvelteKit 설정 파일 업데이트
/svelte.config.js 파일을 열어 Cloudflare 어댑터를 설정합니다:
import adapter from '@sveltejs/adapter-cloudflare';
export default {
kit: {
adapter: adapter()
}
};
이제 SvelteKit 애플리케이션은 Cloudflare Pages와 호환됩니다.
Cloudflare Pages에 배포하기 #
Git 리포지토리 설정
Cloudflare Pages는 Git 리포지토리와 연동됩니다. 프로젝트를 새 리포지토리로 초기화하고 업로드합니다:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main
Cloudflare Pages 설정
- Cloudflare Pages 대시보드로 이동합니다.
- “Create a application"를 클릭합니다.
- Git 리포지토리를 선택하고 배포 설정을 진행합니다:
- Framework Preset:
Sveltekit선택. - Build Command: 기본값 (
npm run build) - Build Output Directory: 기본값 (
.svelte-kit/cloudflare)
- Framework Preset:
- “Save and Deploy"를 클릭합니다.
배포가 완료되면 Cloudflare Pages의 기본 URL에서 애플리케이션을 확인할 수 있습니다.
성능 최적화 #
Cloudflare Pages와 SvelteKit은 기본적으로 뛰어난 성능을 제공합니다. 그러나 추가적인 최적화를 통해 더 나은 사용자 경험을 제공할 수 있습니다.
코드 스플리팅
SvelteKit은 기본적으로 코드 스플리팅을 지원합니다. 각 페이지는 독립적인 번들로 제공되며, 필요한 경우에만 로드됩니다. 이를 통해 초기 로드 속도가 향상됩니다.
이미지 최적화
정적 이미지는 최적화된 포맷(WebP 등)을 사용하고, 필요할 경우 Lazy Loading을 적용하세요. 또한 Cloudflare의 이미지 최적화 서비스를 활용하여 자동으로 이미지를 압축하고 크기를 조정할 수 있습니다.
캐싱 정책 설정
Cloudflare는 기본적으로 정적 파일에 대해 강력한 캐싱을 제공합니다. 그러나 캐싱 정책을 직접 설정하여 사용자 경험을 더욱 개선할 수 있습니다. 예를 들어, 오래된 파일을 캐시에서 제거하기 위해 “Cache-Control” 헤더를 적절히 설정하세요.
Lighthouse 분석 도구
Google Lighthouse를 사용하여 애플리케이션 성능을 측정하고, 로드 시간 및 접근성을 개선할 수 있는 추가적인 인사이트를 얻으세요.
문제 해결 #
Cloudflare 캐시 문제
Cloudflare Pages에서 파일 변경 후에도 캐시된 버전이 제공될 수 있습니다. 이런 경우, “Purge Cache” 기능을 사용하거나 개발 중에는 브라우저에서 강력 새로고침을 수행하세요.
또한, SvelteKit에서 Cache-Control 헤더를 설정하여 특정 파일의 캐싱 동작을 제어할 수 있습니다:
export async function handle({ request, resolve }) {
const response = await resolve(request);
response.headers.set('Cache-Control', 'no-store');
return response;
}
환경 변수 설정
Cloudflare Pages에서는 API 키와 같은 민감한 정보를 환경 변수로 관리할 수 있습니다. 이를 위해 Cloudflare Pages 대시보드에서 “Environment Variables” 섹션에 변수를 추가하고 SvelteKit 애플리케이션 내에서 이를 참조하세요:
const apiKey = import.meta.env.VITE_API_KEY;
404 또는 라우팅 문제
SvelteKit 애플리케이션에서 동적 라우팅이 올바르게 작동하지 않을 경우, Cloudflare Pages의 “Custom 404” 설정을 확인하고 필요 시 모든 요청을 SvelteKit 애플리케이션으로 리다이렉트하도록 설정하세요.
결론 #
SvelteKit과 Cloudflare Pages는 각각 강력한 프레임워크와 최적의 배포 플랫폼으로, 현대적인 웹 애플리케이션 개발에 이상적인 조합을 이룹니다. 이 가이드를 따라 프로젝트를 설정하고 배포하는 과정을 통해, 복잡한 설정 없이도 효율적이고 안정적인 웹 서비스를 제공할 수 있습니다.
이제 여러분의 프로젝트를 확장하고, 성능 및 사용자 경험을 지속적으로 개선하면서 SvelteKit과 Cloudflare Pages의 강점을 최대한 활용해 보세요.
