继上一篇《周末卷一卷，一个音乐生成AI网站写好了，开源啦》发布后，又一个清明假期结束了，除了进行优良的传统活动事项外，也抽空完善了我的项目。
终于…
一个功能虽少，五脏还是全的网站正式完成了。主要技术栈：
- Next.js – 前端/后端
- TailwindCSS – 样式
- 登录注册认证，基于clerk
- 音乐生成，逆向解析Suno AI
- 数据存储，Postgres数据库(node-postgres)
- 支付功能 Lemon Squeezy
- 部署托管 vercel
- 域名解析 cloudflare
网站地址：www.sunomusic.fun/
由于部署方式对国内用户直接访问不一定友好，搭乘🪜更佳。下面正式开始我们五步实现AI生成音乐网站的路。
1. 获取 cookie
上一篇《周末卷一卷，一个音乐生成AI网站写好了，开源啦》有提到过，项目的主要功能是基于 suno.ai 的强大能力逆向实现的，所以第一步，我们需要注册网站，获取我们逆向请求需要的 cookie。找到路径带 client?_clerk_js_version 的请求复制出如图所示的 cookie 值出来备用：
2. 注册 clerk
clerk 是什么？
简单点说，clerk 是一个用户管理系统，提供了Google、Github 等等第三方网站的登录、注册集成功能。免费版提供了每月 10000 用户，足够我们使用了。
我们只需要注册好账号后，创建项目，添加 Secret keys 即可。记住此时获取到的值：
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
后面会用到
3. 获取你的支付功能
作为一个出海站，一个友好的支付功能必不可少。国内的支付方式对国外用户并不友好，而 Stripe 等国外友好的支付方式对我们使用却并不方便，要求公司资质，同时国内用户存在封号的风险。
作为一个折中的方案，Lemon Squeezy 是目前发现的相对合适的方案，很多出海玩家也在使用。审核可能会花费你几天时间，通常在一到两个工作日，需要提前预留好时间。
审核通过后，就可以添加我们的订阅服务了，我们的项目提供了两种订阅方式：
- One-time Payment: 一次性获取指定的使用次数
- Monthly Subscription: 每月订阅，成为月度会员
添加我们的订阅产品后，保留好如下数据：
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 数据库，保存好数据库的信息。可以在本地链接下测试联通性。获取到配置如下：
POSTGRES_URL=
类似如下我最近新创建的数据库：
5. 部署网站
进入 Github 仓库
最最重要的来了，高能！！！
一定要 Star 下项目！！！
一定要 Star 下项目！！！
一定要 Star 下项目！！！
重要的事情说 3 遍，发现不少同学习惯很不好呀。克隆了项目，跑来问我哪里哪里报错了，结果连个 Star 都没有，听了都让人伤心💔
好了，完成了上面的步骤后，找到 README 中的 Deploy 按钮，填入你的项目名，以及上面几步中获取的信息作为环境变量就可以了，等待 vercel 部署完成就可以访问你的音乐 AI 网站了。全部环境变量为：
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=
记得补充完善好你自己的变量数据。
最后
生命在于折腾，当然，更希望你所有步骤都完成的很顺利
有不明白的地方也欢迎沟通交流，一起进步～
再一次：
网站地址：www.sunomusic.fun/
一定要记得 star~
原文链接：https://juejin.cn/post/7354362021427003407 作者：橙子三个半
