前端架構：如何免費託管您的 Web 應用程式

我正在進行一個個人項目，旨在幫助用戶找到芝加哥音樂會。從架構角度來看，該專案的一個值得注意的方面是整個 Web 應用程式完全免費託管。

下圖說明了架構組件：

免責聲明：我沒有受到我在這裡提到的任何服務的贊助；我強調它們只是因為我發現它們很有用。

專案程式碼庫

GitHub 是最受歡迎的免費託管程式碼庫的平台。我還嘗試過 Bitbucket 和 GitLab 等替代方案，它們也同樣有效。老實說，這些選項中的任何一個都可以完成任務 - 只需選擇一個並繼續前進，無需過多考慮。

前端工作流程編排

在專業環境中，您通常會直接與 AWS 或其他雲端服務供應商合作，讓您能夠完全控制部署、通知和監控。然而，這種方法需要更多的時間和精力。幸運的是，Netlify 和 Vercel 等服務消除了許多麻煩，簡化了這個過程。它們允許快速部署，但依賴其生態系統。一旦您的網站開始接收大量流量（數千次造訪），最好檢查免費套餐限制以避免意外費用。對於個人項目，我已經多次使用這些服務，到目前為止沒有任何問題。

也就是說，Netlify 提供了多種開箱即用的功能。在架構圖中，Netlify 自動提供了三個元件：

• GUI 整合:

Netlify 的 GUI 讓您可以整合程式碼庫儲存庫 - 在我的例子中是 GitHub。 Netlify 了解 Next.js 應用程式的預設設定並使用它們無縫部署程式碼。

• 靜態網站代管：

chicagomusiccompass.com 是一個靜態 Web 應用程序，這意味著不涉及伺服器。觸發部署時，應用程式會產生儲存在 S3 儲存桶中的靜態資產（HTML、JS 和 CSS）。然後，Netlify 使用 CloudFront 處理配置，為您提供現成的 URL。

• Lambda 函數:

靜態站點通常需要從其他網域取得資料。這通常需要一個代理，稱為「前端的後端」(BFF)。預設情況下，客戶端應用程式無法存取其他網域，除非伺服器透過 CORS 明確允許，但這並不總是常見的做法。對於這個項目，我使用代理從不同的網域中提取 JSON 檔案。

Netlify 管理所有部署編排並提供一個 URL（子網域），您可以將其連結到您的網域以獲得使用者友好的 URL。

例如，這是我的專案的 Netlify URL：

https://clinquant-chebakia-f64a5b.netlify.app/

然後，我使用 CNAME 記錄來設定我的網域，將 www 指向 Netlify URL：

當使用者造訪 https://www.chicagomusiccompass.com/ 時，DNS 會將網域解析為其最終目的地 - Netlify URL ?.

雖然這裡發生了很多事情，但其中大部分都是透過儀表板（GUI）進行配置的。關鍵是要理解一切是如何連結在一起的；剩下的只是瀏覽使用者介面。

自動排程任務（Cron 作業）

cron-job.org 是一項允許您免費執行 cron 作業的服務。以下是它在此設定中的工作原理：

a) Netlify 部署掛鉤:
Netlify 提供了一個可設定的 Webhook（URL 端點），觸發後會重新部署網站。這確保了 chiagomusiccompass.com 可以在需要時自動更新。

b) cron-job.org 整合:
透過 cron-job.org，您可以安排一個 cron 作業——在本例中，設定為每天運行。這份作業只是觸發 Netlify 部署掛鉤，提示 Netlify 每天重新部署（更新）網站。

注意：雖然chicagomusiccompass.com 也有後端元件，但本文只關注前端架構。

概括

chicagomusiccompass.com 是 Next.js 應用程序，建置後會產生一個靜態網站（無伺服器）以及幾個 Lambda 函數。 GitHub 儲存庫與 Netlify 集成，因此每次推送到儲存庫都會觸發新的部署。此過程會產生新版本的靜態網站並更新 Lambda 函數。 Netlify 處理這些文件的部署並自動配置必要的網路基礎設施，允許透過子網域存取 Web 應用程式。此外，我還配置了自訂網域chicagomusiccompass.com，以指向Netlify。該網站透過觸發 Netlify 部署掛鉤的每日 cron 作業來保持最新狀態。

該網站已經運行了幾個月，目前沒有太多流量，但就基礎設施成本而言，我沒有支付一分錢。

在專業環境中，根據專案要求，我可能會選擇類似的解決方案，尤其是在早期階段。後來，隨著業務的成長和需求的發展，我可以遷移某些元件。

前端架構如今變得非常令人興奮，尤其是當您可以利用免費服務時。但是，請記住如果服務是免費的，那麼您可能就是產品。

以上是前端架構：如何免費託管您的 Web 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！