如何在 Vercel 上部署 Saasfly

前言

最近打算学习一下 SaaS 的技术栈，自己建一些工具网站玩玩，同时尝试一下通过副业赚美元这条路是否可行。

Saasfly 是一个 Web 应用模板，集成了登录、多语言、支付等模块，可以快速构建 Web 应用。

Saasfly 的 使用文档 已经写的足够清晰了，不过对于我这种对 Web 技术栈不熟悉的新手来说，在构建和部署的过程中，还是遇到了一些细节问题。

因此整理一篇文档，帮助小白更容易上手。

Saasfly 配置

环境配置

我使用的开发环境是 mac，Saasfly 同时还支持 Windows 和 Linux。

前置安装：

• Node.js - 18.17 或更高版本，可通过 node -v 查看版本。
• bun - 1.0 或更高版本，通过 brew install oven-sh/bun/bun 安装。

配置步骤

1. 创建工程

bun create saasfly

执行命令后，这一步会要求你输入工程名，并在当前目录下创建工程目录，所以可以在执行前，用 cd 命令先进入到工程的上一级目录。

这一步会把远程仓库拉到本地，删除原仓库的 .git 文件，并安装相关依赖。

2. 拷贝项目配置

用 cd 命令进入工程目录，执行 cp .env.example .env.local 命令。

.env.local 中保存了一些环境变量，包括数据库的配置等。因此，需要从 .env.example 拷贝一份再做修改。

3. 配置数据库

Saasfly 默认使用 PostgreSQL，需要先配置好数据库，再把数据库链接写到 .env.local 中。

数据库可以直接在 Vercel 上创建，点击这里 ，用 GitHub 登录后点击 「Get Started」。

点击 「Create Database」后选择「Postgres」，免费用户只能创建一个。

创建成功后，点开数据库的详情，切到 .env.local tab，把 POSTGRES_URL=“XXXX” 这一行复制到本地的 .env.local 文件中。

# Format Example
# POSTGRES_URL="postgres://{USER}:{PASSWORD}@{DB_HOST}:{DB_PORT}/{DATABASE}"

POSTGRES_URL="postgres://postgres:123456@127.0.0.1:5432/saasfly"

4. 生成数据表

运行 bun db:push 后会生成数据表。

输出内容：

🚀  Your database is now in sync with your Prisma schema. Done in 151ms

┌─────────────────────────────────────────────────────────┐
│  Update available 5.9.1 -> 5.10.2                       │
│  Run the following to update                            │
│    npm i --save-dev prisma@latest                       │
│    npm i @prisma/client@latest                          │
└─────────────────────────────────────────────────────────┘

5. 运行项目

执行下面的命令：

bun run build
bun run dev:web

顺利的话，通过 http://localhost:3000 即可打开本地部署的网站。

Vercel 部署

本地正常运行后，需要部署到远端。Vercel 可以和 GitHub 项目关联，然后自动部署。

1. 在 GitHub 创建私有仓库

Vercel 在关联项目的时候，也可以关联私有仓库，所以创建为私有仓库即可。

2. 提交项目

将创建的远程仓库拉到本地，把 .git 文件拷贝到上面创建的工程目录下，然后把整个工程目录提交到 GitHub 上。

3. 关联项目

打开 Vercel，用 GitHub 账号登录后，点击 Add New Project 。此时 Vercel 会加载出 GitHub 的仓库列表，选择对应的仓库即可。

4. 配置项目

在原项目的 .gitignore 文件中，忽略了 .env.local 文件，也就是这个文件不会被提交到 GitHub 仓库，那么 Vercel 在关联的时候自然也加载不到对应的环境变量。

因此需要在 Vercel 项目的 Settings 里批量配置环境变量，把 .env.local 文件拖过来可以批量导入。

然后点击 「Deploy」进行构建，没有报错的话就构建完成了。后续 GitHub 仓库上有新的提交时，会自动触发重新构建。

完成之后会生成一个预览链接，点击 「Visit」 可以进行预览。

总结

Saasfly 的整体配置流程比较简单，步骤比较少，并且配置完成后，维护起来也比较方便。

目前看起来比较适合新手入门，不过暂时只跑通了部署流程，数据库使用、多语言、支付、登录还没来得及体验（工作太忙了），后面等我的网站搭好后可能也会分享一下使用心得。

另外，如果在配置过程中遇到什么问题，欢迎来 推特 上一起讨论，当然也可以直接请教 原作者。

参考

• Saasfly Docs