mathruffian-dot

Claude Code 懶人包 #04：連接 Supabase 資料庫

Development community intermediate

SOURCE https://github.com/mathruffian-dot/claude-code-lazy-packs

Description

> 版本：v0.2 > 更新日期：2026-04-04 > 對應影片：Claude基本功 EP08 > 📌 **本懶人包可獨立執行**：會自動檢查並安裝所需工具，不需要先看過其他懶人包。你只要確認下方「先備條件」即可開始。 ---

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for mathruffian-dot/claude-code-lazy-packs, shared by 8 entries in this directory. It describes the repository, not this entry specifically.

title: 'Claude Code 懶人包 #04：連接 Supabase 資料庫' date: '2026-04-04' type: 懶人包 version: v0.2 status: 初版（實作後更新） tags:

Claude-Code
懶人包
Supabase
資料庫
MCP video: EP08

Claude Code 懶人包 #04：連接 Supabase 資料庫

版本：v0.2 更新日期：2026-04-04 對應影片：Claude基本功 EP08

📌 **本懶人包可獨立執行**：會自動檢查並安裝所需工具，不需要先看過其他懶人包。你只要確認下方「先備條件」即可開始。

這個懶人包會幫你做什麼？

讓你的 Claude Code 桌面版能夠直接操控 Supabase 雲端資料庫，包括：

用自然語言建立資料表（不需要學 SQL）
新增、查詢、修改、刪除資料
讓你做的網頁工具能「記住」資料（關掉瀏覽器再開，資料還在）
支援多人同時使用同一份資料

先備條件

在使用這個懶人包之前，請確認：

Claude Code 桌面版已安裝且能正常使用（Pro 方案以上）
已有 GitHub 帳號（Supabase 可用 GitHub 登入）
電腦有網路連線

請 Claude Code 幫我執行以下步驟

⚠️ 以下內容是給 Claude Code 讀的操作指令。你只需要把這整份 MD 檔丟給 Claude Code 桌面版的 Code 分頁，它會自動開始執行。遇到需要你手動操作的地方，它會暫停並告訴你該怎麼做。

**所有安裝與設定都在 Claude Code 桌面版內完成，不需要另外打開 PowerShell 或命令提示字元。** 如果 Claude Code 桌面版無法執行某個指令，才會引導你到終端機操作。進階使用者也可以直接使用 Claude Code CLI 版本來執行本懶人包。

階段一：建立 Supabase 帳號與專案

步驟零：環境檢查

請 Claude 在開始前，先自動確認以下所有項目。如果有任何一項不符合，請先告知使用者問題所在，並引導解決後再繼續。 **不要跳過任何一項檢查，不要假設環境正常。**

確認作業系統：執行系統指令確認是 Windows / macOS / Linux，後續所有指令請根據實際的作業系統選擇正確版本執行
確認網路連線正常
檢查 Node.js 是否已安裝：執行 node --version，如果未安裝：
- Windows：winget install --id OpenJS.NodeJS --accept-source-agreements --accept-package-agreements
- macOS：brew install node
- Linux：sudo apt update && sudo apt install nodejs npm -y
檢查 npx 是否可用：執行 npx --version
檢查 GitHub CLI 是否已登入：執行 gh auth status（Supabase 用 GitHub 帳號登入）

全部通過後，告知使用者環境狀態並繼續下一步。

步驟一：註冊 Supabase 帳號

🖐️ **需要手動操作**：

請使用者開啟瀏覽器，到 https://supabase.com
點擊「Start your project」
選擇「Continue with GitHub」用 GitHub 帳號登入
授權 Supabase 存取 GitHub 帳號

等使用者確認已登入後，繼續下一步。

步驟二：建立 Supabase 專案

🖐️ **需要手動操作**：

在 Supabase Dashboard 中，點擊「New Project」
設定以下資訊：
Project name：建議用 my-teaching-tools（或使用者自訂）
Database Password：設定一個密碼（請記住，之後會用到）
Region：選擇離你最近的地區（東亞建議選 Northeast Asia (Tokyo)）

點擊「Create new project」
等待 1-2 分鐘，專案建立完成

步驟三：取得專案憑證

🖐️ **需要手動操作**：

在 Supabase Dashboard 中，點擊左側「Project Settings」（齒輪圖示）
點擊「API」
複製以下兩個值：
Project URL（格式像 https://xxxxxxxx.supabase.co）
service_role key（在「Project API keys」區塊，點擊 service_role 旁的「Reveal」並複製）

⚠️ **安全提醒**：service_role key 有完整的資料庫權限，不要分享給他人或放在公開的程式碼中。

請使用者將這兩個值提供給 Claude（貼在對話中即可）。

階段二：連接 MCP

步驟四：安裝 Supabase MCP Server

使用使用者提供的 Project URL 和 service_role key，執行以下指令：

claude mcp add supabase --scope user -- npx -y @supabase/mcp-server-supabase@latest --supabase-url [使用者的Project URL] --supabase-service-role-key [使用者的service_role_key]

將 `[使用者的Project URL]` 和 `[使用者的service_role_key]` 替換為使用者提供的實際值。注意：URL 和 key 都不需要加引號。

步驟五：重啟 Claude Code 並驗證

🖐️ **需要手動操作**：請使用者完全關閉 Claude Code 桌面版，然後重新開啟。

重新開啟後，測試 Supabase 連接是否成功：

嘗試查詢資料庫中有哪些資料表（新專案應該是空的，這是正常的）
如果能成功查詢（即使結果是空的），代表連接成功

如果連接失敗，請檢查：

Project URL 和 service_r