type
status
date
slug
summary
tags
category
icon
password
文章详细介绍了如何部署一个AI壁纸网站。项目主要利用dall-e-3模型,根据用户输入的提示词生成壁纸图。技术包括nextjs, clerk, aws s3, stripe, node-postgres, tailwindcss等。文章详细介绍了环境变量的配置,部署运行过程,以及在aws s3部分遇到的问题和解决方法。最后,运行项目并在浏览器中打开,就可以生成壁纸。
背景
去年到现在,加了哥飞的出海交流群,也在尝试做些网站,赚点美金,可惜做的不怎么好,今年得努力了呢,虽然时间是少,还要上班,但是呢,还是得坚持搞搞,打工是没有前途的,做自己的产品才有未来呀。
去年一共做了6,7个网站,但是付费工具类的网站没有做过,刚好群内的大佬idoubi,开源了很多脚手架项目,很多都是成品,基于他的项目进行二次开发效率才是最高的。
选择了这个项目,all-in-aigc/aiwallpaper,作为练手的项目,修改下,这个项目功能很全,包含支付等等,可以算做是个商业级别的产品了。
项目介绍
aiwallpaper 这个项目,主要是利用
dall-e-3
这个模型,根据用户输入的提示词,生成想要的壁纸图。用的技术包括:
都是出海常用的技术。
next.js 支持vercel平台部署。
clerk 登录服务,不需要自己在做一套登录系统了
aws s3 存储服务,用于存储图片或者视频文件等资源
stripe 是支付服务,让用户花钱购买你的产品服务,用来赚钱的。目前这个我准备用另外一项支付替代。先用简单的,stripe申请注册也是需要点门槛的。
node-postgres 是数据库服务,用来存储你的数据交易订单等业务数据的
tailwindcss 前端页面样式效果
以上希望你对nextjs,前端等相关的技术有一定的了解,不然是看不懂的,或者说很吃力。
配置好环境变量
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F155940bf-cdde-45b2-9de8-e1d8e1ed10f7%2F902dddd7-baa3-4c87-a4de-b18268036848%2FUntitled.jpeg?table=block&id=c7622980-75d7-4a43-968f-2cf364800ca6)
具体看截图啦,可以对照着配置这些参数,支付的可以不急,先让项目跑起来。
这里面就是有几点要注意,你需要有openAi的key,你可以用官网的,也可以用第三方提供key的,有很多第三方的渠道卖的很便宜,我这里也分享一个。api.inferkit.ai 很便宜的,是官网价格的一半。支持
gpt4
dall-e-3
等常见的模型。数据库你可以选择supabase呢,有一定的免费额度的呢,在本地调试,那就直接在本地起一个postgresql服务就好了。在写这篇文章这一刻,还是用的本地的postgresql。
然后登录这块,直接去dashboard.clerk.com 网站,配置好相关的信息,你的应用名称,然后会给你生成测试的key和密钥
最后就是aws s3啦,这块坑的我好惨😂先生成这些key,以及密钥吧,aws s3的bucket等等。后面在详细说下。
部署运行
我目前是本地部署的,方便调试,打日志,都很好处理。
先运行
pnpm install
安装相关的依赖库然后呢,初始化数据库,相关的表的创建等等。如果你用的是本地的,那就把数据库建表语句用本地的postgresql生成好,如果是远端的,那我觉得用 supabase 就好了,supabase的地址是https://supabase.com/. vercel平台提供的vercel-postgres 有坑,容易扣你不少钱钱的。要留意。
之后呢,就是参考我上图的环境变量等参数值,搞定好,相关涉及到的配置,都去对应的平台获取对应的key或者是需要的值。
都不复杂的。接下来先说一下aws s3的踩坑经验。配置完了运行就比较简单了。
碰到的坑
在aws s3这块,其实没有必要去深究它的用户,组,角色等相关的概念,子账号其实也可以不用的,里面的概念太多了,东西多了,就把人搞懵了,反正我是挺懵逼的。
我们只需要关注几点,第一个是创建存储桶,第二个是参考托管静态网站的指导文章,按照这个文章操作就好了,其他的根本就没有必要看。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F155940bf-cdde-45b2-9de8-e1d8e1ed10f7%2F006292e7-8004-405c-9aba-362f57fed105%2FUntitled.jpeg?table=block&id=e128032f-2088-451f-bb0a-81f87dc4c88d)
这是一个创建好了的存储桶,并且也通过项目代码运行,生成了一张壁纸图,放在wallpapers目录下。
再看一下刚刚的那个托管静态网站的指导文章,链接在这里,托管静态网站
这个文章里面告诉我们,有两个步骤要注意。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F155940bf-cdde-45b2-9de8-e1d8e1ed10f7%2F7608e698-5445-4b0a-bcad-f904a141e410%2FUntitled.jpeg?table=block&id=486a27c1-1338-4dc2-9c3e-5f90550d9dbc)
完成这两步,我们上传到这个存储桶的资源文件或者图片就可以对外公开访问了。
先说第一步:编辑s3,阻止公有访问设置。也就是允许公有访问。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F155940bf-cdde-45b2-9de8-e1d8e1ed10f7%2F4494f87c-c798-4822-83c2-a30e6fb83707%2FUntitled.jpeg?table=block&id=44b48603-e85f-42b4-bc1f-9e1c04f732ff)
关闭它,不要开启就好了。
然后是第二步:添加存储桶策略
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F155940bf-cdde-45b2-9de8-e1d8e1ed10f7%2Fb388f166-41af-4bef-8539-c0af4d1b7ff1%2FUntitled.jpeg?table=block&id=251bba89-a2de-44e9-8ee6-19d0e4f72e28)
仔细看这里面的脚本代码,你需要复制这个代码,在权限这个tab下,紧接着屏蔽公共访问权限(存储桶设置)下面,就能看到存储桶策略这块的选项了。
把截图中的代码复制下来,粘贴进去,并且修改这个bucket-name的值为你的存储桶的名称,保存即可,之后你可以访问你存储桶里面的一张图片,你可以自己随便上传一张图片进去,它会给你提供一个https的访问路径的,如果你能够成功的访问到这张图,说明你配置都OK了。
如果说你报错了,错误为这样的:
那就说明配置失败,在仔细按照本文说的这些步骤检查吧,或者你可以看它的文档提示。
获取aws s3的ak以及sk值
访问这个路径,ak以及sk值
点击进去后,会看到如截图一样的内容
点击管理访问密钥,就能够去设置ak,sk等值了。这块不复杂,仔细找找就能搞定了。
继续部署项目
到这一步,该准备好的条件,都处理好了,下面就是运行项目了。
运行
pnpm dev
然后访问浏览器,打开地址
http://localhost:3000
你就会看到如图所示的效果图啦。当然了,默认你是个空白页面,还没有壁纸的。
如果相关的环境变量你都配置好了,那么你就可以输入提示词了,这个网站就会生成你想要的壁纸啦,到这一步,就成功跑通了项目啦,可以进行下一步,对项目进行其他的改造,为自己的业务服务。
本文完。
pps:本文写于4月29,由于太忙了,于5月底在个人博客上首次发布。