SvelteのプロジェクトをVercelにデプロイする手順まとめ

🔰 はじめに

Vercelにデプロイする手順をまとめました。
細かいことはいいからとにかくデプロイする方法が知りたい、そんな方々の皆様に参考にしていただければと思います。

✅ 前提条件

• パソコンに Node.js がインストールされている
• GitHub アカウントを持っている
• Vercel アカウント（GitHub連携で簡単作成）

---

🛠️ ステップ1：Svelte プロジェクトの作成

npm create svelte@latest my-svelte-app
cd my-svelte-app
npm install

👉 プロジェクト名はお好きな名前でOK。ここでは「my-svelte-app」を例に説明しています。

✨ ステップ2：v0.devでコードを生成して組み込む

① v0.dev にアクセスしてコードを生成

初めて使いましたが、とても良かったです。Cloudeでも近いものはできましたが、v0のほうがすんなりいく感じです。
今回はコードの質ではなく、Vercelへのデプロイを手軽に行えることを重視して、v0を選びました。

② Tailwind CSS を導入（必要な場合）

リッチなデザインを実現するため、Tailwind CSS を導入します。不要であれば、この部分は飛ばしてください。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.cjs の content を設定：

content: ["./src/**/*.{html,js,svelte,ts}"]

src/app.css に以下を記述：

@tailwind base;
@tailwind components;
@tailwind utilities;

main.js にCSSをインポート：

import './app.css';

③ Svelteのコンポーネントとして貼り付け

例：src/App.svelte などを作成し、生成したコードを貼り付け。

---

🧪 ステップ3：ローカルで動作確認

npm run dev

http://localhost:5173 を Ctrl + click して、ブラウザでSvelteアプリが表示されれば成功！

> vite


  VITE v6.2.6  ready in 6677 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

---

🗃️ ステップ4：GitHub にプッシュ

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main

※ GitHubに空のリポジトリを作成しておいてください。

---

🚀 ステップ5：Vercel にデプロイ

1. Vercel にログイン（GitHub連携）
2. 「Add New Project」→ GitHubのSvelteリポジトリを選択
3. 「Import」をクリック（設定はデフォルトでOK）
4. 自動的にビルド & デプロイが始まる！

完了すると、Vercel が自動でURLを発行してくれます 🎉

---

🔗 まとめ

ステップ	内容
1	Svelteアプリ作成
2	v0.devでコードを生成して組み込む
3	ローカルで確認
4	GitHubにプッシュ
5	Vercelでデプロイ

だいぶかんたんですよね！でもそのうち今回のデプロイ手順ですらAI側でやってくれるようになることを期待しています！

---