从0到1开始​​创建全栈Web应用平台并免费运行它!

文摘   2024-11-23 20:15   广东  


在AI的辅助下,现在从0到1创建一个项目难度减低了不少,但是如何从一个成熟的项目或产品的角度进行思考、布局是大多数人所欠缺的,如何规范化从头开始创建全栈 Web 应用平台并(几乎)免费运营更是个人开发者和小团队必须要经历的,下面分析 lsaac Adams 的一些观点和实战经历希望对你有帮助。



lsaac Adams 是一个曾在全球十强公司、不到10人的初创公司以及许多规模介于这两个极端之间的公司工作过,极具经验的技术人才。


在最大的公司工作时,他表示,系统是如此庞大和复杂,以至于大多数系统架构(通常必然)都隐藏在自己的视野之外,这减少了认知负担,但你无法全面了解一切是如何运作的。


在初创企业中,他表示,为了速度或由于知识差距,常常会走捷径,而且初创企业架构经常缺乏应有的重要组件。在现代系统设计访谈中,我们看到比我们可能设计的系统更大的怪异综合视图,其中包括大规模、专用组件,但忽略了可观察性、CI/CD 和开发人员工具等重要问题。


下面是 lsaac Adams 关于 “从0到1,创建全栈 Web 应用程序平台并(几乎)免费运行它” 的一些观点见解,以及通过自己的项目经历进行分析,可以帮助你从 “只了解部分系统架构的工程师获得更加全面的了解”。


从0到1构建应用需要注意的点


01 上班时


软件工程师在其职业生涯中编写了大量代码,其中大部分是为具有运营预算和工程师团队的组织编写的。云基础设施、开发人员工具和 SaaS 产品成本在整个组织内进行管理和共享,因此工程师很少需要独立选择或管理这些东西。大多数公司都有一些内部架构审查流程,并聘请云运营、DevOps、InfoSec、数据库管理员和站点可靠性工程师 (SRE) 等专家,以确保应用程序安全、可靠,并遵循公认的最佳实践。


公司通过消除昂贵或利用率低下的第三方服务、优化应用程序或归档历史数据来定期审核和削减运营成本。在许多公司中,成本节约是一个反应过程。


02 DIY


有时,我们想在工作之外开发一些东西,以获得新技术的经验,创造一份“副业”,或者在换工作期间保持最新状态或提升技能以适应下一份工作。无论我们为何开发个人软件,任何工具或托管的预算通常都来自我们的个人财务。我们希望遵循最佳实践,但我们无法获得工作中依赖的专家和共享基础设施。


当你为自己打造网站时,你可以利用预算不足作为动力,寻找降低单位成本的创新方法,即使是大公司也应该非常关注这一点。单位成本是你的贡献利润的一部分——如果该利润为正,那么随着用户和交易量的增加,你赚的钱就更多。如果利润为负,那么交易的业务越多,你烧钱的速度就越快。


03 每个 Web 应用程序都应该具备的功能


堆栈、开发人员工具和部署方法将根据您要构建的软件类型而有所不同。我开发的大部分软件都是基于浏览器的,因此我使用这种范例来确定“必备”架构组件。大多数软件都具有许多这些要求,因此此列表为大多数软件项目提供了良好的基准。


04 核心语言和框架


您可以使用数十种编程语言构建 Web 应用程序,每种语言都有多个可用框架。根据您要构建的内容,某些选项比其他选项更好,但您必须做出选择才能开始。大多数现代 Web 应用程序都会有一个“后端”语言/框架和一个“前端”语言/框架。


05 源代码控制


即使只有一名开发人员,代码也需要记录系统和跟踪更改的方法。随着贡献者数量的增加,这种需求变得更加迫切。


06 开发人员工具


虽然可以使用简单的文本编辑器来构建应用程序,但集成开发环境 (IDE) 可以使这个过程更容易。IDE 的插件和附加组件可以进一步增强和加快这个过程。如今,生成式人工智能可以成为一种力量倍增器,帮助个人创造出与几年前的小型工程师团队一样多的产出。


07 域名服务 (DNS)


任何部署在互联网上的应用程序都需要 DNS 来允许用户通过名称找到它(除非您通过静态 IP 地址公开它,但这种情况并不常见。)


08 运行时/计算


软件需要运行时环境,并且通常依赖于核心应用程序之外的其他软件。基于容器的部署和容器编排系统是管理异构运行时环境的最常见方式,但您必须选择要使用哪种方式。


09 身份验证和授权(Authn/Authz)


大多数基于 Web 的软件都具有向所有用户公开的公共功能和仅由授权用户访问的特权功能。Authn/Authz 可以由第三方提供,也可以由您使用的框架提供(或两者兼而有之)。


10 持久存储


大多数应用程序的数据寿命都比单个请求或用户会话长。因此,这些数据是持久的,需要一个存放位置。大多数应用程序都利用数据库和某种形式的文件或对象存储。


11 备份


我们大多数人都知道,存储在一个位置的数据可能会永远消失。即使在小规模的应用程序中,备份也很重要。


12 持续集成/持续部署(CI/CD)


软件需要经过测试并“交付”到生产环境。CI/CD 系统可以实现这一点,甚至可以使部署过程自动化。即使您是唯一的开发人员,也值得投资让这个过程变得简单而强大。


13 测试和测试覆盖率分析


无论您是否遵循测试驱动的开发方法,您的代码都应该经过充分测试,以确保它能按照您的意图运行,并在您进行更改时继续正常工作。可接受的覆盖率百分比是一个有争议的话题,但大多数人都同意测试覆盖率越接近 100% 越好。


14 监控和可观察性


任何与世界共享的内容都应受到监控。许多付费 SaaS 产品都提供这种功能,但也有方法可以免费获得类似的功能。


15 应用程序安全分析


如果您将应用程序暴露在互联网上,那么您就将其暴露给了黑客。即使您的应用程序不处理敏感数据,您仍应保护它免受攻击。


16 可接受的性能特征


2020 年,谷歌发布了一组称为“ Web Vitals ”的指标,这些指标定义了 Web 应用程序的核心指标和可接受的性能。基于 Chrome 的浏览器有一个“Lighthouse”工具,可让您测量应用程序的这四个指标。与测试覆盖率一样,每个指标的目标都是 100。


17 T恤尺码(T-Shirt Sizing)


在系统设计面试中,对数据大小和交易量进行“粗略”计算已变得司空见惯,尽管最近我看到这种计算被推到了面试的最后,因为它不是大多数设计中最重要的部分。不过,您应该了解系统可能看到的初始和最终数据量,以避免犯下明显的架构错误。


例如,如果您正在设计一个系统来从大型分布式系统中提取日志,您应该意识到这种模式即使在相对较小的系统中也会产生大量数据。这种用例可能被视为“大型”或“超大型”,因为您会很快遇到大数据量和高交易量。


如果您正在设计一个简单的基于 Web 的应用程序,该应用程序仅与人类交互,而不与系统交互,那么交易量将限制在人类可以产生的范围内。地球上有很多人,但这永远不会达到上述日志提取系统的规模。这个规模最初可能为“小”,随着时间的推移可能会增长到“中”。


最后,重要的是要明白,当前的需求与预计的未来需求不同。从“小规模”开始是可以的,因为您可能是 0-1 阶段的唯一用户。


18 超出范围的事情


对于我的架构的第一次迭代(甚至可能以后),我将排除以下顾虑:


  • 处理大量流量

  • 处理大量交易

  • 高可用性

  • 为全球观众表演

  • 移动设备

  • 国际化 (i18n) 和本地化 (l10n)


对于大多数个人项目来说,由于用户数量不多,所以不需要在项目初期就考虑那些通常只有大规模、高用户量项目才会面临的问题。这样可以简化项目的开发过程,避免过早优化和不必要的复杂性。


lsaac Adams如何构建应用程序


我的系统架构主要是通过针对上述每个“必须具备”的问题在我的非常简单、低容量应用程序的背景下进行产品选择而确定的。以下是我的选择以及做出这些选择的一些理由。


下文,我们介绍以最佳实践方式以最低成本构建和托管简单 Web 应用程序所需的基本架构。需要注意的是,此架构尚未可扩展,并且存在许多单点故障,但它提供了面向公众的 Web 应用程序应具备的所有核心功能。


01 核心语言和框架


后端


Python是一种出色的通用语言。它具有清晰、简洁的语法,以及编码面试所需的所有核心数据结构,并且广泛应用于 ML/AI。Django是一个基于 Python 构建的出色、成熟、“功能齐全”的框架,可大大加快开发过程。Java、C++ 和 Rust 等语言在运行时速度要快得多,但对于 0-1 项目来说,除非您期望交易量很大、需要超低延迟或需要构建实时系统,否则不需要它们。


Python是一种很棒的通用语言。它具有清晰、简洁的语法,以及编码面试所需的所有核心数据结构,并且广泛应用于 ML/AI。Django是一个基于Python构建的优秀、成熟、“自带电池”的框架,极大地加速了开发过程。Java、C++ 和 Rust 等语言在运行时速度要快得多,但对于 0-1 项目来说并不需要,除非您预计交易量很大、想要超低延迟或需要构建实时系统。


前端


我的项目开始时没有使用前端框架,而是使用 JavaScript 来实现动态元素和第三方分析集成。为了使用最少的自定义 CSS 提供更好、更简洁的外观和感觉,我使用了Bootstrap CSS。在开发了应用程序的服务器端渲染版本后,我发现可以在客户端处理分页和过滤,并选择 React 作为该客户端功能的框架。我最初用 JavaScript 编写了 React 组件,但后来将其移植到了TypeScript。


02 源代码控制


GitHub是我的默认选择,因为它基于熟悉的git版本控制系统,个人使用免费,并且包含一些不错的功能,例如用于 CI/CD 的GitHub Actions和用于发布容器镜像的容器注册表。当您从事项目时,您的个人资料上还会获得“活动”积分,一些招聘经理和招聘人员会查看这些积分。


03 开发人员工具


过去十五年来,我一直在使用JetBrains产品,自发布以来,我一直在使用GitHub Copilot进行 AI 辅助代码生成。PyCharm是 JetBrains 套件中以 Python 为中心的 IDE,它为使用 Django 等基于 Python 的框架进行开发提供了强大的支持。GitHub Copilot 是一款出色的工具,可帮助您快速生成上下文感知配置和代码,并且非常适合快速掌握新语言和框架。我每年支付 JetBrains All Products Pack 的费用,每月支付 Copilot 的费用,我认为对于任何级别的软件工程师来说,它们都是物有所值的。


使用 GitHub Copilot 进行 PyCharm 调试会话


04 域名服务 (DNS)


多年来,我使用过许多不同的注册商和 DNS 提供商,但最近我只使用Cloudflare。Cloudflare提供注册商服务(收费)、SSL 终止、DNS和其他增值服务,如Web 分析、Web 应用程序防火墙(WAF)、内容交付网络 (CDN)和其他方便的云服务。我使用他们的Argo Tunnel功能来提供服务器发起的 TLS,而无需在防火墙中打开端口。如果我可以免费使用其他优质服务,我不介意向 Cloudflare 支付域名注册费用。


05 运行时/计算


我已经使用Kubernetes七年了,我很享受它提供的一致部署、监控和自动扩展功能。Google Cloud Platform (GCP)、Amazon Web Services (AWS) 和Microsoft Azure都提供托管 Kubernetes,但没有一个是免费的。我最初在 Google Cloud Platform 的Cloud Run上启动了我的应用程序,但由于避免月费而需要缩放到零的设置而导致的冷启动性能问题让我很烦恼。后来我将我的应用程序移到了我在家里运行的服务器上,并通过快速、可靠的光纤千兆以太网连接进行连接。这个运行时环境在技术上并不是“免费的”,但我已经在为它付费了。


我尝试了几个不同的 Kubernetes 发行版,最后选择了轻量级、成熟且功能齐全的k3s 。我使用Portainer来管理本地 k3s 集群,比起标准的 Kubernetes 仪表板,我更喜欢它。需要注意的是,通过在 AWS 或 GCP 的免费计算产品上运行 k3s 配置,你也可以获得类似的好处,尽管“免费”价格可能会过期,并在某个时候开始让你花钱。


Portainer 主屏幕


06 身份验证和授权(Authn/Authz)


使用 Django 等框架的好处之一是框架通常会提供 Authn/Authz。因为我喜欢第三方社交身份验证的用户体验和安全性,所以我使用该django-allauth模块通过 Google 帐户添加社交登录。


用于更新 crank.fyi 数据的 Django 管理视图


07 持久存储


我曾广泛使用过PostgreSQL和MySQL,但我为这个项目选择了 MySQL,因为它简单、快速、具有出色的管理工具,并且如果您需要真正扩展,还有与 MySQL 兼容的选项,如PlanetScale和TiDB。我系统中的所有其他文件资产都由签入 GitHub 的内容支持,因此我不需要像 S3 这样的对象存储。对于本地开发,我使用SQLite并确保我的 SQL 语法与 MySQL 和 SQLite 兼容。如果我需要使用特定于 MySQL 的语法,那么使用容器化的 MySQL 进行本地开发就足够容易了。


08 备份


我的 git 存储库的本地克隆处理源代码控制备份(我的本地存储库目录备份到 iCloud),并且我使用基于 cron 的数据库备份,该备份也镜像到云存储。从技术上讲,这不是“免费的”,但这是我已经付费的云存储的一部分。


09 持续集成/持续部署(CI/CD)


GitHub Actions提供了我处理自动测试和部署到运行时环境所需的所有功能。当我在 GCP Cloud Run 上部署时,GitHub Actions 也能很好地与其配合使用。我使用 GitHub 的容器注册表来存储已发布软件的镜像,并且正在进行基于主干的开发,因此将拉取请求合并到主分支会自动将我的版本发布到生产环境中。Kubernetes 就绪性和活跃性检查可确保在新版本替换当前版本之前成功启动新部署。


10 测试和测试覆盖率分析


后端 Python 测试是使用pytest实现的,而前端代码测试则利用Jest测试框架。Codecov提供了一个很棒的免费工具来可视化测试覆盖率结果。我在 CI/CD 管道中有一个GitHub操作,它运行覆盖率测试并在那里发布结果。我推送 pytest 和 Jest 结果以全面了解应用程序测试结果。覆盖率非常接近 100%,我尽量保持这种状态。


Python 和 React/TypeScript 代码覆盖率为 98.59%


11 监控和可观察性


我喜欢Datadog,但 15 天免费试用期过后,它的价格就变得昂贵了。New Relic具有类似的综合监控、日志记录和 APM 功能,并提供了适合小型、低流量应用程序(如我的应用程序)的免费版本。我已经在我的 Ubuntu Linux 主机上安装了New Relic 基础设施代理,并且我已经应用了带有浏览器检测功能的New Relic python 代理来获取应用程序和基础设施的端到端 APM 跟踪。我还安装了基于 helm 的New Relic Kubernetes 集成部署,以便可视化我的小型 k3s 集群。


Crank.fyi 应用的 New Relic APM 视图


为了获取全球跟踪和访客信息,我使用了 Cloudflare 的网络分析。


使用 Core Web Vitals 进行 Cloudflare Web 分析


最后,我使用 ITRS Uptrends 进行正常运行时间监控和停机时间警报。



12 应用程序安全


对于漏洞扫描,我使用Snyk。Snyk可轻松与您的 GitHub 存储库集成,并且如果您使用的某些软件存在漏洞,它会很好地提醒您。Snyk 甚至会通过在您的存储库中创建拉取请求来尝试自动修复问题。这在大多数情况下都有效,并且是一项很棒的免费便利功能。


对于网络安全,我依靠 Cloudflare 的入口保护、SSL 终止和安全 Argo 隧道来确保请求安全地传送到我的应用程序。Cloudflare 免费套餐不提供 Web 应用程序防火墙等附加功能,因此在此 0–1 示例中我不会使用它们。


13 可接受的性能特征


我使用 Chrome Lighthouse 工具初步评估了我的应用程序,并一直进行调整,直到所有四个核心 Web 指标都达到 100%。将核心列表功能迁移到 React 组件帮助我将网站公共部分的页面加载时间缩短至 0.4-0.6 秒,修改组件中的 href 则使 SEO 得分达到 100 分。当您将所有四个指标都达到 100 分时,您会看到一场小烟花表演,这很有趣:


烟花表演为灯塔带来完美的成绩


因为我使用了 Cloudflare 网络分析,所以我获得了第三方验证版本的网络生命力指标,以确保一切在我的浏览器之外运行良好。


Cloudflare 核心 Web 指标


以下是每月建立和运营该平台所产生的费用:


Web 应用程序平台经常性费用





关注公众号,用极客视角洞察未来!

往期精彩文章推荐:

1.从0到1完成500万美元的收入经验分享

2.别再卷国内了,出海,赚美金吧!

3.一文深度了解Agent智能体以及认知架

GeekSavvy
GeekSavvy是一个新世代AI极客社区,主要覆盖AI极客、创业者和投资人。我们会用Geek视角👉见识行业趋势、洞察AI产品和预见未来科技风向标🚀!
 最新文章