这次讲一下如何用 Vercel 部署 Typecho 动态博客

本文写于 2023 年 1 月 6 日，文中我的问题你可能不会出现，出现其他问题请自行百度

由于我这里有一个玄学问题：Vercel 不能拉取 GitHub 的信息，所以部署部分都使用 Vercel CLI 进行

自己就是按照这个来的，实测没问题（再次：我没问题不代表其他人没问题）

2023 年 1 月 10 日更新：

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

0. 准备工作

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

1. 新建数据库

进入 Railway

第一个：编辑 install.php

定位到第773行至775行，把这3行注释掉（前面加个#）

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

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

第二个：添加 vercel.json

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

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

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

<?php$file=__DIR__.'/..'.$_SERVER["PHP_SELF"];if(file_exists($file)){returnfalse;}else{require_once__DIR__.'/../index.php';}#echo $_SERVER["PHP_SELF"];123456789101112

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

第四个：添加 config.inc.php

<?php/**
 * Typecho Blog Platform
 * @license    GNU General Public License 2.0
 * @version    $Id$
 *//** 开启https */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__);/** 载入API支持 */require_once'Typecho/Common.php';/** 程序初始化 */Typecho_Common::init();/** 定义数据库参数 */$db=newTypecho_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);1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

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

3. 配置 Vercel 并部署

注册 Vercel（有 Vercel 账号的可以跳过这步）

首先搞一个账号（可以直接用 GitHub 登录）

登录进去后就可以了

通过 npm 安装 Vercel CLI

终端运行（Linux 的要加 sudo）

npm-ginstall vercel
 
注意这里一定要加 -g，因为只有安装到 global 目录才能直接从终端运行（我用 Windows，只有 global 目录被添加到了 path 中）
 
 
进入你要部署的目录
 
 
vc login
 
登录，就用你刚才在官网上的方式登录
 
 
直接打开显示的链接，登录后如果出现 CLI Login Success! 的字样就表示成功了。
 
 
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: `yarninstall`, `pnpminstall`, or `npminstall`
- 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://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://vercel.com/用户名/项目名称/settings
123456789101112131415161718
 
 
如果出现 Production 就可以，有显示 Preview 时候需要运行
 
 
vc --prod1
 
 
然后是重要的一步。
 
 
由于 *.vercel.app 在中国无法访问，所以我们需要绑定一个域名。
 
 
这里我用我的域名 xuanxuan1231.ml 做示范，我的域名是在 Freenom 上搞到的，所以我们要做 DNS 的操作也要在 Freenom 上搞。
 
 
由于我之前测试 Freenom 设置 DNS 记录很容易出现玄学问题（一个未知问题），所以我就直接把 DNS 托管给了 Gcore。
 
 
如果出现类似这样的界面，那么说明成功了。
 
 
4. 安装 Typecho
 
 
在地址栏后面加上 /install.php，比如我的域名是 xuanxuan1231.ml，那么我就应该填 xuanxuan1231.ml/install.php
 
  知道这些可不要瞎动我的东西 – 当然，我安装完肯定要重命名我的安装程序 php 文件哒~大家也是不要把管理的东西直接暴露在网络上 
 
回归正题，如果出现下图，表示你已经成功进入 Typecho 安装程序。
 
				
我使用的脚手架是Vue CLI ，过程中都很简单，出错的是跨域问题，在本地webpack反向代理，但部署到vercel后没有转发请求，还需要我们自己设置一番。
vercel 真的太好用了，一键自动化部署，步骤超级超级简单。
我把跟着coderwhy敲的项目部署上去了：https://my-bms.vercel.app/login
在使用vercel 要注意这几个问题，
1、注意vercel 默认的打包路径是dist，如果你更改了outputDir， 要记得在vercel 项目setting里重写，否则会出错
				
一、介绍一下vercel
vercel 是一个站点托管平台，提供CDN加速，同类的平台有Netlify 和 Github Pages，相比之下，vercel 国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。
但是vercel只是针对个人用户免费，teams是收费的
首先vercel零配置部署，第二访问速度比github-
4. 在 Vercel 的项目设置中，将你的版本控制系统与 Vercel 进行关联，以便自动部署。
5. 配置 Vercel 的构建设置，以告知 Vercel 如何构建和运行你的 Flask 应用。对于 Flask 应用，你可以使用 `vercel.json` 文件来定义构建和运行命令。例如，以下是一个示例的 `vercel.json` 文件：
```json
  "version": 2,
  "builds": [
    { "src": "app.py", "use": "@vercel/python" }
  "routes": [
    { "src": "/(.*)", "dest": "/app.py" }
这个示例假设你的 Flask 应用的入口文件是 `app.py`。`builds` 部分告诉 Vercel 使用 `@vercel/python` 构建器来构建你的应用。`routes` 部分将所有请求重定向到 `app.py`。
6. 提交并推送你的代码更改到版本控制系统。
7. Vercel 将自动检测到你的代码更改，并在构建和部署过程中运行你的 Flask 应用。
8. 部署完成后，Vercel 将提供一个 URL，你可以访问该 URL 来查看部署的 Flask 应用。
这样，你的 Flask 应用就成功地部署在 Vercel 上了。请注意，Vercel 主要用于静态网站和前端应用的部署，对于需要长时间运行的后端应用，可能不是最佳选择。对于更复杂的后端应用，你可能需要考虑其他云平台，如 Heroku 或 AWS。
                    CSDN-Ada助手: 
                    恭喜你写了这么一篇实用的博客！CLNC/CNS服务器在搭建过程中确实需要一些技术的支持，但是你讲解得非常清晰，对于初学者来说非常友好。同时，你的配合百度直连的方法也很实用，让我们能够更加高效地使用网络。希望你能继续写出更多实用的技术文章，例如网络安全、软件开发等方面的内容，让我们能够更好地掌握技术。加油！
CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply7 看奖励名单。
                linux/openwrt软路由搭建CNS/CLNC图文教程
                    CSDN-Ada助手: 
                    不知道 CS入门 技能树是否可以帮到你：https://edu.csdn.net/skill/gml?utm_source=AI_act_gml
                Linux/Ubuntu安装卸载docker和镜像地址
                    CSDN-Ada助手: 
                    不知道 CS入门 技能树是否可以帮到你：https://edu.csdn.net/skill/gml?utm_source=AI_act_gml