シングルページアプリケーションの提供

コード例: single-page-application

Ktorは、React、Angular、Vueなどのシングルページアプリケーションを提供する機能を提供します。

依存関係の追加

シングルページアプリケーションを提供するには、ktor-server-core 依存関係のみが必要です。 特定の依存関係は不要です。

アプリケーションの提供

シングルページアプリケーションを提供するには、コンテンツをどこから提供するか（ローカルファイルシステムまたはクラスパス）を定義する必要があります。 少なくとも、シングルページアプリケーションを含むフォルダ/リソースパッケージを指定する必要があります。

フレームワーク固有のアプリケーションの提供

React、Angular、Vueなどの特定のフレームワークを使用して作成されたシングルページアプリケーションのビルドを提供できます。 プロジェクトルートにReactアプリケーションを含むreact-appフォルダがあるとします。 アプリケーションは次の構造を持ち、index.htmlファイルがメインページです。

react-app
├── index.html
├── ...
└── static
    └── ...

このアプリケーションを提供するには、routing ブロック内でsinglePageApplicationを呼び出し、フォルダ名をreact関数に渡します。

import io.ktor.server.application.*
import io.ktor.server.http.content.*
import io.ktor.server.routing.*

fun Application.module() {
    routing {
        singlePageApplication {
            react("react-app")
        }
    }
}

Ktorは自動的にindex.htmlを検索します。 デフォルトページをカスタマイズする方法については、「サービング設定のカスタマイズ」を参照してください。

その他のフレームワークについては、angular、vue、emberなどの対応する関数を使用してください。

サービング設定のカスタマイズ

リソースからシングルページアプリケーションを提供する方法を説明するために、アプリケーションが次の構造を持つsample-web-appリソースパッケージ内に配置されているとします。

sample-web-app
├── main.html
├── ktor_logo.png
├── css
│   └──styles.css
└── js
    └── script.js

このアプリケーションを提供するには、次の設定が使用されます。

import io.ktor.server.application.*
import io.ktor.server.http.content.*
import io.ktor.server.routing.*

fun Application.module() {
    routing {
        singlePageApplication {
            useResources = true
            filesPath = "sample-web-app"
            defaultPage = "main.html"
            ignoreFiles { it.endsWith(".txt") }
        }
    }
}

• useResources: リソースパッケージからアプリケーションを提供することを有効にします。
• filesPath: アプリケーションが配置されているパスを指定します。
• defaultPage: main.htmlをデフォルトで提供するリソースとして指定します。
• ignoreFiles: 末尾に.txtを含むパスを無視します。

完全な例はこちらで確認できます。