今天向大家介绍 Vercel 托管静态网站的几种方式，不熟悉 Vercel 的伙伴可以看一下之前的文章：Vercel: 开发者免费的网站托管平台
Github 部署
-
打开 Vercel 登录界面，推荐使用
GitHub账号授权登录。 -
来到控制台界面，点击
Add New按钮：
-
然后点击
Import按钮，选择你要部署的项目仓库：
-
选择你的配置，这里一般情况我们默认就可以，然后点击
Deploy开始构建:
-
构建成功后，你就可以在控制台看见刚才部署的项目了：
-
Vercel会默认给一个域名，但一般情况我们都需要自定义域名， 进入你的项目，点击Settings-Domains，这里可以自定义域名，记得先把域名解析指向cname.vercel-dns.com.：
恭喜你，这时候打开域名应该就可以看到你部署的项目了，而且还是自带 https协议 的，怎么样，是不是很惊喜，这只是它很常用并且小众的功能
本地部署
- 执行命令全局安装
vercel依赖：
npm i -g vercel
- 进入你需要托管项目的文件夹，打开终端，执行命令：
vercel login
选择 GitHub 登录，回车，就会自动打开浏览器登录，如果看到此信息，则证明登录成功：
- 执行命令进行项目推送
vercel
-
Set up and deploy “~\Desktop\vueProject\vue-demo”? [Y/n]
Y -
Which scope do you want to deploy to?
问你是不是要部署到这个账号上面。回车即可 -
Link to existing project?
是不要连接现在的项目，大写的是N，直接回车即可 -
What’s your project’s name?
项目名称，直接默认即可（看自己个人情况），回车 -
In which directory is your code located?
是不是要项目的所有文件，默认回车 -
Want to override the settings?
识别出了我的项目是vue 项目，问我们是不是这些配置，如果不是就修改，是的话默认回车这里我们如果不需要额外的配置，都默认配置就好，然后等待构建部署。
- 部署到生产
执行完以上操作后，
Vercel控制台会给我们一个预览地址Preview，如果我们确认没问题，需执行命令vercel --prod把代码推送到vercel平台更新
vercel --prod // 推送到生产环境
这样我们就完成了本地部署，适用于 Vue、React 等常见的单页面应用和传统的 html 项目
部署 Nest.js 后端项目
- 在项目根目录新建
vercel.json文件，内容如下：
{
"version": 2,
"name": "nest-server",
"builds": [
{
"src": "src/main.ts",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "src/main.ts",
"methods": [
"GET",
"POST",
"PUT",
"DELETE",
"PATCH"
]
}
]
}
- 接下来的步骤参考
Github部署和本地部署
这里我们可以使用
Nest.js实现一些简单的API服务
部署 Typecho 博客
- 去 Typecho官网 下载代码，解压进入终端，在根目录添加
vercel.json文件，内容如下：
{
"functions": {
"api/index.php": {
"runtime": "vercel-php@0.6.0"
}
},
"routes": [
{
"src": "/(.*)",
"dest": "/api/index.php"
}
]
}
这里需要注意一下 vercel-php 对应的 php 版本，具体的内容可查看：vercel-php
- 根目录新建
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"];
- 根目录下新建
config.inc.php文件，内容如下：
<?php
/` 开启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' => '3306',
'database' => '数据库昵称',
'engine' => 'MyISAM',
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);
-
接下来的步骤参考
Github部署和本地部署 -
部署成功后，打开生产域名，进行初始化配置。
- 需要用户自己搭建
mysql服务并开放外网访问端口，如果考虑安全性，不建议采用这种方式，建议自己买台服务器进行部署- 不能上传本地图片媒体等文件，限制范围比较大。
常见问题
- 部署
Vue、React等项目刷新路由404
解决办法：在项目根目录创建一个vercel.json文件，内容如下：
{
"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}
总结
- 建议使用
Vercel部署单页面应用，动态后端服务接口应用，还是建议部署在自己服务器管理。 Vercel还有很强大的功能，这些需要自己去摸索。
