腾讯云EdgeOne Pages/KV/Functions实战笔记

最近腾讯云Edgeone内测挺火，文档也逐步完善，刚好做个开发笔记；

Pages

Pages是一个全栈开发部署平台，提供从前端页面到动态 API 的无服务器部署体验。

我们先新建一个Vue+Vite项目，执行 npm create vite@latest tencent-edgeone-pages-kv-demo -- --template vue 命令。

也可以拉我刚建的工程 CNB Github

git clone https://cnb.cool/bcrjl/tencent-edgeone-pages-kv-demo
npm install -g pnpm
pnpm install

我们需要全局安装 EdgeOne CLI

npm install -g edgeone

通过 edgeone -v命令，可以查看是否安装成功。通过edgeone -h命令，可以查看相关的所有命令。

安装完成后，执行 edgeone login 登录命令，选择 China 国内站，然后在弹出的浏览器窗口完成登录。

完成后，可以执行 edgeone pages dev 进入本地开发阶段。

该命令会优先读取 edgeone.json 中的 devCommand 参数来启动 dev 服务，若没有该配置则会读取 package.json 的 dev 命令进行启动。切记请勿在 edgeone.json 或 package.json 中配置 edgeone pages dev！
Edge Functions 调试服务有启动次数限制，因此尽量避免频繁退出启动 dev 服务（dev 服务内热更新不会增加启动次数）。

执行命令默认会在本地 8088 端口起一个服务，Pages 函数的服务和 Pages 项目的服务都运行在同一个端口上，无需额外代理。

访问 http://localhost:8088/ 即可查看效果。

本地执行命令可以直接部署。

edgeone pages deploy [<directoryOrZip>] [-n <projectName>] [-e <env>]

参数说明

: 需要部署的文件夹或 ZIP 包路径

-n, --name: 需要部署的项目名称，项目不存在则自动创建新项目

-e, --env: 部署目标环境，可选值: production 或 preview（默认 production）

执行 deploy 时，CLI 会自动构建并部署项目；若手动构建，则需将 Pages Functions 相关文件夹及 package.json 放入输出目录（如 dist），再执行 edgeone pages deploy ./dist

本地部署执行下列命令，部署的项目名为 tencent-edgeone-pages-kv-demo

edgeone pages deploy . -n tencent-edgeone-pages-kv-demo

本地部署

KV存储和Pages Functions

使用KV存储，我们需要在控制台申请。申请通过后，我们需要新建一个命名空间。

创建命名空间

创建成功后，点击进入。选择关联项目 -> 新建一个变量名，并绑定样例工程(tencent-edgeone-pages-kv-demo)。

关联项目

同样也可以Pages控制台，点击项目，设置KV存储，选择绑定项目。

Pages控制台绑定

绑定成功后，我们需在代码中执行 edgeone pages link 关联项目。

> edgeone pages link
√ Input your EdgeOne Pages project name ... tencent-edgeone-pages-kv-demo
[cli][✔] Project tencent-edgeone-pages-kv-demo linked successfully.

PS：此处有一个坑，关联项目后，会在当前项目生成 .edgeone 目录，我们在提交代码到Git的时候，不要把这个文件夹提交。云开发部署的时候会出现异常。

关联成功后，我们再次执行 edgeone pages init 用于初始化 Pages Functions 和 Edgeone Pages 需要的基础环境。

> edgeone pages init
√ Do you want to create an Edge Function example? ... yes
[cli][✔] Edge Function example created!
√ Do you want to create a Node Function example? ... yes
[cli][✔] Node Function example created!
[cli][✔] .gitignore already contains Tencent Cloud EdgeOne configuration, do nothing!
[cli][✔] Project init success!

此时项目中会多出两个文件夹 edge-functions 和 node-functions ，执行 edgeone pages init 过程中会有两个提示，可以看上述命令记录。建议都创建，不影响使用。

下面我们再次允许项目，执行 edgeone pages dev 后；

访问 http://localhost:8088/helloworld-cloud 和 http://localhost:8088/helloworld-edge 可以看到下列效果，说明程序正常运行。

运行效果

现在我们来实现KV存储的使用，我们在项目 edge-functions 下新建一个 kv 目录，用于区分调用方。

新建一个page-view.js 文件。填写以下代码内容，用于计算页面被访问了几次。

export async function onRequestGet({ request, params, env }) {
    // 读取 Key-Value 数据
    const visitCount = await siteConfig.get('visitCount');

    let visitCountInt = Number(visitCount);
    visitCountInt += 1;

    // 写入 Key-Value 数据
    await siteConfig.put('visitCount', String(visitCountInt));

    const res = JSON.stringify({
        visitCount: visitCountInt,
    });

    return new Response(res, {
        headers: {
            'content-type': 'application/json; charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
        },
    });
}

上述代码中，siteConfig 是我们之前绑定时新建的变量名称。访问 http://localhost:8088/kv/page-view 查看效果。

kv效果

现在我们改造首页，将这个访问量在首页显示。将下列代码替换到 src\views\Home.vue 中，原理就是调用Pages Functions生成的一个接口，调用它保存数据到KV存储中。

<template>
    <div>欢迎访问 Tencent-Edgeone-Pages-KV-Demo项目</div>
    <div>当前访问量：{{visitCount}}</div>
</template>

<script>
import { get} from "@/utils/api";

export default {
  name: 'Home',
  data() {
    return{
       visitCount: 0
    }
  },
  created() {
    this.getVisitCount();
  },
  methods: {
    async getVisitCount(){
        await get('/kv/page-view')
        .then(res => {
            this.visitCount = res.visitCount;
        })
    }
  }
}
</script>

访问效果