作為熱愛尖端技術的團隊,我們選擇使用現代技術堆棧構建我的第一個 SaaS。隨著JAMStack和無服務器架構的興起,我為前端和部署到 AWS 的 Node.js 後端創建了帶有 Next JS 靜態生成的PostMage 。
在本文中,我將分享我用於構建 SaaS 產品的所有技術:從編程語言到開發工具。您將了解我如何克服這一挑戰,以獨立開發人員或小團隊的身份構建 SaaS。
希望我們的故事能給你靈感來創建你的 SaaS 產品。
TypeScript 無處不在
為了構建我的 SaaS,我用TypeScript編寫了每一行代碼。是的,所有代碼:前端、後端以及 TypeScript 中的基礎設施即代碼。
整個項目只使用一種獨特的編程語言。沒有時間學習新語言並通過使代碼易於維護來節省時間。
我為什麼選擇TypeScript?它使強類型的開發更加愉快,並且與 IDE 的集成更好。所以,如果你還是一名 JavaScript 開發者,你應該試一試。
前端框架
對於前端,我使用Next.js。它是一個用於構建複雜應用程序的React 框架。好消息,Next JS 支持開箱即用的 TypeScript。
我使用Tailwind CSS為 React 組件設置樣式。作為開發人員,您通常會構建醜陋的界面。使用 Tailwind CSS,即使您不是設計師,現在也可以構建一個不那麼醜陋的界面。
作為 JAMStack 的忠實信徒,我之前曾花一些時間在不同的項目中嘗試使用 Jekyll、Hexo 和 11ty。我選擇使用 Next JS 在靜態生成模式下構建我的 SaaS 。因此,在構建時,所有頁面都會生成並預呈現。非常適合 SEO、廉價託管、快速、安全和高度可擴展。
獲取有關使用 Next JS 和 Tailwind CSS 進行全棧 React 開發的有用內容。沒有垃圾郵件,隨時退訂。
靜態託管
我們使用Cloudflare Pages作為前端的託管服務,它是 Netlify 或 Vercel 的全新替代品。Cloudflare 已於 2020 年 12 月發布測試版,並於 2021 年 4 月向公眾發布。
Pages 中缺少一些小的功能(沒什麼大的)。在 Cloudflare 團隊解決它之前,我找到了臨時解決方法。所以,這沒什麼大不了的。
Cloudflare Page的好處在於其慷慨的免費套餐:無限帶寬(Vercel 和 Netlify 每月限制為 100GB)並且您可以免費設置一個受密碼保護的網站(Vercel 或 Netlify 不免費提供)。
無服務器 REST API
在後端,我們使用Express.js和Serverless Framework構建了一個 REST API 。為了在Serverless Framework中支持 TypeScript ,我使用了serverless-bundle插件。Express.js 需要另一個名為serverless-http的插件來與 Serverless Framework 一起工作。
為了更好的開發者體驗,還使用了另外兩個插件:serverless-dotenv-plugin和serverless-offline。第一個插件是支持 dotenv 文件,第二個是在本地計算機上運行 Serverless Framework。
作為一名單獨的開發人員,選擇無服務器架構是為了通過易於部署、低維護和可擴展的後端讓我的生活更輕鬆。無需成為 DevOps 工程師:無需 SSH、進行操作系統更新、配置代理/網絡服務器/負載平衡器/防火牆等。
驗證
REST API 受IAM 身份驗證保護。它是 AWS 內置功能,用於保護任何 AWS 資源,在我們的例子中是 API 網關和 AWS lambda。當用戶未連接到 SaaS 應用程序時,它會拒絕 API 調用。因此,當它受到保護時,外部參與者將無法調用您的資源。
因為API部署到AWS,所以選擇使用AWS Cognito進行認證。好處是,Cognito 提供了為 SaaS 實施身份驗證所需的一切,從而節省了大量時間。您無需任何努力即可訪問電子郵件身份驗證和社交登錄(Facebook、Google、Apple 和 Amazon)。
AWS Cognito 和 React 前端之間的連接是通過AWS Amplify完成的。Amplify 提供 React 組件和代碼,使您的前端與 AWS 的集成更加輕鬆快捷。
數據庫
像 PostgreSQL 和 MySQL 這樣的主要和知名數據庫不太適合無服務器架構。由於無服務器的性質,它可以創建大量的數據庫連接並耗盡數據庫連接限制。
在大多數提供商上,即使您的 SaaS 上沒有任何流量,您仍然需要為您的數據庫實例付費。相反,當您的應用程序開始增長時,您的數據庫很快就會成為瓶頸。
作為一名獨立的全棧開發人員,我想要一些非常易於管理並且與無服務器 100% 兼容的東西。所以,我選擇DynamoDB作為主數據庫。
DynamoDB是一個完全由 AWS 管理的 NoSQL 數據庫,我用它來存儲用戶狀態。他們幾乎處理所有事情,我只需要專注於我的代碼。
基礎設施即代碼
如您所見,我為我的 SaaS 應用程序使用了多項 AWS 服務。在每個環境(開發、暫存或生產)中手動設置雲資源非常痛苦,並且很難保持它們之間的一致性。
AWS 允許開發人員訪問AWS CDK ,您可以在其中使用**TypeScript**定義您的雲資源。在一個命令中,您可以部署到您的 AWS 賬戶並獲得所有配置。
部署
像許多開發人員一樣,我使用Git 和 GitHub來控制代碼的版本。許多現代託管服務,如 Vercel 和 Netlify,Cloudflare 頁面會在每次提交時自動構建和部署您的代碼。如果您使用 Git 分支,您還可以實時預覽結果而無需推送到生產環境。
對於後端和基礎架構,我使用名為Seed.run的第三方服務在每次提交時自動部署。與前端一樣,它也在 AWS 上構建和部署後端資源。
DNS 和 CDN
正如您所懷疑的那樣,我毫無意外地將 Cloudflare 用於 DNS 和 CDN 😉 Cloudflare Pages 會自動將您的代碼部署到 Cloudflare 網絡中,我只需將我的域指向 Cloudflare DNS 服務器,剩下的由他們處理。使用 Cloudflare,您可以獲得大量安全功能,例如防火牆和 SaaS 產品的 DDoS 保護。
錯誤跟踪
我使用Sentry作為錯誤跟踪解決方案。當出現問題時,它會自動報告有用的信息,如堆棧跟踪、麵包屑(問題之前發生的事件的踪跡)、瀏覽器信息、操作系統信息等。它使生產中的調試更容易使用豐富的數據:
Sentry僅針對前端而非 REST API 設置,我一直使用本機解決方案。事實上,使用 AWS lambda 的Sentry會產生大量開銷,而且設置並不簡單。在下一節中,您將找到我用於後端錯誤跟踪的解決方案。
日誌記錄、監控和警報
AWS Lambda 自動將日誌發送到AWS CloudWatch,因此無需使用 Sentry。以下是存儲在CloudWatch中的日誌示例:
您還可以訪問您的 lambda 指標。非常適合了解您的無服務器函數的行為方式並檢測是否存在任何錯誤。
我還使用Lumigo來獲取用於我的日誌記錄和監控的附加信息。與 Cloudwatch 相比,界面更易於使用:
您還可以在Lumigo中啟用跟踪,您可以在其中可視化您的 AWS 服務和外部 API 調用。它讓您知道代碼中是否存在錯誤或來自外部服務,從而使您的調試會話更加輕鬆。
付費訂閱
SaaS 的最後一部分,也是企業最重要的事情是接受付款。接受一次性付款很困難,但定期付款的任務要復雜得多。不幸的是,對於 SaaS 業務,我們需要處理第二種情況。
您的客戶在首次訂閱時需要選擇計劃並輸入他們的個人信息。
之後,您的用戶應該有一個自助服務門戶,他們可以在其中管理他們的計劃:升級、降級、取消、暫停、恢復他們的訂閱計劃。
他們有時還需要更新他們的個人信息。而且,他們還需要在需要時訪問他們的發票歷史記錄。
Stripe可以管理我在本節中提到的所有內容,它隱藏了所有這些複雜性並使與支付的集成更加容易。
結論
我花了 5 個月的時間來構建這個全棧 React SaaS 模板。我沒有專注於我的業務,而是在解決這些技術細節。構建 SaaS 的第一個版本只需要 1 個月而不是 5 個月。
通過這段漫長的旅程,我學到了很多東西,也犯了很多錯誤。我希望其他開發者不要犯同樣的錯誤,所以我為 SaaS 產品構建了 Nextless JS,React Boilerplate。
使用 Nextless.js,您無需編寫任何代碼行即可獲得我在本文中提到的所有內容。節省您的時間,專注於重要的事情並更快地啟動您的 SaaS。