본 글에서는 Svelte 프로젝트를 정적 웹사이트로 Netlify에 배포하는 방법에 대해 순차적으로 자세히 알아보겠습니다.
이를 위해 먼저 준비해야 할 것들은 다음과 같습니다:
- Github, GitLab 등의 원격 저장소에 계정이 필요합니다.
- 이미 생성된 Git 원격 저장소(Repository)가 있어야 합니다.
- Svelte 프로젝트가 해당 Git 원격 저장소에 연결되어 있어야 합니다.
아래에서는 이러한 준비 작업을 통해 Svelte 프로젝트를 Netlify에 어떻게 배포하는지 단계별로 안내하겠습니다.
1. Netlify란?
Netlify 서비스의 개념
- Netlify는 정적 웹 사이트를 무료로 호스팅하는 서비스로, CI/CD, 무료 HTTPS, 도메인 관리 등을 지원합니다.
무료 버전과 프로 버전의 차이점
- Netlify의 무료 버전은 기본적인 기능을 제공하며, 프로 버전은 추가적인 기능과 더 많은 트래픽을 지원합니다.
아래는 현재(2024.01) 글 작성 기준 각 플랜에 대한 지원 영역입니다. 자세한 내용은 공식 문서에서 확인하실 수 있습니다.
Netlify의 장 단점과 확장 가능성
- 장점: 빠른 배포, 무료 HTTPS, 사용 편의성
- 배포 속도 및 퍼포먼스: Netlify는 전 세계의 서버리스 아키텍처를 사용하여 빠르고 안정적인 배포를 제공합니다.
- 저장소와의 쉬운 통합: GitHub, GitLab, Bitbucket과 같은 다양한 저장소와의 통합이 간편하게 가능합니다.
- 무료 HTTPS 지원: Netlify는 모든 도메인에 대해 자동으로 무료 HTTPS를 제공합니다.
- 단점: 무료 플랜 제한, 서버리스 환경의 제약
- 빌드 시간 제한: 무료 계정에서는 빌드 시간 제한이 있을 수 있습니다.
- 제한된 함수 실행 시간: 서버리스 함수 실행 시간이 100초로 제한됩니다.
- 확장 가능성: Netlify는 기능을 플러그인 형태로 제공해 확장이 용이하며, 다양한 서비스와 통합 가능합니다.
- 기본 도메인명은 abcd.netlify.app 처럼 *.netlify.app 으로 셋팅 됩니다.
- DNS 로 본인 소유의 도메인명으로 변경 가능 (ex: abcd.com)
위와 같은 장점과 단점이 존재하는데, 장점은 말로 설명할 것도 없이 개발자에게 좋은 항목들입니다. 특히 저는 무료 HTTPS지원 하는 부분이 굉장히 맘에 들었는데, 따라서 SSL 설정을 따로 해줄 필요도 없이 HTTPS 셋팅이 되기 때문이죠.
단점도 존재하지만, 본문에서 다루는 정적 사이트 배포같은 경우는 프로젝트 사이즈가 크지 않기 때문에 제약사항이라고 보기도 어려운 단점들입니다.
그리고 추후 무료 플랜에대한 제약으로 사이트 운영이 어려워질 정도가 된다면, 그 상황대로 좋다고 생각이 듭니다.
그래서 상황에 따라서 프로 플랜으로 업그레이드 하는 것도 방법이 될 것 같습니다.
2. Svelte project 셋팅
Svelte 프로젝트를 Netlify로 배포하려면 svelte.config.js 파일에 Adaptor 설정이 필요합니다.
Svelte에서 Adaptor는 어떤 환경에서 애플리케이션이 실행될지를 정의합니다.
예를 들어, Netlify를 사용하려면 해당 Adaptor를 추가해야 합니다.
먼저 Svelete 프로젝트 루트에서 `npm i -D @sveltejs/adapter-netlify` 명령어를 실행해서 Netlify Adaptor를 설치합니다.
이후 svelte.config.js 파일에서 Netlify Adaptor를 설정하는 예제입니다.
// svelte.config.js
import adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: adapter(),
// 다른 설정들...
}
};
위 셋팅 이후 프로젝트 루트(/)에 `netlify.toml` 파일을 생성하고 아래처럼 작성해줍니다.
[build]
command = "npm run build"
publish = "build"
여기까지 셋팅이 완료되었으면, 깃 리모트 서버에 푸시 해줍니다.
- 위 예제에서 @sveltejs/adapter-netlify 패키지를 import하고, adapter 함수를 호출하여 Netlify Adaptor를 추가했습니다. 이제 프로젝트는 Netlify에 배포될 수 있게 설정되었습니다.
- 추가로, Netlify Adaptor에 대한 자세한 정보는 공식 문서에서 확인할 수 있습니다.
여기까지가 기존 존재하던 Svelte 프로젝트를 Netlify에 배포하기 위한 셋팅이었습니다. 다음 섹션에서 이어서 Netlify 셋팅을 이어서 하겠습니다.
3. Netlify 가입 및 설정
3.1. Netlify 사이트 접속
3.2 Netlify 가입 (github, gitlab 등)
Netlify 웹 사이트에 접속하여 GitHub, GitLab, Bitbucket 등의 계정으로 가입합니다.
위 세가지 저장소중 하나로 하시면 보다 쉽게 호스팅 서비스에 연결이 가능합니다.
저는 깃허브로 가입 해봤습니다. 깃허브로 가입시도하는 경우 다음과 같이 깃허브 사이트로 이동되며 권한을 요청합니다.
권한 요청에 응답해서 Netlify와 깃허브를 연결합니다.
3.3 Netlify 설문조사 및 이름(팀명) 설정
연결하고나면 아래와 같이 Netlify 서비스를 어떤 목적으로 사용하는지, 다른사용자에게 어떻게 보여질지 설문조사를 진행합니다.
저는 다음과 같이 작성하였습니다. 모두 작성하고 나면 하단의 Continue to deploy를 클릭합니다.
4. Netlify 깃 저장소 선택 및 배포
4.1 Netlify에 배포할 깃 저장소 권한 얻기
깃허브로 가입(연결)을 했더라도, 프로젝트는 여러 리모트 서버(원격 깃 저장소)에 있을 수 있기 때문인지 배포 할 프로젝트를 선택할 수 있도록 해놓았습니다.
저는 당연히 깃허브에 프로젝트가 있기 때문에 Deploy with Github를 선택했습니다.
클릭하고 나면, 다시 깃허브 사이트로 이동되며 Netlify에서 레포지토리에 대한 권한을 얻습니다. 이 부분에서 알 수 있었던 부분은 회원가입은 말 그대로 깃허브로 회원가입을 한 것이고, Deploy Project에 대한 권한을 여기서 얻는다는것을 알 수 있었습니다.
따라서 다시 한번 권한에 대해 승인을 합니다.
저는 다른 프로젝트에 참여했던 경험이 있어서 다음과같이 어디에 Netlify를 설치할 것인지 선택하는 부분이 추가됐으나, 해당 스탭이 없더라도 문제 없습니다.
만약 해당 스탭이 나타났다면 배포하길 바라는 깃 저장소가 포함된 부분을 선택 해주시면 됩니다.
그러고 나면 기본값으로 All repositories가 선택돼 있을텐데 사용자의 의도에 따라 옵션을 선택하면 됩니다.
저 같은 경우는 일단 하나의 깃 저장소만 배포하면 되기 때문에 Only select repositories를 선택하고, 배포할 저장소를 선택해준 뒤 instlall를 눌러서 다음 스탭으로 진행했습니다.
install을 누르고 나면 선택한 깃 저장소에 접근하기 위해 비밀번호를 입력받아 확인합니다.
4.2 Netlify에 배포할 깃 저장소 선택하기
위 과정까지 진행하고 나면 다시 Netlify 페이지로 돌아오게 됩니다.
이제 위 일련의 과정에서 배포를 위해 선택된 깃 저장소가 보이는데, 여기서 배포를 진행할 깃 저장소를 선택해주시면 됩니다.
4.2 Netlify에 깃 저장소 배포하기
이제 진짜 배포까지 마지막 단계입니다.
여기선 기본 설정 값으로 배포할 것이기 때문에 Deploy repository-name to Netlify를 클릭하시면 프로그래스바가 나타나며 배포를 진행합니다.
> 배포시 따로 CICD에 대한 설정이 필요하신 분은 Edit build settings를 클릭 후 추가 설정을 진행하시면 됩니다.
5. 배포완료 및 배포된 사이트 확인
배포 요청을 하고 나면 아래와 같이 사이트를 배포하는 모습이 나타납니다.
배포가 완료되면 아래와 같이 Deploy success!라는 배포 완료 알림에 대한 모달 창이 나타납니다.
여기서 Get started를 누르면 사이드바의 Site overview로 이동하게 됩니다.
배포 완료된 사이트의 url은 Netlify에서 최초 생성된 사이트명으로 셋팅됩니다. (글 뒷쪽에 사이트명 변경하는 내용이 나옵니다.)
일단 사이트명 변경은 추후에 할 수 있으니, `https://site-name.netlify.app`을 눌러서 배포가 잘 됐는지 확인 합니다.
사이트 url 클릭하여 접속하면, 깃 저장소의 svelte 프로젝트가 빌드돼서 배포 된 모습을 확인할 수 있습니다.
해당 url은 로컬에서만 접속 가능한 것이 아닌, 인터넷이 되는 환경이면 어디서든 접속가능합니다.
더 확실히 확인 해보시고 싶으시다면, 모바일에서 접속 해보시면 다른 기기에서도 접속이 가능하다는 것을 확인 가능합니다.
6. 정리
이렇게 쉽게 Svelte 프로젝트를 Netlify에 배포할 수 있습니다. 이제 여러분은 간단한 몇 가지 설정과 명령어로 프로젝트를 웹에 공개하고, 누구나 접근할 수 있도록 만들었습니다.
Netlify는 강력한 기능과 사용자 친화적인 환경을 제공하여 프로젝트 배포를 편리하게 할 수 있게 해줍니다. 또한, 무료로 HTTPS를 지원하여 보안적인 측면에서도 안심할 수 있습니다.
아래 참고자료를 확인하여 Netlify의 확장성 있는 다양한 기능을 살펴보세요.
각 Web Framework에 따라서 배포 서비스에 대한 지원을 공식 문서에서 제공하고 있으니 해당 부분도 참고 자료 확인 해보시길 바랍니다.
해당 포스팅을 참고하여 여러분들의 포트폴리오 사이트, 토이 프로젝트를 쉽고 빠르게 배포 해보세요!
