Vercel+Railway部署Typecho动态博客（超详细图文教程-Vercel CLI办法）-编程学习网

这次讲一下如何用 Vercel 部署 Typecho 动态博客
本文写于 2023 年 1 月 6 日，文中我的问题你可能不会出现，出现其他问题请自行百度
由于我这里有一个玄学问题：Vercel 不能拉取 GitHub 的信息，所以部署部分都使用 Vercel CLI 进行
自己就是按照这个来的，实测没问题（再次：我没问题不代表其他人没问题）

2023 年 8 月 24 日更新：

Railway每个月只有5刀的限额，需要提前备份数据库。超过限额后没有备份的数据就没了，需要删掉账户重新注册才可以
发现了一个叫 Zeabur 的东西，没用过，好像是需要 7 天一续，可以自己试试

2023 年 1 月 10 日更新：

我这里出现了一个情况：Vercel 拉取 GitHub 信息竟然成功了！我后期会再写一篇关于 GitHub 的教程~

0. 准备工作

首先你需要搞到一个域名（这里我用 Freenom 的一个 ml 域名），电脑上装好 vscode、node.js 和 npm（把以上的一切都配置好，不能出差错），确认Vercel 官网能正常访问（重要！）

1. 新建数据库

进入Railway
Railway首页
点击Start a New Project
新建项目
点击Provision MySQL 获得项目
点击Claim Project，把这个项目变成自己的
在弹出窗口登录（没有账户的可以用 GitHub，也可以直接新注册一个账号）
（默认会新建一个不同名的项目，~~如果之前有项目但是消失的话不要像我一样慌张~~ 比如我的就是 numerous-birds）
查看数据库信息
单击那个MySQL，然后进到Variables里面，这就是你的数据库信息。网页保留备用。

2. 配置Typecho

**
去 Typecho 官网
Typecho Official Site
点击立即下载 Typecho下载页面
这里推荐下载正式版，你要是想用开发版也不是不行，但是有风险。
（官方下载默认调用 GitHub 的仓库，速度可能不行，请自行解决）
压缩包根目录
下载下来之后是一个压缩包，把它解压到本地目录里。我们发现它的根目录是这样的 ⇑ 。

这时我们需要编辑和添加几个文件。
第一个：编辑 install.php
定位到第773行至775行，把这3行注释掉（前面加个#）

#    if (!$writeable) {//第773行#        $errors[] = _t('上传目录无法写入, 请手动将安装目录下的 %s 目录的权限设置为可写然后继续升级', $uploadDir);#    }//第775行

这里注释掉是因为在安装的时候安装程序无法访问目录，我们只要跳过这一段的检测就可以了，安装成功后没有大问题（有一个小问题，就是写东西的时候好像不能上传附件）

第二个：添加 vercel.json

{  "functions": {    "api/index.php": {      "runtime": "vercel-php@0.5.2"    }  },  "routes": [{ "src": "/(.*)", "dest": "/api/index.php" }]}

这里有一个点，runtime 这里有一个 vercel-php@0.5.2 ，0.5.2 是本文撰写时的最新版本，有的教程上写的是旧版本，使用旧版本会因为与 Vercel 网站上设置的 Node.js 版本不兼容。这里填写的版本号要以实际情况为准，要不然部署的时候就会报错。

第三个：创建 api 目录并在目录下添加 index.php

$file= __DIR__ . '/..'.$_SERVER["PHP_SELF"];if(file_exists($file)){   return false;}else{    require_once __DIR__ . '/../index.php';}#echo $_SERVER["PHP_SELF"];

这里应该没有什么要注意的地方了，就是要新建一个 api 文件夹。

第四个：添加 config.inc.php

define('__TYPECHO_SECURE__',true);define('__TYPECHO_ROOT_DIR__', dirname(__FILE__));define('__TYPECHO_PLUGIN_DIR__', '/usr/plugins');define('__TYPECHO_THEME_DIR__', '/usr/themes');define('__TYPECHO_ADMIN_DIR__', '/admin/');@set_include_path(get_include_path() . PATH_SEPARATOR .__TYPECHO_ROOT_DIR__ . '/var' . PATH_SEPARATOR .__TYPECHO_ROOT_DIR__ . __TYPECHO_PLUGIN_DIR__);require_once 'Typecho/Common.php';Typecho_Common::init();$db = new Typecho_Db('Pdo_Mysql', 'typecho_');$db->addServer(array (  'host' => '数据库地址',  'user' => '数据库用户名',  'password' => '数据库密码',  'charset' => 'utf8mb4',  'port' => '数据库端口号',  'database' => '数据库名称',  'engine' => 'MyISAM',), Typecho_Db::READ | Typecho_Db::WRITE);Typecho_Db::set($db);

这个文件最后 定义数据库参数 这里要填入第一步 Railway 的数据库信息。

3. 配置 Vercel 并部署

注册 Vercel（有 Vercel 账号的可以跳过这步）
首先搞一个账号（可以直接用 GitHub 登录）
登录进去后就可以了

通过 npm 安装 Vercel CLI
终端运行（Linux 的要加 sudo）

npm -g install vercel

注意这里一定要加 -g，因为只有安装到 global 目录才能直接从终端运行（我用 Windows，只有 global 目录被添加到了 path 中）

部署网站
登录
进入你要部署的目录
终端输入

vc login

部署
接着刚才的，终端输入

vc

一路回车应该就可以，下面放上我部署完的结果

Vercel CLI 28.10.1? Set up and deploy “部署路径”? [Y/n] y （直接回车）? Which scope do you want to deploy to? 用户名（直接回车）? Link to existing project? [y/N] n（直接回车）? What’s your project’s name? 项目名称（直接回车）? In which directory is your code located? ./（直接回车）Local settings detected in vercel.json:No framework detected. Default Project Settings:- Build Command: `npm run vercel-build` or `npm run build`- Development Command: None- Install Command: `yarn install`, `pnpm install`, or `npm install`- Output Directory: `public` if it exists, or `.`? Want to modify these settings? [y/N] n （直接回车）🔗  Linked to 用户名/项目名称 (created .vercel and added it to .gitignore)🔍  Inspect: https://https://blog.csdn.net/abc1324354/article/details/vercel.com/用户名/项目名称/部署事件唯一码 [3s]✅  Production: Vercel 自动分配的以 vercel.app 结尾的网址 [24s]📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).💡  To change the domain or build command, go to https://https://blog.csdn.net/abc1324354/article/details/vercel.com/用户名/项目名称/settings

如果出现 Production 就可以，有显示 Preview 时候需要运行

vc --prod

然后是重要的一步。

绑定域名
由于 *.vercel.app 在中国无法访问，所以我们需要绑定一个域名。
这里我用我的域名 xuanxuan1231.ml 做示范，我的域名是在 Freenom 上搞到的，所以我们要做 DNS 的操作也要在 Freenom 上搞。
由于我之前测试 Freenom 设置 DNS 记录很容易出现玄学问题（一个未知问题），所以我就直接把 DNS 托管给了 Gcore。
Gcore DNS 配置
DNS 配置完成是这样的。A 记录和 CNAME 记录不要按着官方的填，按我这个填，这个是对于中国优化后的 IP 和 CNAME – 参考：Vercel国内无法访问解决方案 - 闻心阁
Vercel 配置域名
进入 Vercel 官网，找到自己的项目，点Settings，然后Domains，根据图中操作。

微信翻译的，有些域名中的 xuanxuan 被翻译成了宣宣，并且有的翻译得不对，谅解
添加后结果
如果出现像我那样的勾，那么说明 OK 了。
如果出现 Invalid Configuration，那么说明你配置的 DNS 不对。
可以测试一下。

如果出现类似这样的界面，那么说明成功了。