如何使用 Vercel 托管静态网站

2024-04-25 08:10:55

今天向大家介绍 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 还有很强大的功能，这些需要自己去摸索。

码农公寓

Github 部署

本地部署

部署 Nest.js 后端项目

部署 Typecho 博客

常见问题

总结

相关文章

部署 `Nest.js` 后端项目

部署 `Typecho` 博客