SvelteをVercelでデプロイする

前回作ったTodoアプリをVercelでデプロイしてみます。

公式

• https://svelte.dev/docs/kit/adapter-vercel
  • 日本語翻訳: https://kit.svelte.jp/docs/adapter-vercel

デプロイ設定

$ bun install -d @sveltejs/adapter-vercel

svelte.config.js

-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-vercel';
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;

ローカルで動作確認

$ bun run build
$ bun run preview

エラーが出てないことを確認しておきます。

プロジェクトの作成

Framework Presetでは SvelteKit (v1) を選択します。

• Root Directory: ./
• Build Command: bun run build
• Output Directory: static
• Install Command: bun install

今回は Envinronment Variables で指定したいものないのでスキップ

デプロイします。

デプロイ成功しました。

デプロイしたページにアクセスします。

問題なくデプロイできたのでokです。
めちゃくちゃ簡単でした✌️