# Svelte

### 1. 概要

> Svelteは、Vue、React、Angularと異なり、少ないコードで他のフロントエンドフレームワークと同じアプリケーションを作成できるという利点があります。Virtual DOMを使用しないため、ランタイムパッケージが存在せず、コンパイルされた成果物のサイズが小さくなるため、SPAの欠点を最小限に抑えることができます。

AppPaaSでは、Svelte 4、SvelteKit 2、Node 20をサポートしています。

{% hint style="warning" %}
AppPaaSでSvelteをデプロイするためには、以下の事前作業が必要です。
{% endhint %}

* プロジェクトのルートディレクトリに `adapter-node` をインストールします。
* svelte.config.jsファイル作成(以下は作成された `svelte.config.js` のコードです。)

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

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

### 2. サービス環境設定

<figure><img src="https://3756387927-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fuge4ynyWrv4chg2JFLbY%2Fuploads%2Fq6F1h8u077ujtMDz7jln%2Fimage.png?alt=media&#x26;token=0074ab98-5e1e-4d2d-aa98-ea88586b2e4f" alt=""><figcaption></figcaption></figure>

**内部ポート**

サービスがデプロイされた後にリッスンされるポートを指します。\
一般的に、Svelteアプリケーションを作成する際には3000ポートが使用されますが、\
ソース内でそのポートを変更した場合は、変更した値を入力する必要があります。\
AppPaaSのベータ版では、指定されたポートに基づいてTCPヘルスチェックが行われます。<br>

#### 外部ポート、外部ポートの公開設定

サービスをパブリックに公開するかどうかを決定する設定です。\
デフォルトでは443に設定されており、公開設定にすると外部ドメインが割り当てられ、\
https\://{割り当てられたアドレス}を通じて外部からアクセスできます。\
非公開に設定した場合、外部からのアクセスは不可能となり、\
内部ドメインアドレスを介してのみサービス間の通信がサポートされます。

#### 自動デプロイ設定

自動デプロイを設定すると、リポジトリの選択したブランチに変更があった場合、\
その変更に対するフックを受けて、自動的にビルドおよびデプロイが進行します。

### 3. 高度な環境設定

<figure><img src="https://3756387927-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fuge4ynyWrv4chg2JFLbY%2Fuploads%2FlbjRKzN15HcAfIOs2pRf%2Fimage.png?alt=media&#x26;token=32e1c707-c2b0-4fc5-b4f2-1ec22c1f5944" alt=""><figcaption></figcaption></figure>

#### ビルドコマンド

デフォルトでは`npm run build`が実行されます。 \
変更が必要な場合は、この値をオーバーライドすることができます。

#### **インストールコマンド**

デフォルトでは`npm install`が実行されます。 \
変更が必要な場合は、この値をオーバーライドすることができます。

#### **開始コマンド**

`node build`が実行されます。この値もオーバーライドすることが可能です。

#### **環境変数**

環境変数はKey/Value形式で入力され、入力された値はコンテナOSの環境変数として注入されます。\
注入された環境変数は、コード内で`process.env`を通じてアクセスして使用することができます。