集成云开发 CloudBase Framework 框架「Function」插件

当前博客托管在GitHub Pages服务，受网络环境因素影响，访问不稳定，速度慢。

集成腾讯云开发环境，实现一键部署，自动部署博客静态资源到腾讯云静态网站。

云开发 CloudBase Framework 框架「Function」插件： 通过云开发 **CloudBase Framework (opens new window) (opens new window)**框架将静态网站一键部署云开发环境，提供生产环境可用的 CDN 加速、自动弹性伸缩的高性能网站服务。可以搭配其他插件如 Node 插件、函数插件实现云端一体开发。

功能特性

• 节约成本: 资源伸缩，弹性扩缩容，灵活计费，极大节约资源成本
• 极简配置：自动检测框架，无须配置，同时支持没有使用框架的纯静态项目
• 框架支持: 无缝支持原生和前端框架构建的项目
  • Vue
  • React
  • Next SPA
  • Nuxt SPA
  • VuePress

使用方法

官方文档：https://docs.cloudbase.net/cli-v1/intro.html

在所有开始之前，您需要登录 腾讯云 - 云开发控制台 (opens new window) (opens new window)，确保已经开通了云开发服务，并且创建了按量付费环境。

步骤一. 准备工作

1. 安装 CloudBase CLI

npm install -g @cloudbase/cli@latest

步骤二. 初始化插件

进入网站项目文件目录，执行命令行

如果目前已有网站应用项目

cloudbase

如果想全新开始一个项目，可以直接执行 init 来从模板开始一个网站项目

cloudbase init

步骤四.CLI配置

1. 使用该 CLI 是需要进行登录的，如果 CLI 检测到你当前没有登录的话会自动打开浏览器跳转到腾讯云登录页面，登录成功后返回命令行。

2. 继续下一步操作，选择一个合适的服务器地点

3. 接下来选择关联环境，如果当前没有的话可会提示选择创建新环境。

   创建新环境地址：https://console.cloud.tencent.com/tcb/env/index?rid=4&from=cli&action=CreateEnv

4. 这里选择使用VuePress模板进行创建，开通环境，完成后开始初始化环境

5. 创建成功环境后返回命令行，创建成功后会提示生成对应配置的项目结构。

步骤五. 一键部署

后续重新部署环境只需要执行一键部署指令

cloudbase framework deploy


部署成功


自动分配了网站入口域名：https://blog-4groexxn4c110ef5-1305981473.tcloudbaseapp.com

域名配置

使用阿里云云解析功能，配置解析设置 papis.cn，添加一条URL解析记录，指向腾讯云自动分配的域名地址


配置

配置示例

cloudbase init 之后会创建云开发的配置文件 cloudbaserc.json，可在配置文件的 plugins 里修改和写入插件配置

{
  "envId": "{{envId}}",
  "framework": {
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "installCommand": "npm install --prefer-offline --no-audit --progress=false",
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/path",
          "ignore": [".git", ".github", "node_modules", "cloudbaserc.js"]
        }
      }
    }
  }
}

修改配置

默认情况下不需要任何额外配置即可使用，以下配置参数针对有特殊需求的场景

这里修改静态文件输出路径

"outputPath": "docs/.vuepress/dist"