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,前端等相关的技术有一定的了解，不然是看不懂的，或者说很吃力。
配置好环境变量
具体看截图啦，可以对照着配置这些参数，支付的可以不急，先让项目跑起来。
这里面就是有几点要注意，你需要有openAi的key，你可以用官网的，也可以用第三方提供key的，有很多第三方的渠道卖的很便宜，我这里也分享一个。api.inferkit.ai 很便宜的，是官网价格的一半。支持
gpt4dall-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这块，其实没有必要去深究它的用户，组，角色等相关的概念，子账号其实也可以不用的，里面的概念太多了，东西多了，就把人搞懵了，反正我是挺懵逼的。
我们只需要关注几点，第一个是创建存储桶，第二个是参考托管静态网站的指导文章，按照这个文章操作就好了，其他的根本就没有必要看。
这是一个创建好了的存储桶，并且也通过项目代码运行，生成了一张壁纸图，放在wallpapers目录下。
再看一下刚刚的那个托管静态网站的指导文章，链接在这里，托管静态网站
这个文章里面告诉我们，有两个步骤要注意。
完成这两步，我们上传到这个存储桶的资源文件或者图片就可以对外公开访问了。
先说第一步:编辑s3,阻止公有访问设置。也就是允许公有访问。
关闭它，不要开启就好了。
然后是第二步:添加存储桶策略
仔细看这里面的脚本代码，你需要复制这个代码，在权限这个tab下，紧接着屏蔽公共访问权限(存储桶设置)下面，就能看到存储桶策略这块的选项了。
把截图中的代码复制下来，粘贴进去，并且修改这个bucket-name的值为你的存储桶的名称，保存即可，之后你可以访问你存储桶里面的一张图片，你可以自己随便上传一张图片进去，它会给你提供一个https的访问路径的，如果你能够成功的访问到这张图，说明你配置都OK了。
如果说你报错了，错误为这样的:
那就说明配置失败，在仔细按照本文说的这些步骤检查吧，或者你可以看它的文档提示。
获取aws s3的ak以及sk值
访问这个路径，ak以及sk值
点击进去后，会看到如截图一样的内容
点击管理访问密钥，就能够去设置ak,sk等值了。这块不复杂，仔细找找就能搞定了。
继续部署项目
到这一步，该准备好的条件，都处理好了，下面就是运行项目了。
运行
pnpm dev然后访问浏览器，打开地址
http://localhost:3000你就会看到如图所示的效果图啦。当然了，默认你是个空白页面，还没有壁纸的。
如果相关的环境变量你都配置好了，那么你就可以输入提示词了，这个网站就会生成你想要的壁纸啦，到这一步，就成功跑通了项目啦，可以进行下一步，对项目进行其他的改造，为自己的业务服务。
本文完。
pps:本文写于4月29，由于太忙了，于5月底在个人博客上首次发布。