Svelte(Kit)の世界: ビルドとデプロイ #5


## はじめに

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

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

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

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

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

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

- [はじめに](#はじめに)
- [フロントエンドの世界 2024 について](#フロントエンドの世界-2024-について)
- [もくじ](#もくじ)
- [デプロイ先](#デプロイ先)
- [Svelte Adapters](#svelte-adapters)
- [Cloudflare プロジェクトの追加](#cloudflare-プロジェクトの追加)
- [Github リポジトリとの連携](#github-リポジトリとの連携)
- [Cloudflare プロジェクト設定](#cloudflare-プロジェクト設定)
- [デプロイ確認](#デプロイ確認)
- [おわりに](#おわりに)

## デプロイ先

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

- [Vercel](https://vercel.com/)
- [Netlify](https://www.netlify.com/)
- [Cloudflare](https://www.cloudflare.com/)
- node サーバー
- SSG 環境

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

## Svelte Adapters

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

今回は`Cloudflare Pages`にデプロイするので[`@sveltejs/adapter-cloudflare`](https://kit.svelte.jp/docs/adapter-cloudflare)を使用します。

### デフォルトアダプター

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

```js: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`](https://kit.svelte.jp/docs/adapter-cloudflare))

通常インストール

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

[Turborepo](https://turbo.build/) を使用している場合はこちらでもインストール可能です。
※ 本記事は `Turborepo` を使用しています

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

### アダプターの設定

`svelte.config.js` で[公式ドキュメント](https://kit.svelte.jp/docs/adapter-cloudflare#usage)の手順に沿ってアダプターを設定します。

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

```diff_javascript: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` プロジェクトを追加します。

![cloudflare-add-pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/2ec21aef-6f81-be0e-82bd-94ce1c62955b.png)

## Github リポジトリとの連携

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

![スクリーンショット 2024-11-27 0.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/ed3153b9-6517-f01b-7dc2-d26d10d493cc.png)

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

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

![cloudflare-github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/ecfb6c05-afa9-7de6-9229-8eba921b6e8b.png)

## Cloudflare プロジェクト設定

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

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

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

### ビルド設定

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

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

```:Framework preset
None
```

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

<details>
  <summary>モノレポの場合 (省略可能)</summary>

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

```shell:Build command
pnpm --filter svelte-client build
```

```shell:Build output directory
apps/svelte-client/.svelte-kit/cloudflare
```

</details>

![cloud-flare-build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/b6c1781a-c163-11c0-e2a8-069fc07daea5.png)

### デプロイ実行

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

## デプロイ確認

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

![cloudflare-deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7c93fe7e-5bf1-481c-d3b8-538925582a6f.png)

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

https://frontend-assort-2024.pages.dev/

![cloudflare-after-deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/57b599f8-777d-75c1-0aff-e51a1a859dab.png)

## おわりに

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

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

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

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 6 記事目です。
次の記事はこちら [Svelte(Kit)の世界: Runes (おまけ) #6](https://qiita.com/nuinteedev/private/2511a43df8bd071f6854)