# Svelte

### 1. 개요

> Svelte는 Vue, React, Angular과 달리 적은 코드로 다른 프론트엔드 프레임워크와 \
> 동일한 애플리케이션을 제작 할 수 있는 장점을 보유하고 있습니다.\
> Virtual DOM을 사용하지 않아 런타임 패키지가 존재하지 않으며 \
> 컴파일 결과물의 용량이 줄어들기 때문에 SPA의 단점을 최소화 할 수 있는 장점이 있습니다.

AppPaaS에서는 Svelte 4, Sveltekit 2, Node 20을 지원합니다.

{% hint style="warning" %}
AppPaaS Svelte 배포를 위해서는 아래와 같은 사전 작업이 필요합니다.
{% endhint %}

* 프로젝트 Root 디렉토리에 adapter-node 설치 `npm i -D @sveltejs/adapter-node`
* &#x20;<mark style="background-color:yellow;">svelte.config.js</mark> 파일 생성 (아래 코드는 생성 된 svelte.config.js 입니다.)

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

export default {
	kit: {
		adapter: adapter()
	}
};
```

### 2. 서비스 환경설정

<figure><img src="https://1281168261-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F69bJtwnfn269Dqzr8gks%2Fuploads%2FtO3nlQAhep6sXrLvgsBv%2Fimage.png?alt=media&#x26;token=f5cade92-8bfd-4214-8b94-2b0cf8848018" alt=""><figcaption></figcaption></figure>

* **내부 포트**\
  서비스가 배포된 후 리슨되는 포트를 의미합니다. \
  3000 포트가 사용되며 소스 내에서 해당 포트를 변경했을 경우 변경한 값을 입력해 주어야 합니다.\
  AppPaaS Beta에서는 해당 포트를 기반으로 TCP 헬스체크를 합니다.<br>
* **외부 포트, 외부 포트 공개 여부**\
  서비스를 퍼블릭으로 오픈할지 여부를 결정하는 설정입니다. \
  기본으로 443, 오픈으로 설정되어 있으며 오픈 설정 시 외부 도메인이 할당되어 \
  https\://{할당된 주소}를 통해 외부에서 접근할 수 있습니다. \
  비공개로 설정할 경우 외부에서 접근이 불가능하며 내부 도메인 주소로 서비스 간 통신만 지원됩니다.<br>
* **자동 배포 설정**\
  자동 배포를 설정하면 리포지터리의 선택한 브랜치에 변경이 생길 경우 \
  변경에 대한 훅을 받아 자동으로 빌드 및 배포가 진행됩니다.

### 3. 고급  환경설정

***

* **빌드 명령어**\
  디폴트로 `npm run build`가 수행됩니다. 수정이 필요할 경우 해당 값을 오버라이드 할 수 있습니다.<br>
* **설치 명령어**\
  디폴트로 `npm install` 이 수행됩니다. 수정이 필요할 경우 해당 값을 오버라이드 할 수 있습니다.<br>
* **시작 명령어**\
  `node build`가 수행됩니다. 해당 값 역시 오버라이드 할 수 있습니다.<br>
* **환경 변수**\
  Key/Value 형태로 입력되며 입력된 값은 컨테이너 OS의 환경 변수로 주입됩니다.\
  주입된 환경 변수는 코드 내에서 process.env을 통해 접근하여 사용할 수 있습니다.