借助AI前后端自己实现一个钓鱼标点小工具记录心得之网站部署篇(一)

61 阅读9分钟

闲来无事,最近刚好工作也比较闲于是就有了个想法自己搞个钓鱼标记网站,同类型的工具已经不少这个,其实就要就是想看看自己把整个流程跑通,其实写这篇文章也就是记录一下整个流程及实现。目前网站只实现了标点上传相关功能及注册功能,论坛以及图片上传功能没做,怕有人乱搞毕竟备了案我也没有精力去审核其实这只是自己做来标点玩的,钓鱼的同学可以把你的标点共享起来一起玩啊(但是估计没几个人分享)🤓,还有这个百度地图这个每天的免费量真是少得可怜啥都喊你交钱,本来我最初的想法是上架小程序的但懂的都懂tx的吃相个人开发者基本上没得搞你不交钱你就玩不了,个人只能做记账类的app还要各种审核你说不定那天就把你下架了,没办法就只有搞个webApp来玩了。

网站地址:app.zcyd.site/home

大概核心功能如下图:

20251121132706.jpg 20251121134338.jpg 20251121134359.jpg

PS:难得不是代码难得是你做产品需要的创意及部署流程。。还有就是运维及推广,写这篇文章 希望能对你们有点帮助。全是干货话不多说开整。

今天不介绍网站功能及具体实现方法主要聊网站部署及申请域名方面及运维部署篇

前置条件: 云服务器、备案(如果不上架只是纯粹的在web服务器上预览可以不用这一步)、oss服务器(图片资源托管)。

云服务器这个不用说了吧,别人要访问你的站点你必须有一个可托管资源代码的地方,目前国内云服务器厂商有很多像腾讯、阿里、华为以及还有很多其它的云服务器厂商随便选一个都行我选择的是阿里云。
www.aliyun.com/

20251121104719.jpg

根据你自己的需求来一般如果只是个人站搞个播客或者自己整个小demo玩玩的就2核1g这个就够用了一般新手有优惠整个1年的几十块就行了。

服务选购好了一般就是系统的选择了话不多说肯定选择liux系统然后会让你选择一个应用镜像,这个镜像就像是给你整了一个开箱既用的桶比如宝塔比如1panel,你有了这个镜像之后就不用到处去自己安装各种东西了里面啥都有,如图

20251121105604.jpg

这儿我选择的是1panel有很多人喜欢宝塔反正都差不多根据你个人喜爱来初始化后系统会给你一个访问地址就是这个应用镜像的地址基本上你可以在这个镜像上面完成你部署系统的所有操作如下图

20251121105955.jpg

接下来选择必备的几个应用mysql、redis、openResty

mysql不用过多介绍了吧你数据库一般都是选择的这个,也有选择其它的大差不差。

(这一步我用的是docker直接在服务器上部署没有用网站上的应用来创建)

redis数据缓存当你数据里较大或者 一些常用数据不会经常刷新的时候会用到这个一般刚开始个人站基本上用不到你还没有达到这种量级。。目前我也没有用上

openResty部署站点必备这个强烈推荐好用到爆。。谁用谁知道只需要简单几步设置即可让你的网站运行起来。。

20251121110747.jpg

如果是新手这儿可能会卡住这儿有2个关键点说明一下.

1.反向代理

2.静态网站

如果是后端大佬肯定对这个已经熟悉得不能在熟悉了但是如果作为一个新手前端或者从来不接触后端的同学来说这儿可能有点模糊特别是反向代理,先说第一点。gpt回答:

反向代理(Reverse Proxy)是指一种代理服务器,它位于客户端和服务器之间,接收客户端的请求,并根据请求的内容将请求转发到一个或多个后端服务器上,然后将后端服务器的响应返回给客户端。与正向代理不同,反向代理是站在服务器的角度来处理请求,而正向代理是站在客户端的角度。

在反向代理的模式下,客户端并不知道实际的后端服务器是哪个,它只与反向代理服务器进行交互,反向代理服务器再将请求分发给内部的实际服务器,客户端接收到的是反向代理服务器返回的数据。

我的理解通俗一点就一句话你访问这个站点服务器根据你的指令直接代理到本服务器的某个资源或者镜像地址。

这儿说一句我的后端服务,和前端代码都是通过docker镜象打包放在服务器上的,现在AI强得可怕你只需要说出你的述求直接给你生成dockerfile文件,然后服务器上根据你的dockerfile与docker-compose.yml直接打包成一个镜像并启动成一个服务然后通过这个服务地址即可访问了,这儿就不细述docker了。可自行百度或者AI。

总之就是一句话把你的代码打包成一个独立的环境有点类似于虚拟机,但是他是根据你指定的环境生成的。

了解到以上信息就不难了,这儿我反向代理到我的docker镜像这里

20251121112250.jpg

注意这个地址填 写你的云服务器内网地址一般是127.0.0.1:xxxxx,端口号为docker镜像生成 的端口在你写docker-compose.yml里面会有还有特别重要的一点记得把云服务器防火墙对应的端口放开不然你访问不到。。这儿当初找了很求久对于小白来说这儿可能是个巨坑。

一般这一步没什么问题的话且你资源是用docker打包这一步你按这样配置输入地址应该就能访问你的静态资源了。

第2点静态资源这个就简单多了,本地前端项目npm run build dist的静态资源产物直接放到服务器上就行然后把对应的站点目录指定到此静态地址就行,在配置一下Nginx的反向代理即可刷新404问题

上面说的都是前端资源访问,那么我后端服务怎么办呢?
注意我上面说的docker这就体现docker的好处了同理前端一样我一样打成docker包生成docker-compose.yml与dockerfile文件指定好我的命令以及系统环境放在服务器上启动,然后在网站上设置一个反向代理

这里有个好处点说一下。通过反向代理你线上前端访问服务器端api可以直接口地址即可不用写具体域名比如我站点部署在app.app.zcyd.site,那么我接口请求地址就直接当前域名+接口就行。

比如我接口为/api/login那么此时不用请求下面写具体的服务器url地址访问域名会直接当前域名+api。

域名a: www.baidu.com => www.baidu.com/api/login

域名b: app.app.zcyd.site => app.app.zcyd.site/api/login

既不用写具体的服务器域名只需要写/api/login访问网站会自动当前域名+api接口地址

还可以避免很多跨域的问题因为在同源下面。随便域名怎么换这就是反向代理的好处。

基本上以上操作完成之后你的网站就可以初步运行了。接下来就是域名申请了,这一步没有什么困难的根据阿里云服务器上的引导走一路提供资料即可,主要的麻烦点就是需要等这个审核可能十天也可能半个月期间还会打电话问你。。只需要按照步骤走就行了

最后一个就是oss服务器了你的静态资源以及文件还有视频存储的地方不可能放在云服务器上吧云服务器一般硬盘只有几十个g的容量几下就给你撑爆了。。所以得专门有个存放静态资源的地方这里我也是选择的阿里云的oss(当然还有很多比如什么七牛云,tx的很多具体看你自己选择)

20251121141019.jpg

这个也比较简单主要复杂的是上传以及服务器存数据的时候需要注意的几个点

第一步:你需要有一个唯一key来存储资源这里叫做Bucket,这个key必须要唯一建的时候会提示你

第二步:就是上资源到oss上面根据阿里云提供的sdk会生成一个url前端做上传然后放在这儿, 一般的做法是纯前端做上传后端返回加密accessKeyId+accessKeySecret后成签名然后上传到指定目录服务器只存一个文件名 如果你静态资源要求比较严格你后面还可以加上签名信息以及过期时间这样你的静态资源会安全得多。。

第三步就是访问oss资源地址了这一步很简单了 上面第二步你已经把资源存在oss上面了后面需要展示的在只需要url+文件名+签名信息就能拿到具体的资源了这一步直接服务器端返回就行。。具体实现后面代码实现篇会有具体介绍

好了以上就是网站部署及oss资源存储的实现方法了。

结尾:其实现在AI真的很强大你只需要知道整个实现过程不用知道代码怎么实现告诉它,它会直接给出你结果现在感觉想要简单的实现一个个人Blog,或者小网站真的太容易了只需要知道流程其它的全交给AI它会帮你搞定,这对一些人来说是个机会但对一些人来说就是职业瓶颈了。思考一下以后成熟了是不是只需要一个窗口代码都不用写了全部AI生成,我觉得只是时间问题而已。。但是肯定会有新的职业及道路出现!