はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Svelte に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

この記事では Svelte アプリケーションのデプロイ方法について書きました。

Svelte に少しでも興味のある方は、ぜひご覧ください。

フロントエンドの世界 2024 について

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

デプロイ先

SvelteKitは以下の中から選んだ環境に対し、最適化されたビルドを行うことができます。

Vercel
Netlify
Cloudflare
node サーバー
SSG 環境

今回はあまり触った事がなかった Cloudflare を選択しました。

Svelte Adapters

Svelte でアプリケーションデプロイ時はホスティング環境に合わせた adapter を追加する必要があります。(参考: Adapters)

今回はCloudflare Pagesにデプロイするので@sveltejs/adapter-cloudflareを使用します。

デフォルトアダプター

Svelte プロジェクト作成直後はデフォルトの@sveltejs/adapter-autoアダプターが設定されているているので、これをデプロイ先に合わせて修正します。

svelte.config.js

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://svelte.dev/docs/kit/integrations
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
    adapter: adapter(),
  },
};

export default config;

アダプターのインストール

Cloudflare Page用の@sveltejs/adapter-cloudflareアダプターを追加します。(参考: @sveltejs/adapter-cloudflare)

通常インストール

# 通常インストール
npm install -D @sveltejs/adapter-cloudflare

Turborepo を使用している場合はこちらでもインストール可能です。
※ 本記事は Turborepo を使用しています

# Turborepoを使用している場合
pnpm --filter [svelteアプリのパス] install -D @sveltejs/adapter-cloudflare

アダプターの設定

svelte.config.js で公式ドキュメントの手順に沿ってアダプターを設定します。

また今回 wrangler.tomlによる設定は行わないので configPathは指定しません。(それ以外は基本コピペで大丈夫です)

svelte.config.js

- import adapter from "@sveltejs/adapter-auto";
+ import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://svelte.dev/docs/kit/integrations
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
+    adapter: adapter({
+      routes: {
+        include: ["/*"],
+        exclude: ["<all>"],
+      },
+      platformProxy: {
+        environment: undefined,
+        experimentalJsonConfig: false,
+        persist: false,
+      },
+    }),
  },
};

Cloudflare プロジェクトの追加

右上の「+ Add」から新しい Pages プロジェクトを追加します。

Github リポジトリとの連携

デプロイアセットの連携方法を聞かれるので今回は Connect to Gitから Github を選択します。

連携したい Github アカウントとリポジトリを選択します。

今回は本記事用に作成した frontend-assort-2024というリポジトリを選択し、「Begin setup」からセットアップを開始します。

Cloudflare プロジェクト設定

プロジェクト名と対象ブランチの選択

任意のプロジェクト名を入力し、自動デプロイの対象ブランチを選択します。

今回は frontend-assort-2024というプロジェクト名でmainブランチを自動デプロイ対象に選択します。

ビルド設定

フレームワークのプリセットはnoneを選択します。

※ 通常は SvelteKit のプリセットで問題ないですが、本アプリケーションはTurborepoによるモノレポ管理を行っているのでnoneで設定します。

Framework preset

None

モノレポではない場合、SvelteKitのフレームワークプリセット選択時の自動設定のままで基本的に問題ないです。

モノレポの場合 (省略可能)

本アプリケーションで使用しているTurborepoとpnpmを用いた設定例です。

Build command

pnpm --filter svelte-client build

Build output directory

apps/svelte-client/.svelte-kit/cloudflare

デプロイ実行

全ての設定が完了したら「Save and Deploy」を実行します。

デプロイ確認

デプロイ実行完了後は Workers & Pages の Deploymentsからデプロイ一覧を確認する事ができます。

デプロイに紐づいている URL から表示を確認できます。
無事に表示されていますね。

おわりに

Svelteのアダプター機能で簡単に環境毎のデプロイ最適化が出来て魅力的だなと思いました。

また Cloudflare もプロジェクト作成からデプロイまで 5 分 ~ 10 分程度で完了出来て非常に感動しました。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

この記事はフロントエンドの世界 Advent Calendar 2024の 6 記事目です。
次の記事はこちら Svelte(Kit)の世界: Runes (おまけ) #6