초보를 위한 스벨트/스벨트킷으로 만든 웹사이트 배포 설명

Svelte_SvelteKit

ethanjoh 2026. 7. 8. 09:57

앞서 스벨트나 스벨트킷으로 만든 프로젝트의 폴더 구조 등을 알아보았습니다.

그럼 이렇게 만든 웹사이트를 어떻게 외부에 공개할 수 있는지 그 배포과정에 대해 알아보겠습니다.

배포를 하기 전에 필요한 것은

1. 깃허브에 가입을 하고

2. Vercel 또는 Netlify 에 가입할 때는 앞서 가입한 깃허브로 회원가입을 하는 것입니다. 그래야 코드 동기화부터 배포가 일련의 과정으로 이루어질 수 있습니다.

스벨트(Svelte) 단독으로 만든 정적 사이트(SPA)인지, 아니면 서버 기능이 포함된 풀스택 프레임워크인 스벨트킷(SvelteKit)인지에 따라 배포 방식이 달라집니다. 각각의 환경에 따른 배포 방법을 알려드리겠습니다.

일반 스벨트 앱은 빌드 시점에 프레임워크 런타임 없이 완전히 최적화된 HTML, CSS, 바닐라 자바스크립트 파일로 컴파일됩니다. 따라서 서버가 필요 없는 완전한 정적 사이트 형태로 배포할 수 있습니다.

빌드 실행: 프로젝트 터미널에서 npm run build 명령어를 실행합니다. 빌드가 완료되면 프로젝트 내부에 dist 또는 public 폴더가 생성되고, 그 안에 압축되고 최적화된 파일들이 저장됩니다.
배포 방법: 이 폴더 내부의 파일들은 순수 정적 파일들이므로 GitHub Pages, Netlify, Vercel, AWS S3 등 원하는 정적 호스팅 서비스에 폴더를 그대로 업로드하여 배포할 수 있습니다.

스벨트킷은 서버 사이드 렌더링(SSR), API 라우트 등의 강력한 서버 기능을 포함하고 있기 때문에, 내가 배포하고자 하는 서버 환경에 맞춰 코드를 변환해 주는 '어댑터(Adapter)' 시스템을 사용합니다.

adapter-auto (기본값): Vercel, Netlify, Cloudflare Pages 등의 대형 플랫폼에 배포할 때 사용합니다. 플랫폼 환경을 자동으로 감지하여 빌드해 주기 때문에 가장 단순하고 편리합니다.
adapter-node: 가비아, 카페24, AWS EC2 등 내가 직접 관리하는 커스텀 서버나 일반 Node.js 실행 환경에 배포할 때 사용합니다.
adapter-static: 서버 기능 없이 HTML, CSS, JS만으로 구성된 100% 정적 웹사이트로 빌드하여 배포할 때 사용합니다.

대부분의 현대적인 프론트엔드 배포는 GitHub 저장소를 연결하여 자동으로 빌드 및 배포(CI/CD)되도록 설정합니다.

Git 저장소 초기화 및 푸시: 로컬 프로젝트 터미널에서 Git을 초기화하고 코드를 GitHub 원격 저장소에 업로드합니다.
```
git init
git add .
git commit -m "initial commit"
git remote add origin <내-깃허브-저장소-주소>
git push -u origin main
```
배포 플랫폼 연결: Vercel 이나 Netlify 대시보드에 로그인한 후 'Add New Project' (또는 Import project) 버튼을 누릅니다.
GitHub 저장소 가져오기: 방금 업로드한 GitHub 저장소를 선택(Import)합니다.
환경 변수 및 설정: 데이터베이스 주소(DATABASE_URL)나 외부 API 보안 키처럼 대중에 노출되면 안 되는 민감한 환경 변수가 있다면, 배포 설정 화면의 Environment Variables 탭에 입력해 줍니다.
배포 완료: 'Deploy' 버튼을 누르면 플랫폼에서 자동으로 npm run build를 실행하여 1분 내에 전 세계 사용자가 접속할 수 있는 임시 URL을 발급하며 배포가 완료됩니다.