我正在進行一個個人項目,旨在幫助用戶找到芝加哥音樂會。從架構角度來看,該專案的一個值得注意的方面是整個 Web 應用程式完全免費託管。
下圖說明了架構組件:
免責聲明:我沒有受到我在這裡提到的任何服務的贊助;我強調它們只是因為我發現它們很有用。
GitHub 是最受歡迎的免費託管程式碼庫的平台。我還嘗試過 Bitbucket 和 GitLab 等替代方案,它們也同樣有效。老實說,這些選項中的任何一個都可以完成任務 - 只需選擇一個並繼續前進,無需過多考慮。
在專業環境中,您通常會直接與 AWS 或其他雲端服務供應商合作,讓您能夠完全控制部署、通知和監控。然而,這種方法需要更多的時間和精力。幸運的是,Netlify 和 Vercel 等服務消除了許多麻煩,簡化了這個過程。它們允許快速部署,但依賴其生態系統。一旦您的網站開始接收大量流量(數千次造訪),最好檢查免費套餐限制以避免意外費用。對於個人項目,我已經多次使用這些服務,到目前為止沒有任何問題。
也就是說,Netlify 提供了多種開箱即用的功能。在架構圖中,Netlify 自動提供了三個元件:
Netlify 的 GUI 讓您可以整合程式碼庫儲存庫 - 在我的例子中是 GitHub。 Netlify 了解 Next.js 應用程式的預設設定並使用它們無縫部署程式碼。
chicagomusiccompass.com 是一個靜態 Web 應用程序,這意味著不涉及伺服器。觸發部署時,應用程式會產生儲存在 S3 儲存桶中的靜態資產(HTML、JS 和 CSS)。然後,Netlify 使用 CloudFront 處理配置,為您提供現成的 URL。
靜態站點通常需要從其他網域取得資料。這通常需要一個代理,稱為「前端的後端」(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-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中文網其他相關文章!