SvelteKit 으로 만든 Web 을 무료로 배포할 수 있나요? 빠르고 편한 Netlify 를 적용해봐요! #5

해당 게시글은

(1) Netlify 개요

(2) Netlify 연동 방법 (w/ SvelteKit, Github)

에 대한 내용을 담고 있습니다.

이전 게시글 - 제가 만든 Svelte Web 은 왜 이렇게 못생겼나요? DaisyUI 인공호흡기를 붙여봐요! #4

제가 만든 Svelte Web 은 왜 이렇게 못생겼나요? DaisyUI 인공호흡기를 붙여봐요! #4

---

ch1 - Netlify 란?

Netlify 가 뭐예요? 사용해본 후기 알려주세요!

정적 Website 호스팅 솔루션

    Netlify 는 직접 만든 Website 를 무료로 호스팅할 수 있는 솔루션이자 플랫폼입니다. 다만, 사용자의 요청에 의해 데이터가 가공되고 형태가 실시간으로 변화하는 동적 (Dynamic) Website 에 대한 호스팅이 아니라, 미리 저장된 Html/CSS/Javascript 등의 파일을 기반으로 데이터가 변경되지 않는 정적 (Static) Website 에 대한 호스팅을 대상으로 서비스를 제공합니다. 확인 결과, 현재 Netlify 는 동적 Website 호스팅도 가능하다고 합니다.

    아래의 이미지와 같이, Local 환경에서의 Web 개발 산출물이 적절한 Netlify 세팅을 마치면 Public 환경에 호스팅되고 지정된 URL 을 기반으로 누구나 접근가능한 Web 이 배포됩니다. 이와 유사한 호스팅 솔루션 서비스로는 Vercel, Heroku 등이 존재합니다.

출처 : Netlify 공식 홈페이지

  

사용 후기

    SvelteKit 을 통한 Web 개발을 Github 기반으로 관리하고 있었는데, 이러한 환경에 Netlify 를 적용하는 과정에서 굉장히 긍정적인 사용 경험을 가지게 되었습니다. SvelteKit 과 Netlify 의 연동 및 Github 와 Netlify 연동 과정은 쉽고 직관적이었고 (대부분의 연동 과정은 NoCode 형태의 GUI 로 진행됩니다.) CICD 도 별다른 환경 세팅없이 적용되었습니다. 즉, Github 에 Code 를 Push 하기만 해도 새로운 버젼의 Code 가 반영된 신규 Web 이 자동 배포되었습니다. Netlify 와 같은 호스팅 솔루션 서비스를 알기 전까지 Web 개발에 대한 자동화 파이프라인을 GitAction 으로 직접 CICD 를 구축해야 한다는 잘못된 인식을 가지고 있었던 입장으로서, 이와 관련된 개발 시간을 크게 단축하여 Web 개발에 더욱 집중할 수 있다는 점이 큰 매력으로 다가왔습니다.

    (특정 사용량까지는) 무료인 것도 큰 장점입니다. 무료로 사용할 수 있는 리소스 여유분이 개인 프로젝트로 사용하기에 부족함이 없는 수준이기 때문에, 사용할 리소스가 매우 크다든가 (100GB 초과) 복잡도가 높은 대형 프로젝트와 같은 특수한 경우가 아니라면 문제가 발생할 가능성이 낮아보입니다. Backend 개발을 진행하면서 서버 구축 및 관리에 대한 부담감이 Public Cloud 의 서버리스 (Serverless) 서비스 (AWS Lambda, ECS Fargate 등) 에 의해 상당 부분 해소되었던 긍정적인 사용 경험을 가지고 있는데, 개인적으로 Frontend 개발 측면에서 Netlify 는 그보다 더 좋은 사용 경험을 제공해주었습니다. 

    아래와 같은 사항에 해당된다면, 당장 Netlify 공식 홈페이지에 방문해 보는 것을 추천해드립니다.

• 개인 포트폴리오를 Website 로 정리하여 관리하고 싶다. 
• <주로 스타트업 or 규모가 작은 팀> 팀 소개 Website 를 간단하게 만들고 공유하고 싶다.
• Frontend 개발 공부를 시작했고, 배포 (호스팅) 과정까지 End to End 로 경험해보고 싶다.

---

ch2 - SvelteKit (w/ Github) 환경에 적용하는 방법

Sveltekit 개발 프로젝트에 적용하는 방법을 알려주세요!

SvelteKit 개발 환경 세팅

    Github 에 Repository 를 만들고 해당 저장소를 기반으로 SvelteKit 개발 환경을 구축합니다. Github 개인 계정이라면 Public 및 Private Repository 모두 활용 할 수 있습니다. (Netlify 를 Public Repository 에 한정하여 연동할 수 있다고 착각하여 개발 과정에서 중간에 Private Repository 로 이전한 경험을 가지고 있습니다ㅠㅠ) 다만, Github 조직 계정이라면 무료 Plan 에서는 Private Repository 를 연동 대상으로 설정할 수 없습니다. SvelteKit 개발 환경 구축 과정은 아래의 관련 게시글에 상세히 기재되어 있습니다.

관련 게시글 - 정식 출시된 SvelteKit 으로 개발 환경을 구성해보겠습니다! #2

정식 출시된 SvelteKit 으로 개발 환경을 구성해보겠습니다! #2

    터미널에서 아래의 명령어를 입력하면 npm 을 통해 Svelte 개발 환경을 위한 Netlify Adapter 를 다운로드 받을 수 있습니다. (기본적인 적용과정은 공식 문서의 가이드라인과 동일합니다.)

npm install -D @sveltejs/adapter-netlify@next

다운로드가 완료되면, svelte.config.cjs 을 아래의 코드블럭과 같이 수정합니다.

import adapter from '@sveltejs/adapter-netlify'; // 추가
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	},
	preprocess: vitePreprocess()
};

export default config;

netlify.toml 파일을 생성하고 아래의 코드블럭을 추가합니다.

[build]
  command = "npm run build"
  publish = "build"

위의 과정을 통해, Netlify 연동을 위한 SvelteKit 개발 환경 세팅은 완료되었습니다.

 

Netlify 연동 (w/ Github)

    Netlify 홈페이지에 방문하여 회원가입을 마치고 Starter (무료) 자격으로 Team 을 생성합니다. Team Overview 메뉴의 좌측 하단 Sites 탭에서 아래의 이미지와 같이 import from git 을 클릭합니다. 이후, 정해진 프로세스대로 GUI 를 통해 Github 계정 및 Repository 연동을 진행합니다.

Netlify 연동 : Sites 탭 내, Git 옵션

    이후, 호스팅이 적용될 Branch (Deafult : Main) 를 지정하고, Build 세팅을 진행합니다. 아래의 이미지와 같이, Base Directory 공란에 SvelteKit 에서 처음에 설정한 폴더 명칭 (App Name) 을 작성하고 Build Command 에 npm run build 를 작성합니다.  

Netlify 연동 : Build 세팅

    정상적으로 연동 세팅이 진행되었다면, Netlify 에 의해 할당받은 임의의 URL 을 기반으로 Website 가 생성되고, Public 환경에서 호스팅된 것을 확인할 수 있습니다. 추가적으로, 아래의 이미지와 같이 General - Site Details 탭을 활용하여 임의로 할당된 URL 대신 사용자가 원하는 Website 명칭으로 수정할 수 있습니다. (별도의 Domain 세팅을 하지 않는다면 .netlify.app Domain 주소는 삭제 할 수 없습니다.)

    위의 과정을 통해 Github 와 연동된 Netlify 서비스를 통해 Website 를 호스팅했다면, 앞으로 해당 Website 는 Github 에 새로운 Code 가 Push 될 때마다 해당 변경사항을 바탕으로 (동일한 URL 의) 새로운 버젼의 Website 로 업데이트되는 것을 확인할 수 있습니다.

---

비전공자가 Svelte 를 공부하는 과정에서 겪게 될 어려움과 시행착오를 먼저 경험하고, 이어질 게시글에서 최대한 쉽게 공유해드리고자 합니다. 잘못된 내용에 대한 지적사항이나 문의사항은 언제든지 편하게 댓글로 남겨주시길 바라겠습니다.