SvelteKit 애플리케이션을 배포하는 방법은 무엇인가요?

이 문서에서는 SvelteKit을 사용하여 기본 견적서 생성기 애플리케이션을 빌드하고 Back4app 컨테이너를 사용하여 호스팅합니다.

SvelteKit은 Svelte JavaScript 프레임워크의 원칙을 기반으로 구축된 최신 웹 애플리케이션 프레임워크입니다. 개발자에게 단순성과 성능에 중점을 둔 효율적이고 우아한 웹 애플리케이션을 만들 수 있는 방법을 제공합니다.

2020년에는 Svelte의 창시자인 Rich Harris가 SvelteKit을 만들었고, 2022년 10월에는 Rich Harris와 그의 팀이 Vercel에 합류했습니다.

SvelteKit 애플리케이션을 배포할 때 Back4app 컨테이너를 사용하면 도움이 됩니다. Back4app 컨테이너는 개발자가 Back4app 인프라에서 컨테이너화된 애플리케이션을 배포하고 관리할 수 있는 플랫폼입니다.

프로덕션 환경에서 컨테이너화된 애플리케이션을 실행할 수 있는 간단하고 확장 가능한 방법을 제공하는 클라우드 기반 서비스입니다.

SvelteKit이란 무엇인가요?

SvelteKit은 고성능의 강력한 웹 애플리케이션을 구축하기 위한 웹 프레임워크입니다. 가볍고 반응성이 뛰어난 JavaScript 프레임워크인 Svelte를 기반으로 구축되었습니다.

SvelteKit은 서버 측 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 측 라우팅 등 웹 애플리케이션을 쉽게 개발 및 배포할 수 있는 다양한 기능을 제공합니다.

또한 단순성, 유연성, 확장성, 성능 등과 같은 많은 이점을 제공합니다. 계속 읽으면서 SvelteKit 앱을 배포하는 방법을 알아보세요.

SvelteKit의 장점

다음은 SvelteKit 프레임워크 사용의 몇 가지 장점입니다:

쉬운 학습 곡선

웹 개발을 위한 프런트엔드 프레임워크를 선택할 때 고려해야 할 중요한 요소 중 하나는 해당 프레임워크와 관련된 학습 곡선입니다.

학습 곡선이 가파르면 프레임워크 도입을 꺼릴 수 있지만, 완만하면 접근성과 매력도가 높아질 수 있습니다.

특히 HTML, CSS, JavaScript에 익숙하다면 SvelteKit은 학습 곡선이 완만합니다. 구문이 간단하고 직관적이어서 웹 애플리케이션을 쉽게 이해하고 구축할 수 있습니다.

TypeScript 지원

TypeScript는 웹 개발 분야에서 인기를 얻고 있는 자바스크립트의 정적 타이핑 상위 집합입니다. 강력한 타이핑, 코드 명확성, 더 나은 툴을 자바스크립트 프로젝트에 제공합니다.

SvelteKit는 뛰어난 TypeScript 지원을 통해 타입에 안전한 코드를 작성하고 개발 중 잠재적인 오류를 포착할 수 있습니다. 이를 통해 코드 품질, 유지 보수성 및 개발 팀 내 협업을 개선할 수 있습니다.

파일 기반 라우팅

파일 기반 라우팅은 애플리케이션에서 경로를 쉽게 구성하고 관리할 수 있는 최신 웹 개발 기능입니다. 타사 라이브러리를 사용하는 대신 파일 관리를 사용하여 경로를 결정하는 방식으로 작동합니다.

SvelteKit은 파일 기반 라우팅 시스템을 사용합니다. 파일과 폴더를 생성하여 애플리케이션의 경로를 구성하면 프로젝트 구조를 쉽게 관리할 수 있습니다.

커뮤니티 및 에코시스템

웹 개발 영역에서 강력하고 지원적인 커뮤니티와 번성하는 에코시스템이 있다는 것은 큰 장점입니다.

SvelteKit은 성장하는 커뮤니티, 재사용 가능한 구성 요소 및 라이브러리의 풍부한 컬렉션, 광범위한 문서 등 광범위한 Svelte 에코시스템의 이점을 누릴 수 있습니다.

SvelteKit의 한계

SvelteKit은 효율적인 웹 애플리케이션을 구축할 수 있는 강력한 프레임워크이지만 몇 가지 제한 사항이 있습니다. 이러한 제한 사항은 다음과 같습니다:

서버 측 렌더링(SSR) 제한 사항

서버 측 렌더링(SSR)은 웹 애플리케이션이 서버에서 콘텐츠를 렌더링하고 미리 렌더링된 HTML을 클라이언트로 전송할 수 있도록 하는 기술입니다. SSR은 SEO 개선, 초기 페이지 로딩 속도 향상, 저사양 디바이스에서의 성능 향상 등 여러 가지 장점이 있습니다.

SvelteKit은 서버 측 렌더링을 지원합니다. 하지만 서버 측 렌더링에 대한 세밀한 제어나 스트리밍 SSR 지원 등 다른 프레임워크에서 사용할 수 있는 일부 고급 SSR 기능이 부족합니다.

제한된 툴링

비교적 새로운 프레임워크인 SvelteKit의 툴링은 여전히 발전 중이며 다른 프레임워크와 같은 수준의 성숙도와 기능을 갖추지 못할 수도 있습니다.

즉, SvelteKit 프로젝트마다 개발 설정 및 도구 선택에 약간의 변동성이 있을 수 있습니다. 이로 인해 코드 린팅, 테스트 또는 빌드 최적화와 같은 작업에 대한 옵션이 줄어들 수 있습니다.

제한된 에코시스템

제한된 생태계는 SvelteKit의 한계 중 하나이며, 이는 개발 경험과 선택에 영향을 미칠 수 있습니다. 기존 프레임워크에 비해 SvelteKit은 라이브러리, 도구 및 플러그인 에코시스템이 더 작습니다.

즉, 특정 기능을 처음부터 구축하거나 커뮤니티 지원 솔루션에 의존해야 할 수도 있습니다. 프로젝트에 사용할지 여부를 결정할 때는 SvelteKit 에코시스템의 현재 상태를 고려하는 것이 중요합니다.

커뮤니티 규모

커뮤니티 규모는 특정 프레임워크에 제공되는 개발 환경과 지원에 상당한 영향을 미칠 수 있습니다.

SvelteKit 커뮤니티는 빠르게 성장하고 있지만, React 및 Vue.js와 같은 다른 주요 프레임워크 커뮤니티에 비해서는 여전히 규모가 작습니다.

이는 쉽게 사용할 수 있는 리소스가 줄어들고, 새로운 기능의 채택이 느려지고, 학습 리소스가 줄어들고, 커뮤니티 지원에 대한 응답 시간이 길어질 수 있음을 의미합니다.

SvelteKit 배포 옵션

서비스형 인프라(IaaS) 및 서비스형 컨테이너(CaaS)를 비롯한 다양한 플랫폼에 SvelteKit 애플리케이션을 배포할 수 있습니다.

서비스형 인프라(IaaS)

서비스형 인프라(IaaS) 플랫폼은 인터넷을 통해 가상화된 컴퓨팅 리소스를 제공하는 클라우드 컴퓨팅 서비스입니다. 이러한 리소스에는 가상 머신, 스토리지, 네트워킹 및 기타 기본 구성 요소가 포함됩니다.

IaaS 플랫폼은 물리적 하드웨어에 투자하고 유지 관리하지 않고도 유연하고 확장 가능한 방식으로 IT 인프라에 액세스하고 관리할 수 있는 방법을 제공합니다.

또한 종량제 요금제 모델에 따라 관리 서비스, 백업 및 재해 복구, 보안 및 규정 준수, 비용 효율성을 제공합니다.

SvelteKit 애플리케이션을 배포하는 데 사용할 수 있는 IaaS 플랫폼의 몇 가지 예는 다음과 같습니다:

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

서비스형 컨테이너(CaaS)

컨테이너 관리 플랫폼 또는 컨테이너 오케스트레이션 플랫폼이라고도 하는 서비스형 컨테이너(CaaS) 플랫폼은 컨테이너화된 애플리케이션의 배포, 확장, 관리 및 오케스트레이션을 간소화하는 클라우드 기반 서비스입니다.

이러한 플랫폼은 컨테이너화 프로세스를 간소화하고 컨테이너 관리를 위한 포괄적인 솔루션을 제공하도록 설계되어 인프라 관리의 복잡성 없이 애플리케이션 개발에 집중할 수 있습니다.

CaaS 플랫폼을 사용하여 SvelteKit 애플리케이션을 배포할 수 있습니다. 이러한 플랫폼 중 일부는 다음과 같습니다:

• Docker
• Kubernetes
• Back4App

다음은 SvelteKit 애플리케이션에 사용할 수 있는 다른 배포 옵션입니다. 애플리케이션에 가장 적합한 플랫폼은 성능, 확장성, 비용 고려 사항 등 특정 요구 사항에 따라 달라집니다.

배포 프로세스

Back4app CaaS 플랫폼을 사용하면 쉽고 간소화된 프로세스로 많은 이점을 제공하는 SvelteKit 애플리케이션을 배포할 수 있습니다. Back4app의 CaaS가 기본 인프라를 처리하므로 애플리케이션 구축에만 집중할 수 있습니다.

Back4app 컨테이너란 무엇인가요?

Back4App 컨테이너, 일명 “Back4App CaaS”(서비스형 컨테이너)는 개발자가 Back4App에서 제공하는 클라우드 환경에서 Docker 컨테이너를 배포하고 관리할 수 있도록 지원하는 기능입니다.

클라우드에서 Docker 컨테이너의 배포 및 관리를 간소화하는 관리형 컨테이너 호스팅 솔루션입니다.

Back4app 컨테이너는 확장성, 유연성, 다른 Back4app 서비스와의 통합을 제공하므로 다양한 애플리케이션 및 서비스에 적합합니다.

인프라 관리의 복잡성을 최소화하면서 프로젝트에 컨테이너화를 활용하고자 하는 분들에게 탁월한 선택입니다.

프로젝트 소개

이 튜토리얼에서는 견적 API를 사용하여 표시할 임의의 견적을 가져오는 간단한 견적서 생성기 앱을 SvelteKit으로 구축합니다.

SvelteKit 애플리케이션을 만들려면 터미널에서 다음 명령을 실행합니다:

npm create svelte@latest quote-generator

명령을 실행한 후 터미널에 표시되는 프롬프트를 사용하여 SvelteKit 프로젝트를 구성합니다.

예를 들어

위 이미지에서 볼 수 있듯이 견적 생성기 프로젝트는 TypeScript 구문을 사용하고, 코드 린팅에는 ESLint를, 코드 서식 지정에는 Prettier를 사용합니다.

이제 터미널에서 현재 디렉터리를 프로젝트의 디렉토리로 전환하고 필요한 종속 요소를 설치합니다. 이렇게 하려면 터미널에서 다음 명령을 실행합니다:

cd quote-generator
npm install

필요한 종속 요소를 설치한 후 즐겨 사용하는 IDE에서 프로젝트를 열고 애플리케이션 빌드를 시작합니다.

애플리케이션 구축

애플리케이션을 빌드할 때 가장 먼저 해야 할 일은 애플리케이션의 글로벌 스타일과 레이아웃을 정의하는 것입니다. 애플리케이션의 글로벌 스타일을 정의하려면 src 디렉터리에 스타일 폴더를 만들고 글로벌.css 파일을 폴더에 추가합니다.

global.css 파일에 다음 코드 줄을 작성합니다:

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

button{
    background-color: #333333;
    color: #e2e2e2;
    border-radius: 12px;
    padding: 0.7rem 2rem;
    border: none;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color:  #28282B;
    color: #333333;
}

위의 코드 블록은 애플리케이션의 몇 가지 기본 스타일을 설정합니다. Google Fonts트에서 몬세라트 글꼴을 가져옵니다.

또한 모든 요소에 기본 스타일을 적용하고 콘텐츠를 본문 중앙에 배치하며 버튼 요소의 기본 및 마우스오버 상태의 스타일을 지정합니다.

애플리케이션의 글로벌 스타일을 정의한 후에는 해당 스타일을 애플리케이션에 적용해야 합니다.

이를 위해서는 레이아웃 경로가 필요합니다. SvelteKit은 애플리케이션에서 레이아웃을 정의하는 데 도움이 되는 +layout.svelte 파일을 제공합니다. src/routes 디렉토리에 +layout.svelte 파일을 추가하여 애플리케이션의 레이아웃을 정의할 수 있습니다.

레이아웃.svelte 파일에서 글로벌 스타일을 앱에 적용하려면 global.css 파일을 가져옵니다.

이렇게요:

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

슬롯 요소는 애플리케이션이 페이지 콘텐츠를 삽입할 수 있는 공간을 만듭니다. 페이지를 렌더링하면 애플리케이션이 페이지의 콘텐츠로 슬롯 요소를 채워 레이아웃 내에 표시합니다.

프로젝트의 src/lib 디렉토리에 Card.svelte 파일을 생성합니다. 이 파일은 견적 API에서 가져온 데이터를 렌더링하는 데 사용할 Card 컴포넌트입니다.

카드 컴포넌트는 다음과 같이 표시되어야 합니다:

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

카드 컴포넌트의 스크립트 태그에는 작성자 및 콘텐츠 프롭이라는 두 가지 프롭이 정의되어 있습니다. 둘 다 초기값이 빈 문자열인 문자열 유형입니다.

메인 요소는 컴포넌트의 템플릿을 정의합니다. 템플릿에는 작성자 속성 값을 표시하는 h4 요소와 콘텐츠 속성 값을 표시하는 p 요소가 포함됩니다. 마지막으로 스타일 태그에는 컴포넌트의 스타일을 지정하는 CSS 속성 및 값이 포함됩니다.

이제 +page.svelte 파일에서 카드 컴포넌트를 가져와 렌더링합니다. 이것이 애플리케이션을 렌더링할 때 표시되는 홈 경로입니다.

페이지.svelte 파일에서 견적 API에서 데이터를 가져와 해당 프롭을 사용하여 카드 컴포넌트에 전달합니다.

이렇게요:

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

위의 코드 블록은 fetchQuote 함수를 사용하여 견적서 API에서 데이터를 가져온 다음 가져온 데이터를 견적서 변수에 할당합니다.

fetchQuote 함수를 onMount 훅에 전달하면 컴포넌트가 마운트될 때(즉, 컴포넌트의 초기 렌더링) 실행되도록 합니다.

카드 컴포넌트는 인용문 객체에서 작성자 및 콘텐츠 속성 값을 받아 이를 표시합니다. 버튼을 클릭하면 fetchQuote 함수가 트리거되어 표시할 다른 임의의 견적을 가져옵니다.

위의 코드 블록은 @iconify/svelte 패키지의 아이콘 컴포넌트를 사용합니다. 이 컴포넌트를 사용하려면 먼저 터미널의 프로젝트 디렉터리에서 다음 명령을 실행하여 @iconify/svelte 패키지를 설치해야 합니다:

npm install --save-dev @iconify/svelte

아이콘화/슬림 패키지를 설치한 후 개발 서버에서 앱을 실행하여 애플리케이션을 확인합니다. 터미널에서 다음 명령을 실행하여 앱을 실행할 수 있습니다:

npm run dev

위의 명령을 실행하면 http://localhost:5173/ 에서 개발 서버가 시작됩니다. 웹 브라우저에서 링크를 열어 앱을 확인합니다.

애플리케이션은 다음과 같은 모습이어야 합니다:

애플리케이션 도커화

Back4app CaaS 플랫폼에 애플리케이션을 배포하려면 먼저 애플리케이션을 도커화해야 합니다. SvelteKit 애플리케이션을 도커라이즈하려면 먼저 Svelte의 노드 어댑터를 설치해야 합니다.

터미널에서 다음 명령을 실행하여 노드 어댑터를 설치할 수 있습니다:

npm i -D @sveltejs/adapter-node

이 명령을 실행하면 @sveltejs/adapter-node 패키지가 SvelteKit 프로젝트에 개발 종속 요소로 설치됩니다. 이 어댑터는 Node.js 환경에서 SvelteKit 애플리케이션을 배포할 때 사용합니다.

패키지 설치가 완료되면 svelte.config.js 파일의 첫 번째 코드 줄을 아래 코드로 바꿉니다:

import adapter from '@sveltejs/adapter-node';

다음 단계는 프로젝트의 루트 디렉터리에 .dockerignore 파일을 만드는 것입니다. .dockerignore 파일에서 Docker 이미지를 빌드할 때 제외할 파일과 디렉터리를 지정합니다.

이렇게요:

node_modules
.svelte-kit
build
public

제외할 파일과 디렉터리를 지정한 후. 프로젝트의 루트 디렉터리에 Dockerfile이라는 이름의 Docker 파일을 만듭니다.

Docker파일에 다음 코드 줄을 추가합니다:

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

이 도커파일은 다단계 빌드를 유발하며, 첫 번째 단계에서는 애플리케이션을 빌드하고 두 번째 단계에서는 필요한 종속성만 포함된 더 작은 프로덕션 이미지를 생성합니다.

이제 터미널에서 다음 명령을 실행하여 애플리케이션의 도커 이미지를 빌드할 수 있습니다:

docker build -t quote-generator .

애플리케이션 배포

애플리케이션을 도커화하여 GitHub 리포지토리에 푸시한 후에는 Back4app에 배포할 수 있습니다. 이렇게 하려면 아직 Back4app 계정이 없는 경우 계정을 만드세요.

Back4app 계정을 만들려면 다음 단계를 따르세요:

1. Back4app 웹사이트를 방문하세요.
2. ‘가입하기 ‘ 버튼을 클릭합니다.
3. 가입 양식을 작성하여 제출하세요.

Back4app 계정을 생성한 후 Back4app 웹사이트에서 계정에 로그인하고 새 앱을 생성하세요. 화면 오른쪽 상단에 있는 ‘새 앱’ 버튼을 클릭하면 됩니다.

서비스형 컨테이너 옵션을 선택합니다. 이 옵션을 선택하면 웹사이트가 다른 페이지로 리디렉션되어 GitHub 계정을 Back4app에 연결할 수 있습니다.

GitHub 계정을 Back4app에 연결한 후 배포할 애플리케이션의 리포지토리를 선택합니다.

최종적으로 애플리케이션을 배포하기 전에 애플리케이션에 이름을 지정하고 초기 배포를 구성합니다.

애플리케이션이 성공적으로 배포되면 Back4app은 웹 브라우저에서 애플리케이션에 액세스할 수 있는 링크를 제공합니다.

결론

결론적으로 Back4pp의 CaaS 플랫폼을 사용하여 SvelteKit 애플리케이션을 배포하면 개발이 간소화됩니다. 프로세스는 간단합니다.

애플리케이션을 만들고, 애플리케이션을 도커라이즈하고, 애플리케이션을 GitHub 리포지토리에 푸시하고, 마지막으로 애플리케이션을 배포하는 과정이 포함됩니다.

SvelteKit 애플리케이션 배포를 고려할 때 Back4app CaaS. 플랫폼은 확장 가능하고 비용 효율적인 솔루션을 제공합니다.

이 글이 마음에 드셨다면 ChatGPT를 사용하여 SvelteKit 앱을 구축하는 방법 글도 읽어보시기 바랍니다.

자주 묻는 질문