海外 SaaS、工具、技术栈实用指南

<p>全球创业环境越来越活跃，越来越多的创业公司正在涌现出来。尤其在海外市场，随着各种 SaaS 、工具、技术栈的兴起，创业公司可以利用这些工具和技术来提升工作效率和业务增长。笔者最近半年一直在探索和实践各种 SaaS 、工具、技术栈，对团队生产力有很大提升，本文和大家分享过去半年使用过的工具和技术，希望能对大家有所帮助。</p> <blockquote> <p>SaaSLab 持续探索 SaaS 、工具、技术栈，欢迎有兴趣的伙伴关注 <a href="https://mp.weixin.qq.com/s/BPwB01mwV5Djav_nQVFS3g" rel="nofollow">SaaSLab 公众号</a></p> </blockquote> <h2>概览</h2> <p>总体上分为研发基建、应用开发和运营工具三个部分。</p> <p><img alt="SaaSLab 工程.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/SaaSLab_%25E5%25B7%25A5%25E7%25A8%258B.png"></p> <h2>研发基建</h2> <h3>Google Domains</h3> <p>Google 的域名注册和管理服务，提供了简单易用的管理后台，域名价格比大部分服务商更低，WHOIS 隐私保护、电子邮件转发等功能是免费的，同时能方便的添加和集成其他 Google 产品，如 Google Workspace 、Google Search Console 。</p> <p><img alt="9513754E-32A9-4CBC-B97B-BB8E87865F15.jpeg" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/9513754E-32A9-4CBC-B97B-BB8E87865F15.jpeg"></p> <p><a href="https://domains.google/" rel="nofollow">https://domains.google/</a></p> <h3>AWS Certificate Manager</h3> <p>ACM 是 AWS 的 SSL/TLS 证书管理服务，可以导入第三方证书，也可以向 ACM 申请免费公有证书，笔者申请的免费证书，支持自动续期，与 Elastic Load Balancing 、CloudFront 等 AWS 服务集成，相比于用 Let’s Encrypt 方便很多，不需要自己管理和部署证书文件。</p> <p><img alt="9A5211E7-2B7E-4FA5-9B29-68DBF1F3AFFC.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/9A5211E7-2B7E-4FA5-9B29-68DBF1F3AFFC.png"></p> <p><a href="https://aws.amazon.com/certificate-manager/" rel="nofollow">https://aws.amazon.com/certificate-manager/</a></p> <h3>Elastic Load Balancing</h3> <p>ELB 是 AWS 的负载均衡器服务，可以对每秒数百万个请求进行负载均衡，提供了 4 种类型的负载均衡器：Application Load Balancer 、Network Load Balancer 、Gateway Load Balancer 、Classic Load Balancer ，笔者使用了 Application Load Balancer ，目前主要用于路由管理，ALB 可以根据 Host 、Path 、HTTP Header 等配置自动路由流量到不同的目标组，以适应不同的应用程序和使用情况，笔者开发的项目包含以静态页面为主的官网、重交互的单页面应用、Java 应用程序和多个 Node.js 应用程序，使用 ALB 可以方便地在路由层进行应用的拆分，根据业务特点和团队能力结构灵活选择不同技术栈的组合。</p> <p>ALB 的费用由每月固定使用费和 LCU 费用组成，LCU 的计费指标包括每秒连接数、每分钟活跃连接数、数据传输量、规则评估数，AWS 的免费套餐里包含每月 750 小时的使用时间和 15 个 LCU ，项目早期够用，应用里的静态资源可以放到 CloudFront ，避免通过 ALB 传输增加不必要的成本。</p> <p><img alt="Untitled" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/Untitled.png"></p> <p><a href="https://aws.amazon.com/elasticloadbalancing/" rel="nofollow">https://aws.amazon.com/elasticloadbalancing/</a></p> <h3><strong><strong>Amazon</strong></strong> EC2</h3> <p>AWS 的云服务器，提供了由 CPU 、内存、存储和网络带宽组合的 300 多种实例类型，根据实例类型、使用时长和数据传输量收费，免费套餐可以使用每月 750 小时的 t2.micro （ 1 vCPU 、1 GiB 内存）实例或 t3.micro （ 2 vCPU 、1 GiB 内存）实例，项目早期可以考虑直接用免费套餐在单实例上搭建多个服务。</p> <p>实例配置需要关注安全组和 IAM 角色，在应用中访问 SQS 、Secrets Manager 等资源时，需要创建 IAM 角色添加相关资源的权限。</p> <p><img alt="Untitled" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/Untitled%201.png"></p> <p><a href="https://aws.amazon.com/ec2/" rel="nofollow">https://aws.amazon.com/ec2/</a></p> <h3>AWS Secrets Manager</h3> <p>应用开发中会涉及很多敏感信息，比如：数据库账号密码、第三方服务的 token ，如果以硬编码的方式使用会让敏感信息对所有代码维护者可见，可能导致信息泄露引发安全事故，使用 Secrets Manager 可以帮助应用程序保护敏感信息，简化机密管理的过程。</p> <p>Secrets Manager 按密钥数和 API 调用次数收费，每个密钥每月 0.40 USD ，每 10000 次 API 调用 0.05 USD 。</p> <p><img alt="98682E1E-B699-4DC5-822E-F68C75F3FBAB.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/98682E1E-B699-4DC5-822E-F68C75F3FBAB.png"></p> <p><a href="https://aws.amazon.com/secrets-manager/" rel="nofollow">https://aws.amazon.com/secrets-manager/</a></p> <h3>Amazon S3</h3> <p>S3 是 AWS 的对象存储服务，可以使用 S3 存储和检索任意数量的数据，包括：图片、视频、文档等等，可以轻松设置访问策略以确保数据的安全性。笔者主要用 S3 来存储前端静态资源，编译部署时通过 AWS CLI 将资源上传到 S3 。</p> <p>S3 按使用量收费，成本包括：存储量、请求量、数据传输带宽、管理和分析功能、复制、S3 Object Lambda ，免费套餐包含每月 5GB 的存储空间、20,000 个 GET 请求、2,000 个 PUT 、COPY 、POST 或 LIST 请求以及 100 GB 的数据传出量。</p> <p><img alt="D0BF388B-FCB2-49BE-9BC3-6F57598B906C.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/D0BF388B-FCB2-49BE-9BC3-6F57598B906C.png"></p> <p><a href="https://aws.amazon.com/s3/" rel="nofollow">https://aws.amazon.com/s3/</a></p> <h3>Amazon CloudFront</h3> <p>AWS 的 CDN 服务，源服务器可以使用 S3 、EC2 或其他 Web 服务器，笔者在项目中将前端静态源存储到 S3 ，再创建 CloudFront 将源服务器指向 S3 ，使用 CDN 域名来访问前端资源提升用户的首次访问速度。使用时需要注意缓存策略和源请求策略的配置，如果源服务使用 S3 ，通过 AWS CLI 上传文件需要加 cache-control 参数为文件配置缓存时间，还需要配置好 CORS ，避免在 HTML 中通过 &lt;script type="module"&gt; 加载 JS 文件时出现同源限制。</p> <p>CloudFront 按数据传输量和请求数收费，免费套餐包含每月 1 TB 的数据传出和 1000 万个请求。</p> <p><img alt="8FD9B8B8-7BFC-43C7-BFE3-28C9628813C3.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/8FD9B8B8-7BFC-43C7-BFE3-28C9628813C3.png"></p> <p><a href="https://aws.amazon.com/cloudfront/" rel="nofollow">https://aws.amazon.com/cloudfront/</a></p> <h3>Amazon RDS</h3> <p>AWS 的关系型数据库服务，支持 MySQL 、PostgreSQL 、Oracle 等 7 种数据库引擎，使用 RDS 无需担心硬件配置、数据库安装、软件补丁等方面的管理，这些都由 AWS 完成，同时提供了自动备份、自动扩容等功能。笔者在项目中使用的 MySQL ，配置中只允许同 VPC 的 EC2 实例访问。</p> <p>RDS 根据实例配置、存储容量、数据传输等收费，免费套餐包含每月 750 小时的单可用区 db.t2.micro 、db.t3.micro 和 db.t4g.micro 实例使用时间，可用于运行 MySQL 、MariaDB 、PostgreSQL 数据库。</p> <p><img alt="928B149F-64DB-4835-9AD2-9250F0BC4FBB.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/928B149F-64DB-4835-9AD2-9250F0BC4FBB.png"></p> <p><a href="https://aws.amazon.com/rds/" rel="nofollow">https://aws.amazon.com/rds/</a></p> <h3>Amazon ElastiCache</h3> <p>AWS 的缓存服务，支持 Memcached 和 Redis 两种流行的缓存引擎，使用 ElastiCache 可以减少应用程序从数据库中读取数据的次数，从而提高应用程序的性能。</p> <p>ElastiCache 按节点配置和数据传输量收费，免费套餐可以获得每月 750 个小时 cache.t2.micro 节点或 cache.t3.micro 节点的使用时间。</p> <p><img alt="11D19191-59EA-499A-9A97-545CE868756C.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/11D19191-59EA-499A-9A97-545CE868756C.png"></p> <p><a href="https://aws.amazon.com/elasticache/" rel="nofollow">https://aws.amazon.com/elasticache/</a></p> <h3>Amazon SQS</h3> <p>AWS 的消息队列服务，可以在应用程序之间安全地传递消息，使用 SQS 可以分解较长的业务链路，实现模块的拆分解耦。笔者在项目中对耗时较长的请求进行优化，收到请求后向 SQS 中发送一条消息然后立即返回响应给浏览器端，另有一个任务处理程序来轮询消息队列处理任务。</p> <p>SQS 按请求量收费，免费套餐每月有 100 万个请求的额度。</p> <p><img alt="804B6318-F8A3-4D3F-967A-2DEB83EEDD56.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/804B6318-F8A3-4D3F-967A-2DEB83EEDD56.png"></p> <p><a href="https://aws.amazon.com/sqs/" rel="nofollow">https://aws.amazon.com/sqs/</a></p> <h2>应用开发</h2> <h3>Next.js</h3> <p>开发前端应用时渲染模式的选择是一个关键的技术决策，使用客户端渲染、服务端渲染还是构建时渲染，一次性全部渲染还是渐进渲染，不同的选择在用户体验和工程团队的开发体验上会产生很大区别，决策的答案取决于具体用例。</p> <p>笔者在产品官网的开发上使用了 Next.js 框架，产品官网是典型的浏览型页面，没有个性化内容，需要对搜索引擎友好，PC 端和移动端的 FCP 和 LCP 都要足够快，Next.js 的静态生成模式非常合适，在构建时直接生成包含内容的 HTML 页面。</p> <p>在产品主应用的前端开发上笔者选择的是客户端渲染模式，没有使用 Next.js ，主应用的特点是：需要用户登录使用，登录后都是与用户相关的个性化数据，用户与应用交互频繁，组件内容随着交互变化，交互响应速度是一个关键体验，这种用例下用 Next.js 并没有明显优势。</p> <p><img alt="172EA912-FDE5-4CED-A3AF-AE57FE801DAD.webp" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/172EA912-FDE5-4CED-A3AF-AE57FE801DAD.webp"></p> <p><a href="https://nextjs.org/" rel="nofollow">https://nextjs.org</a></p> <h3>NestJS</h3> <p>基于团队能力结构，在服务端开发上笔者选用了两种技术栈 Java 和 Node.js ，Java 使用 Spring 框架，Node.js 使用 NestJS 框架，两种技术栈共同完成产品功能的开发，在路由层通过前面提到的 AWS ALB 进行粗粒度的功能划分，技术栈之间的约定主要包含数据库、SQS 和第三方 BaaS 服务。</p> <p>NestJS 是一个 TypeScript Node.js 框架，围绕 Dependency Injection 构建，同时提供了丰富的解决方案，开发大型应用时可以通过 DI 获得「解耦」能力，进行功能的拆解与组装。笔者为产品功能开发了两个 NestJS 程序，一个是 Web 应用程序，用于响应浏览器端的请求，实现各种接口，另一个是不侦听任何网络请求的独立应用程序，用于执行定时任务、处理 SQS 消息队列，两个程序配合实现各种产品功能。</p> <p><img alt="495B27F3-D14F-4DBB-8EF5-F32809E7B693.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/495B27F3-D14F-4DBB-8EF5-F32809E7B693.png"></p> <p><a href="https://nestjs.com/" rel="nofollow">https://nestjs.com/</a></p> <h3>Chrome Extensions</h3> <p>扩展程序通过向 Chrome 浏览器添加功能来增强浏览体验，是 Chrome 最受欢迎的功能之一，Chrome 应用市场不乏安装量过千万的扩展程序，如果产品需要与 Chrome 集成，或者希望与特定网页集成，则开发 Chrome 扩展程序是个不错的选择。</p> <p>扩展程序使用 Web 前端技术开发：HTML 、CSS 、JavaScript ，程序主要由 Service workers 、Content scripts 和 Popup window 组成，Service workers 在主线程之外运行，由事件触发响应，Content scripts 在网页上下文中运行，能够访问 DOM API 和部分 Chrome API ，在私有执行环境中运行，与页面的 JavaScript 执行环境隔离，Popup 是一个可选的 UI 元素，允许用户通过单击扩展程序图标来显示并与扩展程序进行交互。</p> <p>在开发范式上扩展程序与典型前端应用区别较大，如笔者开发的扩展程序会在指定网站的页面中插入功能模块，开发难点是开发者需要从网站视角为网站添加完美融合的功能，但 Content scripts 只能基于 DOM API 以「后插入」的方式来实现功能模块，无法切入到网站的 JS 执行逻辑中。功能设计上如果是在某个区域实现一个独立的模块，则相对简单，可以使用 iFrame 的方式，Content scripts 只承担入口的职责，主要功能由远端页面实现，如果设计上需要在网站已有功能模块中添加一个更小的子模块，则需要理清楚功能的交互逻辑和 UI 结构，中间需要做一些合理的分层和抽象。</p> <p><img alt="Untitled.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/Untitled%202.png"></p> <p><a href="https://developer.chrome.com/docs/extensions/" rel="nofollow">https://developer.chrome.com/docs/extensions/</a></p> <h3>Google OAuth 2.0</h3> <p>Google 是使用最广泛的 OAuth 应用程序，可以用于获取 Google 用户的数据，也能用来实现单点登录功能，还可以开发与 Gmail 、Google Calendar 、Google Docs 等 Google 产品深度集成的应用，在 Google OAuth 中向用户获取授权后即可通过 Google API 访问用户在 Google 产品中的相关数据。</p> <p>Google OAuth 2.0 的接入比较简单，提供了支持多种编程语言的库，完成开发后需要在 Google Cloud 中提交审核。</p> <p><img alt="BEA9B875-42EB-4185-BA4D-7E13FC76AE26.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/BEA9B875-42EB-4185-BA4D-7E13FC76AE26.png"></p> <p><a href="https://developers.google.com/identity/protocols/oauth2" rel="nofollow">https://developers.google.com/identity/protocols/oauth2</a></p> <h2>运营工具</h2> <h3>Mailchimp</h3> <p>开发 SaaS 软件通常离不开邮件服务，比如发送营销邮件、用户注册后的欢迎邮件、功能相关的邮件，Mailchimp 是使用最广泛的电子邮件营销工具之一，可以帮助客户构建电子邮件列表、自动化发送电子邮件、跟踪营销活动效果等等。</p> <p>笔者使用了 Mailchimp 的 Marketing API 和 Transactional API ，Marketing API 用于向一组用户发送电子邮件，在 Mailchimp 中创建好 contact 和 journey 后，通过 Marketing API 向 contact 中添加成员即可自动发送预定义好的邮件。Transactional API 用于发送个性化邮件，如果邮件内容需要通过程序逻辑生成，比如 for 循环取数据生成 HTML ，可以用这个 API ，简单的基于变量替换的邮件模板使用 Marketing API 更便捷。</p> <p>Mailchimp 按不同档位收取固定月费，免费用户可以使用 Marketing Platform 每月发送 1000 封邮件。</p> <p><img alt="39FD1B55-04A7-4DB8-8AF3-DC58FCD8A7E1.jpeg" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/39FD1B55-04A7-4DB8-8AF3-DC58FCD8A7E1.jpeg"></p> <p><a href="https://mailchimp.com/" rel="nofollow">https://mailchimp.com/</a></p> <h3>Typeform</h3> <p>Typeform 是一款在线问卷和表单创建工具，支持丰富的表单元素，与传统问卷不同的是，Typeform 有简单美观的设计和很强的交互性，对话式的问卷可以让用户更好地与问卷互动，提高问卷的质量和响应率。Typeform 的问卷编辑页面易用性也很好，问卷的创建不需要研发参与。</p> <p>Typeform 有三档收费模式，最低订阅费为每月 25 美元。</p> <p><img alt="69ECAE9B-D2DC-4BA3-96EF-C56CF7E6B5E3.jpeg" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/69ECAE9B-D2DC-4BA3-96EF-C56CF7E6B5E3.jpeg"></p> <p><a href="https://www.typeform.com/" rel="nofollow">https://www.typeform.com/</a></p> <h3>PostHog</h3> <p>PostHog 是一个开源的产品分析平台，可以自己部署，也可以直接使用 PostHog Cloud ，笔者使用的 PostHog Cloud ，免费用户每月有 100 万个 event ，PostHog 产品的易用性做得很好，注册后能快速完成埋点进行数据分析。</p> <p>PostHog 除了产品开源，同时也是一家「公开运作」的公司，在公司手册中可以看到公司文化、战略、产品路线图等各个方面的信息。</p> <p><img alt="B220F693-B216-4B0D-AAD2-02734936A979.png" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/B220F693-B216-4B0D-AAD2-02734936A979.png"></p> <p><a href="https://posthog.com/" rel="nofollow">https://posthog.com/</a></p> <h2>SaaSLab</h2> <p>SaaS 领域有很多做出高价值产品的小团队，甚至有不少单人公司，高产能的背后离不开好的工具和技术支撑，笔者在创新团队中也基于这些 SaaS 、工具、技术栈帮助新产品快速落地，深切感受到工具和技术的价值。SaaSLab 公众号将持续探索 SaaS 、工具、技术栈，分享有价值的实践，欢迎大家关注，也欢迎做海外业务的朋友来找笔者交流。</p> <p><img alt="SaaSLab" class="embedded_image" loading="lazy" referrerpolicy="no-referrer" rel="noreferrer" src="https://dxneurdehu4co.cloudfront.net/saaslab/logo.png"></p>