网站LOGO
白雾茫茫丶
页面加载中
7月21日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    如何使用 Vercel 托管静态网站
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    如何使用 Vercel 托管静态网站

    谢明伟 · 原创 ·
    技术分享实用工具 · Vercel
    共 4993 字 · 约 3 分钟 · 834
    本文最后更新于2024年04月24日,已经过了87天没有更新,若内容或图片失效,请留言反馈
    今天向大家介绍 Vercel 托管静态网站的几种方式,不熟悉 Vercel 的伙伴可以看一下之前的文章:
    Vercel: 开发者免费的网站托管平台
    实用工具 000 头像谢明伟

    Github 部署

    1. 打开 Vercel 登录界面,推荐使用 GitHub账号 授权登录。
    2. 来到控制台界面,点击 Add New 按钮:
    3. 然后点击 Import 按钮,选择你要部署的项目仓库:
    4. 选择你的配置,这里一般情况我们默认就可以,然后点击 Deploy 开始构建:
    5. 构建成功后,你就可以在控制台看见刚才部署的项目了:
    6. Vercel 会默认给一个域名,但一般情况我们都需要自定义域名, 进入你的项目,点击 Settings-Domains ,这里可以自定义域名,记得先把域名解析指向 cname.vercel-dns.com.

    恭喜你,这时候打开域名应该就可以看到你部署的项目了,而且还是自带 https协议 的,怎么样,是不是很惊喜,这只是它很常用并且小众的功能

    本地部署

    1. 执行命令全局安装 vercel 依赖:

      powershell 代码:
       npm i -g vercel
    2. 进入你需要托管项目的文件夹,打开终端,执行命令:

      powershell 代码:
       vercel login 

      选择 GitHub 登录,回车,就会自动打开浏览器登录:
      如果看到此信息,则证明登录成功:
    3. 执行命令进行项目推送

      powershell 代码:
       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 项目,问我们是不是这些配置,如果不是就修改,是的话默认回车
      这里我们如果不需要额外的配置,都默认配置就好,然后等待构建部署。

    4. 部署到生产

      执行完以上操作后,Vercel 控制台会给我们一个预览地址 Preview,如果我们确认没问题,需执行命令 vercel --prod 把代码推送到 vercel 平台更新

      powershell 代码:
       vercel --prod // 推送到生产环境

    这样我们就完成了本地部署,适用于 Vue、React 等常见的单页面应用和传统的 html 项目

    部署 Nest.js 后端项目

    1. 在项目根目录新建 vercel.json 文件,内容如下:

      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"
         ]
       }
      ]
      }
    2. 接下来的步骤参考 Github部署本地部署
      这里我们可以使用 Nest.js 实现一些简单的 API服务

    部署 Typecho 博客

    1. Typecho官网 下载代码,解压进入终端,在根目录添加 vercel.json 文件,内容如下:

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

    这里需要注意一下 vercel-php 对应的 php 版本,具体的内容可查看:vercel-php

    1. 根目录新建 api 文件夹,里面新建文件 index.php,内容如下:

      php 代码:
      <?php
      $file= __DIR__ . '/..'.$_SERVER["PHP_SELF"];
      
      if(file_exists($file))
      {
        return false;
      }
      else
      {
      require_once __DIR__ . '/../index.php';
      }
      #echo $_SERVER["PHP_SELF"];
    2. 根目录下新建 config.inc.php 文件,内容如下:

      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);
    3. 接下来的步骤参考 Github部署本地部署
    4. 部署成功后,打开生产域名,进行初始化配置。

    • 需要用户自己搭建 mysql服务 并开放外网访问端口,如果考虑安全性,不建议采用这种方式,建议自己买台服务器进行部署
    • 不能上传本地图片媒体等文件,限制范围比较大。

    常见问题

    1. 部署Vue、React等项目刷新路由404
      解决办法:在项目根目录创建一个 vercel.json 文件,内容如下:

      json 代码:
      {
       "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
      }

    总结

    1. 建议使用 Vercel 部署单页面应用,动态后端服务接口应用,还是建议部署在自己服务器管理。
    2. Vercel 还有很强大的功能,这些需要自己去摸索。
    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    1

    条评论
    我要发表评论
    1. 头像
      · · 河北-秦皇岛
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前
      头像
      沙发

      优点就是可以无服务器托管静态网站,或者其他框架驱动的网站,还可以反代一些站点,可以自定义域名,缺点就是对新手不友好,都得靠别人写好的源代码部署,好像也不支持自定义证书,服务器也不在国内,访问时不时出问题。

      评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 一天前 在线

    🕛

    本站已运行 2 年 202 天 3 小时 9 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事