公開使用 Claude Code 建立的 Web 應用程式

Claude Code 做出 Web 應用程式的畫面後，接下來往往會想讓其他人也能使用。這時需要的不只是公開網址，還必須決定輸入的資料存在哪裡、誰可以操作，以及修改後要確認什麼。

本文以記錄詢問主旨、內容與處理狀態的小型應用程式為例，說明從建立、公開到更新後的確認。出發點是把保存位置與確認方式，一起寫進交給 AI 的需求。

可以下載附管理畫面的範例。這是由管理者自行輸入測試資料的示範，不包含對外公開的詢問提交表單與郵件通知。

先決定能完成什麼，不急著調整畫面

在這個題材中，第一版只要能完成以下四件事，就可以開始驗證：

1. 只有管理者可以開啟畫面與 API。
2. 可以輸入主旨與內容。
3. 可以在未處理、已處理之間切換。
4. 應用程式重新啟動後，紀錄與狀態仍然保留。

先讓這個流程通順，再調整設計。預先訂好驗收條件，比較能避免 AI 增加過多功能，或只因外觀完成就判定工作結束。

處理真實詢問之前，應依用途加入個別使用者的驗證與權限、備份、刪除方針等。本文的共用密碼方式，是用測試資料學習操作的小型架構。

根據應用程式的架構選擇公開方式

無論程式是否由 AI 產生，都應依應用程式需要的處理選擇公開平台。先請 Claude Code 說明：它只是傳送畫面，還是需要伺服器處理，或需要把資料寫入資料庫。

表中的靜態網站連結，是公開 Next.js 靜態輸出的官方範例。本文的詢問管理範例以 Python 處理伺服器邏輯與資料庫保存，因此只傳送靜態檔案無法執行；它需要伺服器與資料庫。

也可以不把 AI 工具接到公開平台，只讓 Claude Code 負責程式與本機確認，再由人透過控制台公開。自動化連線應在選好平台後準備。後半段會以東京區域伺服器與 PostgreSQL 的具體範例，介紹 KamuiDash。

把保存、驗證與執行條件寫進需求

以下需求可以作為起點，不論選擇哪個平台，都能用來具體描述資料保存與動作確認：

請建立一個小型詢問管理 Web 應用程式。

只有一位管理者。管理者可以在畫面輸入主旨與內容、
查看列表，並切換未處理／已處理狀態。
一開始只使用測試資料。

請使用 Python / FastAPI 與 PostgreSQL。
不要把資料存入應用程式的暫存檔案。
畫面與管理 API 都需要驗證，並檢查輸入長度。
機密值請從環境變數讀取，不要寫入原始碼、
瀏覽器端程式碼或日誌。

使用公開平台指定的 PORT 監聽 HTTP，並提供 /healthz。
分別列出相依套件安裝、資料庫初始化與啟動指令。

先在本機確認，再提供程式碼與確認結果。
GitHub 儲存與公開，請等目標與費用確認後再進行。

這裡交付的是具體動作與限制。只有「全部做到正式環境品質」這句話，AI 也無法決定要確認哪些項目。尤其必須區分可傳送到瀏覽器的值，與只能留在伺服器端的機密值。

在本機試用範例

附件由 main.py、init_db.py、index.html、requirements.txt 組成。管理者帳號為 admin，密碼從 DEMO_ADMIN_PASSWORD 讀取。API 的 SQL 使用參數，列表文字透過 DOM 的 textContent 顯示。

python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

export DATABASE_URL='postgresql://demo_user:local_password@127.0.0.1:5432/contact_demo'
export DEMO_ADMIN_PASSWORD='local-demo-only-change-before-publication'
python init_db.py
python main.py

執行前需要準備範例專用的空 PostgreSQL 資料庫。瀏覽器開啟 http://127.0.0.1:8000/ 後，會要求輸入驗證資訊。本機以外請使用 HTTPS 網址。Basic 驗證本身不會加密密碼，傳輸的保護依賴 HTTPS。

不必填寫姓名或電子郵件，只用「操作測試」「確認列表是否顯示」等主旨與內容，就能試用功能。

具體範例：連接 Claude Code 與 KamuiDash

以下是公開到 KamuiDash 時的設定與需求範例。選擇其他平台時，確認架構、費用、機密值，以及公開後的資料保存與驗證，這些原則也相同。

目前的 KamuiDash 連線指南說明：先在 Claude 網頁的 Customize > Plugins > Discover 加入 KamuiDash，再同步到使用同一帳號的 Claude Code。指南指定的對象為 Claude Code v2.1.273 以上版本。使用 API 金鑰登入不在這個帳號同步流程的範圍內。

新增後，開啟新的 Claude Code 工作階段，依照連線指示操作。Claude Code 官方外掛指南也將 claude.ai 帳號的外掛列為另一種來源。Claude 聊天連接器與 Claude Code 外掛的入口不同，請選擇符合所用產品的方式。

先提出唯讀需求：「請確認我的 KamuiDash 專案列表。」了解目標帳號與專案後，再決定應用程式的部署位置。從 GitHub 公開時，KamuiDash GitHub App 也需要有權存取目標儲存庫。

公開前，先具體列出架構與費用

本機確認可以運作後，可用以下方式要求公開計畫：

請提出將這個應用程式公開到 KamuiDash 的計畫。
目標專案為 <專案名稱>，原始碼為 <擁有者/儲存庫> 的
<分支名稱>。

假設使用一個 Web server 副本與 PostgreSQL，
請分開列出目前的基本費用與其他費用。
整理安裝、啟動前、啟動指令、健康檢查、
資料庫連線，以及所需環境變數的「名稱」。
不需要顯示或唸出機密值本身。

此範例的設定如下。建立資料庫並連接到應用程式後，會設定 DATABASE_URL。

KAMUIDASH · 畫面截圖

管理密碼請在控制台設定，不要貼進聊天。請分開處理 AI 整合可以執行的操作，與需要由人設定的機密值。目前整合規格可參閱 KamuiDash 的 AI 連線文件。

此外，AI 工具本身的使用費，與應用程式、資料庫的費用是分開的，不要以為公開平台的估算已包含這些支出。

部署成功後，以使用者身分確認

畫面顯示「成功」，和能否實際管理詢問，是不同的確認。請 AI 執行以下項目，並分別回報完成與未能完成的部分。

KAMUIDASH · 畫面截圖

本範例已在本機確認驗證、儲存、狀態變更與重啟後的讀取。本文並未另外建立新的 KamuiDash 應用程式，也未傳送真實詢問資料。

公開後的修改，也用小範圍的驗收條件提出

第一版能運作後，例如可以這樣縮小修改範圍：

請增加只顯示未處理詢問的篩選功能。
先確認目前的新增、列表與狀態變更能正常運作。
保留資料庫中的既有資料，並說明變更與確認方式。
修改後請確認只顯示未處理項目；改為已處理後，
會從該篩選列表消失，但仍保留在全部列表中。

出現問題時，提供網址、操作、發生時間與錯誤狀況。比起「不能用，全部重做」，小而能重現的資訊更有幫助。分享日誌時，也不需要包含驗證資訊或詢問內容。

常見問題

不理解程式碼，也能交給 AI 嗎？

可以讓 AI 建立初始架構，但自己仍應確認公開了什麼、誰能存取、資料存在哪裡。只要先分清畫面、API、資料庫的角色，就能讓確認更具體。

可以直接用來接收真實詢問嗎？

附件是管理者示範，不包含一般使用者的提交表單、防垃圾訊息、通知、個別使用者權限。若要新增提交表單，也需要設計它與管理 API 的分離，以及輸入與提交頻率的限制。

無法使用外掛時怎麼辦？

可以讓 AI 負責程式與本機確認，再由人透過控制台連接 GitHub、建立應用程式。即使改變連線方式，資料保存與公開後的確認項目仍相同。

把交給 AI 的需求，從畫面外觀擴展到「使用者能完成什麼」。公開後也用相同標準確認，就能把建立與維運串在一起。

連線規格與費用確認日：2026 年 11 月 2 日。連線入口可能調整，新增時請確認最新指南。

KamuiDash 是位於東京區域的 PaaS，可透過 GitHub 與 AI 整合公開 Web 應用程式。