首頁 > web前端 > js教程 > 主體

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

PHPz
發布: 2024-09-10 11:02:42
原創
425 人瀏覽過

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

下圖說明了架構組件:

Front-End Architecture: How to Host Your Web App for Free

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

專案程式碼庫

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:

Front-End Architecture: How to Host Your Web App for Free

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

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

自動排程任務(Cron 作業)

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

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

Front-End Architecture: How to Host Your Web App for Free

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

Front-End Architecture: How to Host Your Web App for Free
注意:雖然chicagomusiccompass.com 也有後端元件,但本文只關注前端架構。

概括

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

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

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

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

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板