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

<?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

<?php
/**
 * Typecho Blog Platform
 *
 * @copyright  Copyright (c) 2008 Typecho team (http://www.typecho.org)
 * @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 = 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

登录,就用你刚才在官网上的方式登录
直接打开显示的链接,登录后如果出现 CLI Login Success! 的字样就表示成功了。
Vercel CLI 登录成功

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

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://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

如果出现 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 不对。
可以测试一下。
测试
如果出现类似这样的界面,那么说明成功了。

4. 安装 Typecho

在地址栏后面加上 /install.php,比如我的域名是 xuanxuan1231.ml,那么我就应该填 xuanxuan1231.ml/install.php

知道这些可不要瞎动我的东西 – 当然,我安装完肯定要重命名我的安装程序 php 文件哒~大家也是不要把管理的东西直接暴露在网络上

回归正题,如果出现下图,表示你已经成功进入 Typecho 安装程序。
Typecho 安装程序
点击我准备好了,开始下一步
如果成功的话,那么应该显示下图

如果显示上传目录无法写入的话,重新检查你有没有把 install.php 的 773 至 775 行注释掉
注释完之后保存,终端打开部署的目录,输入以下命令并等待至显示 ✅ Production 再次尝试即可。

vc --prod

第二步
初始化配置不用动,高级设置也不用动,直接确认,开始安装就行。
如果出现下图,表示你已进入第三步。
第三步
填入你希望的用户名和登录密码
点击继续安装
如果出现下图,表示已经安装成功!
在这里插入图片描述
我们可以进入博客来看,也可以进入管理后台愉快的写文啦~

下次教如何让 Typecho 支持第三方登录(依托一个第三方插件)。

Vercel是一个现代化的全球部署平台,它支持多种类型的应用程序,包括前端、后端和静态网站。虽然Vercel主要用于前端应用程序的部署,但也可以用于部署Spring Boot应用程序。 要在Vercel部署Spring Boot应用程序,可以按照以下步骤进行操作: 1. 首先,确保你的Spring Boot应用程序已经打包成可执行的JAR文件。你可以使用Maven或Gradle来构建你的应用程序,并生成JAR文件。 2. 接下来,你需要创建一个新的Vercel项目。你可以在Vercel的官方网站上注册一个账号,并创建一个新的项目。 3. 在Vercel项目中,选择"Import Project"选项,并选择你的Spring Boot应用程序的JAR文件进行导入。 4. Vercel将自动检测到你的应用程序是一个Java应用程序,并为你提供一些配置选项。你可以根据需要进行配置,例如指定环境变量、设置路由规则等。 5. 完成配置后,Vercel将开始构建和部署你的Spring Boot应用程序。它会自动为你创建一个服务器,并将你的应用程序部署到该服务器上。 6. 部署完成后,Vercel将为你提供一个URL,你可以使用该URL来访问和测试你的Spring Boot应用程序。 需要注意的是,Vercel主要用于部署前端应用程序,对于后端应用程序来说,它可能不是最佳选择。如果你的Spring Boot应用程序需要与数据库、缓存等后端服务进行交互,你可能需要考虑使用其他专门的云平台,如AWS、Azure或Google Cloud等。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值