個人開發的 Web 應用程式要部署到哪裡？

如果只是展示作品集，把網頁和圖片放到能用瀏覽器開啟的地方就能上線。有聯絡表單的網站，還需要有地方處理送出的資料。若使用者登入後能查看自己的紀錄，也要決定資料存在哪裡，以及每個人能看哪些資料。

開始前先認識這些名詞

• 部署（Deploy）是讓做好的網站或應用程式能透過網址使用。更新作品集並重新上線，也算部署。
• 靜態網站託管會提供事先準備好的檔案，例如作品集的網頁和圖片。
• PaaS（平台即服務）提供執行程式的環境。以預約系統為例，可以用它來執行查詢空位、接受預約的程式。
• VPS（虛擬私人伺服器）是租用一台虛擬伺服器。應用程式需要的軟體、伺服器的設定與更新，都由你處理。
• API是程式之間交換資料的介面。聯絡表單可以透過 API，把填寫的內容交給負責受理的程式。
• 資料庫（DB）用來保存資料，方便日後查找和更新，例如記錄預約人和預約時間。

依照應用程式的功能選擇部署方式

先寫下上線後程式會在哪裡執行、資料會存在哪裡，就能縮小選擇範圍。

作品集可以先考慮靜態網站託管

靜態網站託管會把準備好的檔案交給瀏覽器。手寫的 HTML 可以直接上線。使用網站產生工具時，則先透過建置（build）產生要公開的檔案。加入新作品後，重新建置並發布即可。瀏覽器仍可執行 JavaScript，例如篩選作品或切換畫面。GitHub Pages 就能發布放在 GitHub 上的 HTML、CSS 和 JavaScript 等檔案。GitHub Pages 官方說明

聯絡表單先決定資料要送去哪裡

表單可以顯示在靜態頁面上。送出的資料可以交給外部表單服務、託管平台提供的功能，或自行開發的 API，由它受理並發送通知。例如，Netlify Forms 可以接收依照指定方式設定的 HTML 表單。Netlify 官方表單設定

如果收到通知就夠了，可以先用現成的表單功能。需要發出受理編號，或依負責人顯示過往訊息時，再考慮 API 和管理頁面。如果自行實作郵件通知，請把寄信服務的 API 金鑰放在伺服器端。若把金鑰放進傳給瀏覽器的檔案，訪客就能看到它。

要保存預約，就先決定處理和儲存的位置

預約系統要確認時段是否有空，以及使用者是否有權修改某筆預約。即使前端採用靜態網站託管，仍需要處理預約的程式，以及保存紀錄的資料庫。

如果已有能受理預約、限制每位使用者可查看資料的服務，就能只把前端放在靜態網站託管平台。自行開發的 Node.js 或 Python 伺服器可以在 PaaS 上執行。平台負責基本的伺服器管理，你則負責更新應用程式用到的函式庫，並設定使用者的操作權限。Render Web Services 是其中一個例子。Render 官方 Web Services 指南

程式碼放在 GitHub 的預約系統，可以考慮 KamuiDash

如果你把用 Node.js 或 Python 開發的預約系統放在 GitHub，並且第一次部署需要資料庫的應用程式，可以考慮 KamuiDash。你可以從 GitHub 部署，並在同一平台建立用來保存預約的 PostgreSQL。省下從頭設定伺服器的步驟後，可以直接用上線的畫面建立測試預約，確認更新應用程式後仍能查到紀錄。KamuiDash 應用程式設定 · KamuiDash 資料庫設定

如果資料庫已經架在其他服務上，先確認能否沿用現有的連線。

需要自行管理伺服器設定時，可以考慮 VPS

使用 VPS 時，你會租用並設定一台虛擬伺服器，例如 DigitalOcean Droplet。作業系統更新、允許哪些外部連線、設定 HTTPS 加密瀏覽器通訊，以及程式停止時的復原，都由你管理。如果需要自訂伺服器設定，也能承擔後續維護，VPS 就值得考慮。DigitalOcean 官方 Droplet 設定指南

用公開網址測試自己的應用程式

選好部署方式後，用公開網址做一個實際使用者會做的操作。作品集可以用另一台裝置開啟頁面和圖片。聯絡表單可以送一筆測試訊息，確認收到通知。有資料庫的應用程式，可以新增一筆紀錄，再重新部署，確認仍能讀取。若預約系統需要登入，也用另一個帳號確認無法讀取或修改別人的預約。

比較費用時，把程式執行、資料庫、檔案儲存和網路流量都算進去。只是展示時，可以先看第一次開啟需要等多久。打算長期使用時，也要確認資料保存期限和備份方式。

延伸閱讀

• 用 AI 做好的網站與應用程式可以部署到哪裡？
• 個人開發的 Web 應用程式每月要花多少錢？
• 部署 FastAPI 與 PostgreSQL

KamuiDash 是能從 GitHub 部署 Web 應用程式並連接 PostgreSQL 的 PaaS。 KamuiDash