五步实现你的出海AI生成音乐网站，开源啦～

继上一篇《周末卷一卷，一个音乐生成AI网站写好了，开源啦》发布后，又一个清明假期结束了，除了进行优良的传统活动事项外，也抽空完善了我的项目。

终于...

一个功能虽少，五脏还是全的网站正式完成了。主要技术栈：

Next.js -- 前端/后端
TailwindCSS -- 样式
登录注册认证，基于clerk
音乐生成，逆向解析Suno AI
数据存储，Postgres数据库(node-postgres)
支付功能 Lemon Squeezy
部署托管 vercel
域名解析 cloudflare

网站地址：www.sunomusic.fun/

由于部署方式对国内用户直接访问不一定友好，搭乘🪜更佳。下面正式开始我们五步实现AI生成音乐网站的路。

上一篇《周末卷一卷，一个音乐生成AI网站写好了，开源啦》有提到过，项目的主要功能是基于 suno.ai 的强大能力逆向实现的，所以第一步，我们需要注册网站，获取我们逆向请求需要的 cookie。找到路径带 client?_clerk_js_version 的请求复制出如图所示的 cookie 值出来备用：

2. 注册 clerk

clerk 是什么？

简单点说，clerk 是一个用户管理系统，提供了Google、Github 等等第三方网站的登录、注册集成功能。免费版提供了每月 10000 用户，足够我们使用了。

我们只需要注册好账号后，创建项目，添加 Secret keys 即可。记住此时获取到的值：

ini 复制代码

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

后面会用到

3. 获取你的支付功能

作为一个出海站，一个友好的支付功能必不可少。国内的支付方式对国外用户并不友好，而 Stripe 等国外友好的支付方式对我们使用却并不方便，要求公司资质，同时国内用户存在封号的风险。

作为一个折中的方案，Lemon Squeezy 是目前发现的相对合适的方案，很多出海玩家也在使用。审核可能会花费你几天时间，通常在一到两个工作日，需要提前预留好时间。

审核通过后，就可以添加我们的订阅服务了，我们的项目提供了两种订阅方式：

One-time Payment: 一次性获取指定的使用次数
Monthly Subscription: 每月订阅，成为月度会员

添加我们的订阅产品后，保留好如下数据：

ini 复制代码

LEMON_SQUEEZY_API_KEY=
LEMON_SQUEEZY_STORE_ID=
LEMON_SQUEEZY_PRODUCT_ID=
LEMON_SQUEEZY_MEMBERSHIP_MONTHLY_VARIANT_ID=
LEMON_SQUEEZY_MEMBERSHIP_SINGLE_TIME_VARIANT_ID=
LEMONS_SQUEEZY_SIGNATURE_SECRET=

具体为：

LEMON_SQUEEZY_API_KEY：API 接口的 key
LEMON_SQUEEZY_STORE_ID：我们申请开通的店铺 id
LEMON_SQUEEZY_PRODUCT_ID：我们添加的产品 id
LEMON_SQUEEZY_MEMBERSHIP_MONTHLY_VARIANT_ID：月度会员的 id，可以理解成我们产品 id 下的其中一个 skuId
LEMON_SQUEEZY_MEMBERSHIP_SINGLE_TIME_VARIANT_ID：One-time Payment 的id，可以理解成我们产品 id 下的另一个 skuId
LEMONS_SQUEEZY_SIGNATURE_SECRET：在 settings/webhooks 中开通我们的支付成功的回调事件，保留好你创建 webhooks 用的 key，接口 URL 为你的域名 + /api/payment/webhook

4. 准备好数据库

vercel 这个宝藏网站真的是我们的福音，它不仅提供了与 Github 集成自动构建部署的 CI/CD，同时，还有免费的数据库可以用。接下来我们就要在 vercel 开通我们的 Postgres 数据库，保存好数据库的信息。可以在本地链接下测试联通性。获取到配置如下：

makefile 复制代码

POSTGRES_URL=

类似如下我最近新创建的数据库：

5. 部署网站

进入 Github 仓库

最最重要的来了，高能！！！

一定要 Star 下项目！！！

重要的事情说 3 遍，发现不少同学习惯很不好呀。克隆了项目，跑来问我哪里哪里报错了，结果连个 Star 都没有，听了都让人伤心💔

好了，完成了上面的步骤后，找到 README 中的 Deploy 按钮，填入你的项目名，以及上面几步中获取的信息作为环境变量就可以了，等待 vercel 部署完成就可以访问你的音乐 AI 网站了。全部环境变量为：

ini 复制代码

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

SUNO_COOKIE=""

LEMON_SQUEEZY_HOST=https://api.lemonsqueezy.com/v1
LEMON_SQUEEZY_API_KEY=
LEMON_SQUEEZY_STORE_ID=
LEMON_SQUEEZY_PRODUCT_ID=
LEMON_SQUEEZY_MEMBERSHIP_MONTHLY_VARIANT_ID=
LEMON_SQUEEZY_MEMBERSHIP_SINGLE_TIME_VARIANT_ID=
LEMONS_SQUEEZY_SIGNATURE_SECRET=

POSTGRES_URL=

记得补充完善好你自己的变量数据。

最后

生命在于折腾，当然，更希望你所有步骤都完成的很顺利

有不明白的地方也欢迎沟通交流，一起进步～

再一次：

项目地址：github.com/Alvin-Liu/s...

网站地址：www.sunomusic.fun/

一定要记得 star~

五步实现你的出海AI生成音乐网站，开源啦～

1. 获取 cookie

2. 注册 clerk

3. 获取你的支付功能

4. 准备好数据库

5. 部署网站

最后