Communitygithub.com

伺服器儲存至儀表板

將本地開發伺服器儲存至 Server Studio 應用程式中。當您建立、建置或設定執行本地伺服器的專案時(例如 npm run dev、vite、next、php -S、wp-env、Local WP、靜態伺服器等),或當使用者說「儲存此伺服器」、「加入儀表板」、「加入 Server Studio」、「儲存至 Server Studio」、「註冊伺服器」時,使用此技能。它會新增專案名稱、執行指令、資料夾和 URL/連接埠,讓專案出現在 Server Studio 應用程式中,實現一鍵執行。

伺服器儲存至儀表板 是什麼?

此技能為 **mehdi214designer/server-studio**,其核心功能是將任何本地開發伺服器註冊到名為 **Server Studio** 的桌面應用程式儀表板中,讓使用者可以一鍵啟動或停止這些伺服器,避免忘記重新啟動繁雜的開發環境。它支援所有常見的前端框架(Vite、Next.js、Astro、CRA)與後端環境(Node.js、PHP 內建伺服器、wp-env),並可自動偵測 `package.json` 中的腳本或伺服器啟動時顯示的連接埠。 此技能的獨特設計強調**每個專案綁定一個固定的獨佔連接埠**,絕不隨機飄移。首次註冊時會透過 `--assign` 旗標分配一個永不會與其他專案衝突的最低可用連接埠(從 3001 開始),然後將該連接埠寫入專案的開發設定檔(例如 `vite.config.js`)中的 `server.port` 與 `server.strictPort`,且執行時僅修改相關欄位,保留同一區塊中如 `proxy` 或 `https` 等其他手動設定。多次執行同一專案時,只會更新名稱、指令等欄位,絕不重新分配連接埠。 此工具支援 macOS、Windows 與 Linux,資料檔案分別儲存於各作業系統的標準應用程式資料路徑。註冊後 Server Studio 會自動重新整理儀表板,無需手動重新載入。它透過在 `register-server.js` 腳本中傳遞 `--name`、`--command`、`--url` 與 `--cwd` 等參數,確保儀表板資訊精確對應到實際開發環境,是管理多個本地專案的開發者不可或缺的輔助工具。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mehdi214designer/server-studio/tree/HEAD/skill

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

儲存伺服器至儀表板

使用者執行 Server Studio,這是一個列出所有本地伺服器並提供一鍵啟動/停止的應用程式。 此技能可將伺服器新增至該儀表板,避免遺漏任何專案。

使用時機

在您建置或設定任何會在本機連接埠上運行的東西之後,請將其註冊。範例:

  • 您建立了一個網站/應用程式,開發指令為 npm run dev,運行於 localhost:3000
  • 您啟動了靜態預覽、Vite/Next/Astro 伺服器、php -S、wp-env、Storybook 等
  • 使用者要求「儲存伺服器」、「加入儀表板」、「註冊此項目」

如果執行指令或連接埠尚未明確,請先確認(檢查 package.json 中的 scripts、框架的預設連接埠,或伺服器啟動時顯示的資訊)。請勿隨意猜測。

黃金法則:每個專案一個永久連接埠

每個專案獲得一個固定的、唯一的連接埠,且永不變更。已儲存的項目只有在連接埠保持正確時才有用,因此:

  1. 一次性分配。 對於新專案,使用 --assign 讓腳本選取一個從未使用的空閒連接埠(或直接指定 --url)。這保證沒有兩個專案共用同一連接埠。

  2. 將該連接埠固化到專案中,使開發伺服器始終使用該確切連接埠。使用框架的嚴格連接埠選項,使其在連接埠被佔用時直接報錯,而非飄移到其他連接埠。

    合併,而非取代。 如果目標位置已有設定,則僅修改連接埠和嚴格連接埠的鍵值,保留其他所有鍵值不變。server 區塊通常包含 proxy、host、https 或 hmr 等手動調整過的設定,遺失這些設定比連接埠飄移更糟。若無法精準編輯,請停止操作並告知使用者,而非改寫該區塊。

    • Vite:在 vite.config 中設定 server.port 為 <n> 且 server.strictPort 為 true,保留 server 區塊中所有其他鍵值。僅在完全沒有 server 區塊時,才新增一個僅包含這兩個鍵值的區塊。(或保留設定不變,在開發腳本中使用 vite --port <n> --strictPort)
    • Next.js:開發腳本 → next dev -p <n>
    • Astro:astro dev --port <n>
    • CRA / react-scripts:PORT=<n> react-scripts start
    • 純 Node/Express:讀取 process.env.PORT || <n> 並記錄該連接埠
    • PHP:php -S localhost:<n> 在註冊時將完全相同的連接埠填入 --command 和 --url。
  3. 永不重新分配。 對同一專案重複執行此技能時,會保留其鎖定的連接埠,僅更新其他欄位。腳本會強制執行此規則;除非使用者明確要求搬移專案連接埠,否則請勿傳遞 --force。

如何儲存

執行輔助腳本,並提供您所知道的欄位。僅 --name(或 --url/--command)為必填。

對於新專案,請加上 --assign 以取得保證不重複的連接埠,然後讀取腳本輸出的 PORT <n> 行,並將該連接埠固化到專案設定中(請參閱上述黃金法則)。

node "$HOME/.claude/skills/server-studio/register-server.js" \
  --name "專案名稱" \
  --project "用途說明" \
  --folder "WordPress" \
  --cwd "/absolute/path/to/project" \
  --command "npm run dev -- --port 3001 --strictPort" \
  --url "localhost:3001" \
  --tag "Vite" \
  --note "任何需要記住的資訊,例如登入資訊" \
  --assign

欄位說明:

  • --name — 簡短標籤,例如「作品集網站」
  • --project — 所屬的專案/任務
  • --folder — 歸檔用的資料夾名稱(若不存在則會建立,顯示於側邊欄)。--category 仍可作為舊版呼叫的別名。
  • --cwd — 專案的絕對路徑;執行指令將在此目錄下執行
  • --command — 啟動伺服器的確切指令(「執行」按鈕會執行此指令)
  • --url — 地址或單純的連接埠(輸入 3000 會自動轉為 localhost:3000)
  • --tag — 小型細節:Vite、MAMP、Next、php
  • --note — 選擇性備註(憑證、注意事項)

行為說明

  • 腳本會根據 資料夾(cwd)或 名稱 比對現有專案。若找到則更新該項目但保留其鎖定的連接埠;否則新增一個項目。可安全地重複執行,不會產生重複項目,也不會移動專案的連接埠。
  • 所有項目的連接埠皆是唯一的。--assign 會從 3001 開始選取最低的空閒連接埠。
  • 腳本會輸出 PORT <n> — 請使用該數字來設定專案的開發配置。
  • 資料會寫入 Server Studio 的資料檔案:macOS 為 ~/Library/Application Support/Server Studio/data.json,Windows 為 %APPDATA%\Server Studio\data.json,Linux 為 ~/.config/server-studio/data.json。
  • 儀表板每隔幾秒鐘會自動重新整理,因此新增或更新的項目會自行出現。

助理的預設行為

當您完成包含本地伺服器的建置工作後,請自動儲存該伺服器,並用一句話告知使用者您儲存的內容。保持輕鬆隨意的語氣,例如:「已將『X』儲存至您的 Server Studio,重新載入分頁即可執行。」僅在確定完全沒有本地伺服器時才跳過儲存。

相關技能