在ChatGPT上线了应用商店之后,里面的应用确实可以给实际工作带来很大的效率提升,使用里面的应用可以做之前没接触过的东西,就比如直接使用Grimoire应用,协助开发一个用Next.js框架搭建的简单的工具网站,在这之前有接触过一点点AngularJS和CSS开发,但Next.js之前完全没接触过,使用ChatGPT可以快速上手,另外使用Logo Creator应用设计网站的Logo,使用 GPT4.0 写了首页的英文引流软文。
关于Next.js: Next.js (https://www.nextjs.cn/)为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。详细可看下Next.js 官方开发文档(https://www.nextjs.cn/docs)
使用Next.js开发工具网站还有另外一个很重要的原因,Vercel是零配置部署Next.js应用程序的最快方式。而Vercel是免费的,也有付费,但目前对于小工具网站免费的配置完全够用,此外还有一些特性:自动HTTPS和SSL证书、自动CI/CD(通过GitHub, GitLab, Bitbucket等)、通过git push实现即时全球部署等等让开发一个工具网站的成本降到最低。此外工具网站用到的cloudinary云存储服务也是使用免费版本的配置,后续如果存储的量大的话再转付费版本。目前网站的唯一成本就是给每个网站申请的域名挂靠费,每个域名一年78块。
一、项目开发
开发的IDE是使用WebStorm,直接在里面创建Next.js的项目,终端提示的配置项全部都回车默认即可。
接着在ChatGPT上选择Grimoire应用,详细描述你的开发需求,让它直接给出详细的项目配置步骤和对应的前后端代码即可,当然这边不会一次性输出所有的详细代码,可能初始只是给出大概的实现框架,需要逐步提问完善实现逻辑。
另外ChatGPT爬取的Next.js框架相关代码没更新到最新,比如next-connect,ChatGPT给出的代码是旧接口逻辑,实际配置之后和最新的实现不匹配,这个时候直接到官网上拷贝next-connect的使用范例喂给ChatGPT进行逻辑修正。
1. 特殊字符处理
在自定义组件中的文本内容,特殊字符需要使用转义字符,否则后续部署到Vercel上编译的时候会报错。比如单引号和双引号要替换成如下转义字符:
' 和 "
2. page/api 后端接口解析配置
另外对于page/api目录中的后端接口,如果是前端传递FormData表单数据给后端接口,后端接口需要配置如下代码:
export const config = {
api: {
bodyParser: false, // Disabling bodyParser
},
};
Next.js的API路由默认使用bodyParser
来解析进来的请求体(request body)。当你发送一个POST
请求,特别是包含文件(如在文件上传场景)或在发送非标准JSON格式数据时(如FormData
),bodyParser
会尝试解析请求体内容。对于一些特定的用例,如文件上传或者需要直接处理原始流数据的场景,你需要手动处理请求体,因此必须禁用默认的bodyParser
。
当未禁用bodyParser
时,Next.js会尝试自动解析进来的请求体数据为JSON或其他支持的格式。这在处理如FormData
或是直接的文件流时会导致问题,因为bodyParser
并不支持这些格式,从而导致后端API无法正确读取发送的数据。
通过设置api: { bodyParser: false }
,你告诉Next.js不要自动解析请求体,这样你就可以在API路由中自己处理原始请求数据了。对于需要处理文件上传的API路由,这通常是必须的,因为你需要访问原始请求流来正确处理文件数据。
例如,在使用formidable
或其他需要直接访问请求流的库处理文件上传时,禁用bodyParser
是必要的,因为这些库会直接从HTTP请求中读取和解析多部分表单数据。
二、服务器部署
1. 部署上线
登录Vercel(https://vercel.com/)官网,直接用Github账号认证登录,这样Github上的工程可以直接导入到Vercel里面部署,如果在部署编译过程中出现异常,在本地工程修改错误之后Push代码到Github,之后Vercel就会自动触发新的编译部署,不用手动触发。
2. Vercel文件存储问题
在第一个版本实现中,因为是做图片转化工具网站,把转化之后的图片保存在了工程public目录下,并配置了一个定时任务,每隔一小时清空缓存超过1小时的图片。部署到Vercel上之后测试就出现异常了,输出错误:
EROFS: read-only file system, mkdir '/var/task/uploads'
在Vercel这样的无服务器平台(Serverless Platform)上,文件系统是只读的,这意味着你不能直接在文件系统上写入或持久化数据。这是由于无服务器架构的无状态特性,每次函数执行都在一个干净的环境中进行。
解决方法如下:
1) 使用第三方存储服务
最常见的解决方案是使用如Amazon S3、Google Cloud Storage或Azure Blob Storage这样的云存储服务来存储文件。这些服务提供了API,允许你从应用程序上传、存储和检索文件。
2) 使用外部文件上传服务
另一个解决方案是使用专门的文件上传服务,如Cloudinary或Uploadcare。这些服务通常提供了易于使用的客户端库,可以直接集成到你的Web应用中,并处理文件的上传、存储和管理。
3) 临时文件存储
如果你需要临时存储文件,例如为了处理后立即删除,可以考虑使用如/tmp目录这样的临时空间。但请注意,在Vercel上,/tmp目录中的文件在函数执行结束后不保证被保留,且每次函数调用时可用的磁盘空间是有限的。
这边根据个人使用情况选择了方案2,使用Cloudinary(https://cloudinary.com/)或Uploadcare,对比了两者存储方案,Cloudinary更优,Cloudinary免费版本每个月有25个Credit的用量,每个Credit包含如下套餐内容,也就是每个月有25GB的图片存储空间用量:
而Uploadcare相比之下逊色很多,免费版本每个月只有10000次接口调用量(这个调用不管是查询还是上传文件之类都计算在内),5GB的流量和1GB的存储空间。看了tinypng.com转化之后的图片下载路径,也是使用Cloudinary来存储的,所以选Cloudinary没错。
在解决图片的存储问题之后,考虑到存储空间的限制,还需要配置一个定时任务,每隔一小时定时清理Cloudinary上存储超过1小时的图片。
三、域名和解析
1. 域名取名
域名使用Google keyword planner (https://ads.google.com/aw/keywordplanner/home)做关键词调研,选择流量大,竞争度低的关键词拼接起来做网站的域名:
输入关键词之后,在右上角下载关键词数据分析Excel表格,查看更详细的数据。
这边对于关键词webp to jpg,前面两个的关键词的搜索量都很高,而且竞争度都很低,那么可以使用webptojpg.com 或 webpformattojpg.com 作为域名,到域名服务方案商上查看对应关键词的域名是否已注册,如果都被注册了可以考虑使用webp-to-jpg.com这样的域名。
2. 域名解析配置
在域名申请到之后配置到Vercel,Vercel给每个项目都分配了一个<项目名.vercel.app>的域名,在正式域名配置好之后,把这个域名用301永久重定向到你的正式域名。
这边添加域名之后在 www.domain.com 有cname信息,domain.com有A记录信息,这边并不建议直接配置到域名解析的地方,而是把came和A记录配置到Cloudflare(https://www.cloudflare.com/),用Cloudflare去包一层,去做一些DDos防护和CDN加速。
在域名配置的地方,把下面三个模块的每个配置项都选择打开即可:
而在域名托管的地方,把域名DNS解析到Cloudflare:
sharon.ns.cloudflare.com
decker.ns.cloudflare.com
在上面都配置完毕之后,如果碰到在浏览器里面打开网站:提示网站因为重定向次数过多无法打开网站的,大概率是Cloudflare里面的SSL/TLS配置出错了,这边检查下是否变成了Flexible,要配置成Full才是正确的。
四、数据监控
配置Google Analytics来分析网站的访客数据,可查看每天的访问量,访问用户所在的区域等数据,便于后续分析改进网站。
配置Google Search Console分析Google搜索引擎的点击表现数据,还有网站索引情况等,为后续的优化处理做一个参考。
五、最后
以上就是我在开发图片转化工具碰到的问题记录,在开发完Webp转Jpg的工具之后,再复制了三个同类的网站,包括Webp转Png,Png转Webp,Jpg转Webp,因为处理逻辑都是相似的,可以复用大量的逻辑,给每个转化工具都单独申请了一个域名,方便做SEO的排名,接着在每个网站中同时接入其他几个图片转化的Tab入口。
以下是四个网站的入口,访问其中一个也可以访问其他几个。(2024/9/25 更新后所有的转化功能都集成到jpg2webp.com,其他几个网址都做了全站重定向到jpg2webp.com域名)。
- Webp转Jpg
(https://webpformattojpg.com/) - Webp转Png
(https://webpconverttopng.com) - Png转Webp
(https://convertpngtowebp.com) - Jpg转Webp (https://jpg2webp.com)
总的来讲是个不错的尝试,可以学下Next.js的开发和网站的部署,之前做英文评测内容站点是直接使用WordPress模版,很少涉及到开发的内容,英文内容站的后期运维工作更重,需要不断更新原创内容,做外链把排名做上去,而工具网站的维护成本比较低,除非做技术替换的改版。做工具网站也是不错的一个获取流量的渠道,后续看下网站整体的数据情况再做一个分享。
转载请注明出处:陈文管的博客 – 使用ChatGPT开发Next.js图片转化工具网站
扫码或搜索:文呓
微信公众号 扫一扫关注