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

前言

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

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

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

2fc4a8f69c3c1540d2307ec10eda72d3_up-91152ded6812a32f5ffbca5733091d892ed.jpg

坑点

  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,可参考下图。


5e0cb85687684942cb6a5ad33a495d05_up-b7fa14e244e6d36818e35175a65d158c1ea.jpg

858b80be9ec37dd7df072f18d98c886a_up-6afe5cb311a2b540ed8b9c99e09a4f3f518.jpg

f9c4bbe2d2c66f394463e77314ef408d_up-6d71372b92fd9318819dbec29eb7a971c3d.jpg

b7c436308c20ae1555e00825ab4614d0_up-3a4037c41a42b3a54caa52909b19058e46d.jpg

域名解析绑定

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

ab7799bdf33b3c3c2ec184ddeacfcfd7_up-67e72c36ff9a49cf905670265e71d38324b.jpg

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

1a4d08cbdce449b90269210296492074_up-adef4e8b2f0f0e0687d78a23007c1bef10a.jpg

b9186fc5c2ff475322f92c39c10148c5_up-15fd04b6f351b5c71883ba82a9a082f74bb.jpg

如果说服务商那边解析成功了,并且 Vercel 平台也显示域名验证成功,也就是前面提到的坑点一。这种一般是 DNS 缓存原因,可以换一台电脑或用手机访问测试,如果能就等待一下,直到能 ping 通。还有 Vercel 会自动办法 SSL 证书,所以后面只需要留意日期就可以,下图我暂时放了一个 index.html 页面,动态程序演示要放到 Railway 后。

b0b87a60989b04cfa0f7a8857a3214bc_up-50ee462c0a580b6f4e27527929a16d58718.png

675e57ecc8c8f2701d6048e08fc27aac_up-c2e79e39f17216253c1854b0e4b795a4095.png

Railway 配置

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

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

51b8f0f05a400a92ea793777a9c2c468_up-70ecff61bf6a31b1597eb0ea34eacbb2ebc.png

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

58f3ed9bcdc1e1e121d6c191232baaeb_up-ee2135a2a21b1e48d282d3b3f142df23f84.jpg

后端程序部署

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

8d562e282a3de8f933a95cba9496e69d_up-9945de093319c91fe22c68248d05eb3dbd5.jpg

Python 的 Hello World

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

{
    "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\. 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)
5a5cc1e7d89742b2c5e9c206aeb23806_up-937bcc010f81bdfc46a9eb6e747c5c1c64c.png

Typecho 安装

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

58535810461f6282d8ab5d16d6c7d5a5_up-434105d00d3ac37544846e148cf0368f1eb.png

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

[图片上传失败...(image-25aa9b-1724303635344)]

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

0fc5f9594acb7e08f1cfbe686516bbfe_up-2d78ac0f2c4b65fa494bfe97cbfd2472034.jpg

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

a4f1a3f02645cf2ded764b34ef6eaf82_up-95a80019fe7e24af4cd2c0bc36d5d7a653f.png

写在后面

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,135评论 6 514
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,317评论 3 397
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,596评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,481评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,492评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,153评论 1 309
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,737评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,657评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,193评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,276评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,420评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,093评论 5 349
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,783评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,262评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,390评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,787评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,427评论 2 359

推荐阅读更多精彩内容