阅读视图

发现新文章,点击刷新页面。

零成本搭建个人 APP 和小程序后台

前言

前面也说了,通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示,但是要零成本得完成将用户信息存储下来,并实现数据交互呢?

我开始是想用云文档,种种原因,我还是希望有个自己能二次修改的后台,于是就选择了 Vercel+Railway 方式。

虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。

图片

坑点

  1. 域名已经解析成功了,但是一直无法访问 Vercel 上的页面。
  2. vercel-php 版本和 Vercel 上的 NodeJs 版本冲突,和一些配置问题。
  3. 代码提交推送后,Vercel 没有完成自动部署等等。

准备

  • Vercel: 略过详细介绍,暂且把他理解成云服务器,入门配置免费,需要注册登陆。
  • Railway: 同样略过详细介绍,暂且把他理解成云数据库,几乎免费,需要注册登陆。
  • GitHub: 先创建存放程序的仓库,也几乎完全免费,需要注册登陆。
  • Typecho: 博客程序 ,其他语言的像 Flask 也行,开源免费,下载或自行编写。

Vercel 配置

进入 vercel 官网,推荐使用 GitHub 账号登陆,配置主要完成仓库的代码导入,域名解析绑定,项目部署和相关参数设置。

代码导入

登陆后点击 “Import Git Repository”,然后选择仓库安装并设置权限,接着是 Configure Project,Congratulations 都可以直接下一步进入到 Production Deployment,可参考下图。

图片

图片

图片

图片

域名解析绑定

进入到 “Production Deployment” 时,我们可以看到项目已经创建成功。不但可以看到 source 源仓库分支和提交信息,还能看到 Domains 分配的域名,但是该域名被墙无法访问。

图片

点击上面的 “Domains” 按钮(在 Visit 左边),输入即将要解析过来的域名,系统会展示需要用 CNAM 类型被解析的域名,复制该 value 去到自己的域名服务商控制台,添加一条 CNAME 解析记录。

图片

图片

如果说服务商那边解析成功了,并且 Vercel 平台也显示域名验证成功,也就是前面提到的坑点一。这种一般是 DNS 缓存原因,可以换一台电脑或用手机访问测试,如果能就等待一下,直到能 ping 通。

还有 Vercel 会自动办法 SSL 证书,所以后面只需要留意日期就可以,下图我暂时放了一个 index.html 页面,动态程序演示要放到 Railway 后。

图片

图片

Railway 配置

进入 Railway 官网,同样推荐 GitHub 账号登陆,进来后选择 “MySQL” 类型,直接按默认后进入到 production,最主要的是我们需要分配给他的 Host,账号和密码,数据库名等等。

需要注意的是 Railway 每个月只有 5 刀的限额,需要提前备份数据库。超过限额后没有备份的数据就没了,需要删掉账户重新注册才可以。

图片

打开 Data,选择 “Connect” -> “Public Network”,Connection URL 就是该产品对外的连接 Host,用户密码,端口等信息。只需要复制下来,用于在程序中连接配置,Navicat for MySQL 图形化工具连接失败,我试过了。

图片

后端程序部署

以下简单介绍 php 和 python 两种语言的 hello world,和有数据库连接的博客程序,第一步是后端入口文件都不能放在项目的根目录下,放在新建文件夹的 api 中,并添加 vercel.json(用于配置路由和分配内存等信息)。

图片

Python 的 Hello World

新建 vercel.json 文件,和用于打印的 py 文件,最后访问自定义的域名。

1
2
3
4
5
{
"rewrites": [
{ "source": "/(.*)", "destination": "/api/index" }
]
}

PHP 的 Hello World

需要注意的是部署 php 项目要用到 vercel-php,而 vercel-php 又与 NodeJs 版本有一定对应关系。目前 2024 年 8 月 vercel 平台默认 Node 版本是 20.x,我下面演示的是 vercel-php@0.6.0,所以再部署前需要先将 Node 版本切换为 18.x,如下图。(以下有两种情况的报错都要 node 和 vercel-php 版本相关)

1
2
3
4
5
部署后报错合集

1. PHP Built-In Server HTTP error: Error: connect ECONNREFUSED 127.0.0.1:8000

2. The following Serverless Functions contain an invalid "runtime": - api/index (nodejs18.x)

图片

Typecho 安装

从官网下载源码后,找到 config.inc.php 文件,将数据库的参数修改为 Railway 复制过来的配置。

图片

然后通过 Git 提交代码到仓库,如果发现没有部署成功,可以进入 vercel 平台的 Deployments 查看部署记录,有报错的根据信息修改。

图片

提交并成功部署后,输入自定义域名,并带上 install.php 进行安装,然后用 pdo 方式安装数据库,上面的 railway 参数就再输入一遍。

图片

安装成功后,可以到 Railway 查看到新增的表格,这就表示全部都能正常使用了。

图片

写在后面

当然 Vercel 也不只是可以用来部署动静态网站或 API,也能搭一些国外工具的镜像,像 npm 之类的。

还有一种是,比如国外有一些很好用还免费的 API,你想用在小程序进行调用,但是在小程序后台填写这些 API 访问域名时无法添加,没有国内的备案信息。

这时候就可以用自己备案过的域名再 Vercel 中搭建一个中转,小程序请求自己的域名,而部署的程序请求别人的地址,更多玩法待后续更新了……

Snipaste_2024-07-31_14-08-07

利用uptimerobot检测站点状态并且部署监控页面

前言

之前介绍过如何使用哪吒监控监控自己的服务器和站点,但那是需要服务器的。

今天教大家如何不用服务器监控自己的站点。

教程

1.首先打开uptimerobot官网,点击右上角的Register fo FREE注册一个账号

2.找到页面中的Add New monitor添加自己的网站

3.输入网站,可以选择邮件通知或其他通知方式,当你网站访问不了的时候它就会通知你

4.添加完网站就去首页的Integrations & API中找到API

5.新建一个Read-only API key,这样别人就不能通过你的API捣乱了

6.访问https://github.com/Qikaile/uptime-status项目

7.Fork到自己的仓库然后更改config.js文件里的内容

8.打开Vercel,然后添加刚刚fork的项目等待部署完成

9.到项目的setting中找到domain,然后填写自己准备好的域名即可

无需服务器利用vercel搭建typecho博客

前言

众所周知,vercel可以搭建静态内容,但是不知道的是也可以搭建typecho博客吧。

教程

准备工作

Github账号,Vercel账号,域名

开始

1.首先访问https://github.com/zycwer/vercel-typecho/并且fork到自己的仓库(最好是下载然后上传到自己仓库)

2.为了防止数据库的泄露,最好将仓库变成私有

3.上传主题文件到usr/theme文件夹下,上传插件到usr/plugins文件夹下

4.使用github登录vercel,点击页面右上角的ADD NEW中的Project

5.找到刚刚fork的项目或者上传的项目点击import并且点击deploy等待部署完成

6.找到项目中的storage,再点击Connect Database,选择其中的Postgres,剩下的直接点右下角的确定就行了,

7.找到项目中的settings,再点击Domains,输入框中输入自己的域名再点击ADD

8.到域名服务商处添加cname解析,记录为cname.vercel-dns.com

9.访问域名,会跳转到typecho安装,数据库选择Po驱动postgres数据库

10.数据库的地址是刚刚创建的postgres数据库中的@后面以及:5432前面的内容

11.数据库用户名是default,数据库密码是default:后面到@前面的内容,数据库名是verceldb

12.它会提示你到在github仓库中创建一个名为config.inc.php的文件,然后将代码填写到其中。

13.等待vercel重新部署完成,期间不要动任何东西,然后点击我已创建,开始安装。

14.之后就是填写管理员账号和密码就可以了。至此typecho就创建成功了。

问题

本项目的最大问题就是有些主题和插件会更改文件内容,不仅仅是更改数据库的内容,比如handsome主题插件,所以很多主题是用不了的,这就要我们一个个试。

 

推荐几个能够通过Vercel部署的项目

前言

上篇文章告诉大家如何白嫖免费域名,于是就想着搭建几个项目

项目

1.Lobe Chat

开源地址:https://github.com/lobehub/lobe-chat

2.ChatGpt-Next-Web

开源地址:https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web

3.DailyHot

开源地址:https://github.com/imsyy/DailyHot

这个需要fork到自己仓库,然后通过Vercel部署。

4.uptimerobot api监控页面

开源地址:https://github.com/freejishu/StatusLive

也是需要fork到自己仓库,然后通过vercel部署。

5.发现导航

开源地址:https://github.com/xjh22222228/nav

也是需要fork到自己仓库,然后通过vercel部署。

零成本搭建个人 APP 和小程序后台

前言

前面也说了,通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示,但是要零成本得完成将用户信息存储下来,并实现数据交互呢?

我开始是想用云文档,种种原因,我还是希望有个自己能二次修改的后台,于是就选择了 Vercel+Railway 方式。

虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。

图片

坑点

  1. 域名已经解析成功了,但是一直无法访问 Vercel 上的页面。
  2. vercel-php 版本和 Vercel 上的 NodeJs 版本冲突,和一些配置问题。
  3. 代码提交推送后,Vercel 没有完成自动部署等等。

准备

  • Vercel: 略过详细介绍,暂且把他理解成云服务器,入门配置免费,需要注册登陆。
  • Railway: 同样略过详细介绍,暂且把他理解成云数据库,几乎免费,需要注册登陆。
  • GitHub: 先创建存放程序的仓库,也几乎完全免费,需要注册登陆。
  • Typecho: 博客程序 ,其他语言的像 Flask 也行,开源免费,下载或自行编写。

Vercel 配置

进入 vercel 官网,推荐使用 GitHub 账号登陆,配置主要完成仓库的代码导入,域名解析绑定,项目部署和相关参数设置。

代码导入

登陆后点击 “Import Git Repository”,然后选择仓库安装并设置权限,接着是 Configure Project,Congratulations 都可以直接下一步进入到 Production Deployment,可参考下图。

图片

图片

图片

图片

域名解析绑定

进入到 “Production Deployment” 时,我们可以看到项目已经创建成功。不但可以看到 source 源仓库分支和提交信息,还能看到 Domains 分配的域名,但是该域名被墙无法访问。

图片

点击上面的 “Domains” 按钮(在 Visit 左边),输入即将要解析过来的域名,系统会展示需要用 CNAM 类型被解析的域名,复制该 value 去到自己的域名服务商控制台,添加一条 CNAME 解析记录。

图片

图片

如果说服务商那边解析成功了,并且 Vercel 平台也显示域名验证成功,也就是前面提到的坑点一。这种一般是 DNS 缓存原因,可以换一台电脑或用手机访问测试,如果能就等待一下,直到能 ping 通。

还有 Vercel 会自动办法 SSL 证书,所以后面只需要留意日期就可以,下图我暂时放了一个 index.html 页面,动态程序演示要放到 Railway 后。

图片

图片

Railway 配置

进入 Railway 官网,同样推荐 GitHub 账号登陆,进来后选择 “MySQL” 类型,直接按默认后进入到 production,最主要的是我们需要分配给他的 Host,账号和密码,数据库名等等。

需要注意的是 Railway 每个月只有 5 刀的限额,需要提前备份数据库。超过限额后没有备份的数据就没了,需要删掉账户重新注册才可以。

图片

打开 Data,选择 “Connect” -> “Public Network”,Connection URL 就是该产品对外的连接 Host,用户密码,端口等信息。只需要复制下来,用于在程序中连接配置,Navicat for MySQL 图形化工具连接失败,我试过了。

图片

后端程序部署

以下简单介绍 php 和 python 两种语言的 hello world,和有数据库连接的博客程序,第一步是后端入口文件都不能放在项目的根目录下,放在新建文件夹的 api 中,并添加 vercel.json(用于配置路由和分配内存等信息)。

图片

Python 的 Hello World

新建 vercel.json 文件,和用于打印的 py 文件,最后访问自定义的域名。

1
2
3
4
5
{
"rewrites": [
{ "source": "/(.*)", "destination": "/api/index" }
]
}

PHP 的 Hello World

需要注意的是部署 php 项目要用到 vercel-php,而 vercel-php 又与 NodeJs 版本有一定对应关系。目前 2024 年 8 月 vercel 平台默认 Node 版本是 20.x,我下面演示的是 vercel-php@0.6.0,所以再部署前需要先将 Node 版本切换为 18.x,如下图。(以下有两种情况的报错都要 node 和 vercel-php 版本相关)

1
2
3
4
5
部署后报错合集

1. PHP Built-In Server HTTP error: Error: connect ECONNREFUSED 127.0.0.1:8000

2. The following Serverless Functions contain an invalid "runtime": - api/index (nodejs18.x)

图片

Typecho 安装

从官网下载源码后,找到 config.inc.php 文件,将数据库的参数修改为 Railway 复制过来的配置。

图片

然后通过 Git 提交代码到仓库,如果发现没有部署成功,可以进入 vercel 平台的 Deployments 查看部署记录,有报错的根据信息修改。

图片

提交并成功部署后,输入自定义域名,并带上 install.php 进行安装,然后用 pdo 方式安装数据库,上面的 railway 参数就再输入一遍。

图片

安装成功后,可以到 Railway 查看到新增的表格,这就表示全部都能正常使用了。

图片

写在后面

当然 Vercel 也不只是可以用来部署动静态网站或 API,也能搭一些国外工具的镜像,像 npm 之类的。

还有一种是,比如国外有一些很好用还免费的 API,你想用在小程序进行调用,但是在小程序后台填写这些 API 访问域名时无法添加,没有国内的备案信息。

这时候就可以用自己备案过的域名再 Vercel 中搭建一个中转,小程序请求自己的域名,而部署的程序请求别人的地址,更多玩法待后续更新了……

Snipaste_2024-07-31_14-08-07

❌