Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Next.js + 云开发Webify 打造绝佳网站

Next.js + 云开发Webify 打造绝佳网站

原创
作者头像
腾讯云开发TCB
发布于 2021-09-10 10:01:59
发布于 2021-09-10 10:01:59
1.6K00
代码可运行
举报
运行总次数:0
代码可运行

Next.js酷在哪里?

之前使用 Next.js + strapi 做了一个简单博客站点也顺道写了一篇 Next.js 简明教程,之后 Next 本身一直在迅猛发展。利用代 js 能力来说做到了:

  • 极佳的开发体验
  • 极佳的网站最佳的”动“,“静”平衡

从特性上来说,支持:

  • SSR(Server Side Rendering) 提供 getServerSideProps 方法,在用户访问时请求数据,适用于实时数据页面。
  • SSG(Static Site Generation) 提供 getStaticProps,getStaticPaths 方法来预先生产静态页面;

而更酷的一点是:使用 fallback,revalidate 来支持一定的动态性。

这种能“动”的 SSG 自然是我所需要的,保持静态访问,而又能在我新增修改文章的时候,站点能够自动更新。绝佳!!

为什么还需要来Webify“折腾”一番?

既然上面已经很酷了,为什么会有今天的文章,为什么还需要折腾一番?

原因也很简单:成本略高,为了不错的访问速度,你需要一台性能不错的虚拟机,一定的带宽。对于一般个人博客,投入不划算。

在这里就隆重地有请我们的解决方案:腾讯云开发Webify,简单来说就是类似 vercel 的 Serverless 托管服务,不过支持更多的框架,而且是国内服务商,便宜且访问速度一流。

有图为证:

而且现在托管,能免费领300元无门槛代金券,香啊~感兴趣的可以点击下方链接了解一下:https://cloud.tencent.com/developer/article/1871549

CloudBase Webify实战

对于一般文章使用类似 github 管理的就简单了,Webify支持版本 Github、Gitlab、Gitee 服务商,听说即将支持 Coding:

  • Vue.js (vue-cli)
  • React.js (create-react-app)
  • Hexo
  • Gatsby.js
  • Angular
  • Next.js SSG
  • Nuxt.js SSG
  • 以及自动适配框架

以本博客 next 为例,Webify实际上使用时了 next export 的能力,构建后,直接部署静态文件到 server。

如果你的博客文章,直接使用 md,git 管理,看到这里就OK了,git 提交,Webify自动会重新部署你的站点。cool~~

问题是如果你的站点数据来源于类似 strapi 这种 serverless cms 怎么办?next export 不支持next SSG中“动”的特性(fallback,revalidate)。

Webify高阶——自动化Webify

其实方法也很简单,加一个桥接服务,让你的 serverless cms 的更新变动到 git 就好。

具体以 strapi 为例子:

  1. strapi 数据发布
  2. web hook到自定义的桥接服务。
  3. 桥接服务更新站点git。
  4. Weify触发重新部署。

当然如果后续 webify 支持更多的重新部署方式,这里会更简单一点。

这样乍看,似乎又回到了原点,我们还是需要一台服务器,这里又要引入本文的另一个嘉宾了,tcb 云函数。上述这种按需调用的服务,使用云函数最合适了,你不需要一个一直开机的虚拟机,你只需要在更新文章时候才需要唤起云函数就好,随用随停,成本低廉。

按照本博客的场景,我们让桥接服务在运行的时候,自动生成站点的 sitemap 到github来一举两得。

  • 用来sitemap生成站点地图xml;
  • 使用@octokit/rest,@octokit/plugin-create-or-update-text-file来更新github中文件。

下面是精简过的代码:

生成站点地图sitemap.xml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const {
    SitemapStream,
    streamToPromise
} = require('sitemap')
const {
    Readable,
    Transform,
    pipeline
} = require('stream')
const {
    apiRequest,
    getPostsWithGraphql
} = require('./request')
const PaginationLimit = 30
module.exports = ({
    hostname,
    cmsUrl
}) => {

    async function getPostSitemap() {
        const smStream = new SitemapStream({
            hostname,
        });
        let page = 0;
        const postStream = new Readable({
            objectMode: true,
            async read(size) {
                const result = await getPostsWithGraphql(`${cmsUrl}/graphql`, page++, PaginationLimit);
                if (result.error || !Array.isArray(result.data.posts)) {
                    this.push(null);
                } else {
                    result.data.posts.forEach((item) => {
                        this.push(item);
                    });
                    if (result.data.posts.length < PaginationLimit) {
                        this.push(null);
                    }
                }
            },
        });

        const trans = new Transform({
            objectMode: true,
            transform(data, encoding, callback) {
                callback(null, {
                    url: `/p/${data.book.slug || data.book.uuid}/${
              data.slug || data.uuid
            }`,
                    changefreq: 'daily',
                    priority: 1,
                    lastmod: new Date(data.updated_at),
                });
            },
        });

        const buffer = await streamToPromise(pipeline(postStream, trans, smStream, (e) => {
            // throw e;
        }))
        return {
            path: 'public/sitemap.xml',
            content: buffer.toString()
        }
    }
    
    return Promise.all([
        // getHomeSitemap(),
        // getBookSitemap(),
        getPostSitemap()
    ])
}

更新Github中文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
'use strict';
const {
    Octokit
} = require("@octokit/rest");
const {
    createOrUpdateTextFile,
} = require("@octokit/plugin-create-or-update-text-file");
const {
    throttling
} = require("@octokit/plugin-throttling");
const getSitemaps = require('./sitemap')

const MyOctokit = Octokit.plugin(createOrUpdateTextFile, throttling);

exports.main = async (event, context) => {
    const {
        headers: {
            authorization,
            'x-strapi-event': strapiEvent
        },
        body
    } = event;
    const {
        model,
        entry
    } = JSON.parse(body)
    const {
        CMS_TOKEN,
        GITHUB_ACCESS_TOKEN,
        BLOG_URL = 'https://hicc.pro',
        CMS_URL = 'https://cms.hicc.pro'
    } = process.env;
    // strapi 上添加密钥来确保安全
    if (CMS_TOKEN !== authorization) {
        return {
            doTrigger: false
        }
    }
    let doTrigger = false // TODO: 识别真正的发布
    const siteMaps = await getSitemaps({
        hostname: BLOG_URL,
        cmsUrl: CMS_URL
    })

    const octokit = new MyOctokit({
        auth: GITHUB_ACCESS_TOKEN,
        throttle: {
            onRateLimit: (retryAfter, options) => {
                console.warn(
                    `Request quota exhausted for request ${options.method} ${options.url}`
                );

                // Retry twice after hitting a rate limit error, then give up
                if (options.request.retryCount <= 2) {
                    console.log(`Retrying after ${retryAfter} seconds!`);
                    return true;
                }
            },
            onAbuseLimit: (retryAfter, options) => {
                // does not retry, only logs a warning
                console.warn(
                    `Abuse detected for request ${options.method} ${options.url}`
                );
            },
        },
    });
    await Promise.all(siteMaps.map(({
        path,
        content
    }) => {
        return octokit.createOrUpdateTextFile({
            // replace the owner and email with your own details
            owner: "xxx",
            repo: "xxx",
            path,
            message: `feat: update ${path} programatically`,
            content: content,
            branch: 'master',
            sha: '',
            committer: {
                name: "xxx",
                email: "xxxx@outlook.com",
            },
            author: {
                name: "xxx",
                email: "xxxx@outlook.com",
            },
        })
    }))


    return {
        doTrigger
    }
};

作者:hicc,腾讯高级前端开发工程师。

欢迎访问Webify官网:https://webify.cloudbase.net/

个人站点扶持计划,免费领300元无门槛代金券:https://webify.cloudbase.net/blog/personal-site-plan

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Next.js + 腾讯云开发Webify 打造绝佳网站
之前使用Next.js + strapi做了一个简单博客站点也顺道写了一篇Next.js 简明教程,之后Next本身一直在迅猛发展。利用现代js能力来说做到了:
小刀c
2022/09/21
1.4K0
Next.js + 腾讯云开发Webify 打造绝佳网站
CloudBase Webify,专为Web开发者打造的云上开发部署平台
今天我们非常荣幸地宣布腾讯云 CloudBase Webify (中文名:Web应用托管)正式上线,这是一个专为 Web 开发者打造的云上开发、部署平台,帮助开发者快速开发、预览、部署自己的 Web 应用。
腾讯云开发TCB
2021/07/23
2.8K0
CloudBase Webify,专为Web开发者打造的云上开发部署平台
基于 Next.js 和云开发 CMS 的内容型网站应用实战开发
董沅鑫,云开发 CloudBase 团队研发工程师,侧重于前端工程化、node 服务开发,业余时间出没在 xin-tan.com。
腾讯云开发TCB
2020/06/03
5.4K0
CloudBase CMS + Next.js:轻松构建一个内容丰富的站点
试想一下,如果你现在要为你自己或者你所在的组织创建一个强内容的站点,同时要求好的 SEO(搜素引擎优化),比如博客,你会怎么做呢?
腾讯云开发TCB
2021/04/26
2.5K0
CloudBase CMS + Next.js:轻松构建一个内容丰富的站点
云开发Webify 不用服务器也能部署博客
1.从腾讯云静态网站托管迁移 2.从腾讯云 COS 迁移 3.从 Vercel 迁移 4.从云服务器迁移
小唐同学.
2022/03/21
3.1K0
云开发 Webify 常见问题解答
A:应用首次构建时,需要为您的应用下发CDN配置,CDN生效需要2-5分钟时间,生效后您的应用方可访问。
腾讯云开发TCB
2021/08/04
9210
云开发 Webify 常见问题解答
Next.js 简明教程
最近用Next.js + Editor.js 撸了一个博客系统。开发起来甚是畅滑,如果你喜欢React,又有同构的需求,不妨由此文入手。
小刀c
2022/09/21
3K0
Next.js 简明教程
带你入门云开发实践总结篇
CloudBase 支持使用 .env 类型文件作为主要数据源,使用不同的后缀区分不同的阶段、场景,如 .env.development 可以表示开发阶段的配置,.env.production 可以表示生产环境的配置
前端进阶之旅
2022/07/29
5.8K0
带你入门云开发实践总结篇
React 必学SSR框架——next.js
F首先我们就回顾一下,我们到底是怎么告别了使用 php/jsp 做服务器端渲染,进入前后端分离的客户端渲染时代,又为什么重新回到了服务端渲染。
狂奔滴小马
2021/11/15
7.7K0
React 必学SSR框架——next.js
【实战】Next.js + 云函数开发一个面试刷题网站
前段时间开发了一个面试刷题小程序——面试狗,主要使用了 uniapp + unicloud 云开发实现,详情可以看这篇文章《【实战】使用 uniapp 开发一个面试刷题小程序》 ,今天我们来开发一个与之对应的 PC 版面试刷题网站。
狂奔滴小马
2022/09/21
4.9K0
【实战】Next.js + 云函数开发一个面试刷题网站
用云开发Webify,5分钟上线新网站!
相信每位学编程的同学都想要拥有一个自己的网站,比如个人博客,可以拿来记录自己的学习过程、分享自己的文章、展示作品等,从而激励自己持续学习和总结。
腾讯云开发TCB
2021/07/27
1.6K0
用云开发Webify,5分钟上线新网站!
使用Next.js创建Blog
Next.js 已经成为 React 应用程序最重要的框架之一。它可以帮助开发人员在没有模板的情况下构建更好的服务器端渲染 React 应用程序。
用户6256742
2024/06/12
1800
使用Next.js创建Blog
基于云开发 CloudBase 搭建在线视频会议应用
「在线视频会议应用」是基于浏览器的能力 WebRTC 以及云开发 CloudBase 能力构建而成的应用,在云开发的助力下,一个复杂的在线会议应用,1人、1-2天即可完成搭建。 本应用用到的能力、工具、框架有: CloudBase Framework 用于项目基础目录结构生成, 一键部署 Simple Peer 流行的 WebRTC 库 云开发CloudBase - 云函数, 包括云函数的定时调用 云开发CloudBase - 数据库 云开发CloudBase - 静态网站托管 React Ant d
腾讯云开发TCB
2020/10/14
1.5K0
Coding 网站托管迁移腾讯云云开发 Webify
谈起自己的 blog,搭建之初是在上大学的时候,源码自然是放到了 gh 上,然后在设置里面开启 Pages 就可以获取到 blog 的外网访问链接。毕竟是静态页面不需要任何计算环境,只要是个能托管网页的云服务都可以。最开始的时候还是在本地 hexo g 生成页面,然后再将 public 文件夹 git push 到 gh 上。后来学会用 Travis-CI 持续集成来跑 hexo g,这样就再也不用在本地 hexo g 了,只需要将 .md 格式的文章 git push 到仓库上,Travis-CI 就会开始 Run 起来,不过用的毕竟是免费的 Travis-CI,SLA 不是特别的高,有时候就会遇到推送了半天任务还是在 pending 状态,一直在排队影响使用体验……再后来 gh 推出了 Actions,果断将 Travis-CI 迁移到了 Actions,毕竟是原生的服务虽然刚上手的时候不太习惯,但是照着各种例子编写 .yml 文件很快就搞定了。
远哥制造
2021/12/23
35.2K0
Next.js基础教程:入门与实战
Next.js是一个流行的React框架,用于构建服务器 - 渲染(SSR)和静态网站生成(SSG)的现代Web应用程序。它提供了一种简单而高效的方式来开发具有高性能和良好可扩展性的Web应用。其独特之处在于能够充分利用服务器端渲染的优势,提高首屏加载速度,改善搜索引擎优化(SEO),同时也方便与React的各种生态系统集成。
Front_Yue
2025/01/06
3360
Next.js基础教程:入门与实战
Next.js + TypeScript 搭建一个简易的博客系统
来记录下学习(踩坑)的过程,这篇文章的代码都在https://github.com/Maricaya/nextjs-blog-1啦。
coder_koala
2020/09/17
3.9K0
小程序·云开发实战 - 体重记录小程序
前一段看到朋友圈里总是有人用txt记录体重,就特别想写一个记录体重的小程序, 现在小程序的云开发有云函数、数据库,真的挺好用,很适合个人开发者,服务器域名什么都不用管,云开发让你完全不用操心这些东西。
腾讯云开发TCB
2019/08/05
6.1K0
云开发 For Web:一站式开发下一代 Serverless Web 应用
近两年来,Serverless 无疑是前端圈里最火热的话题之一,在各种技术峰会、各种技术文章里都能看到它的身影。如果你是一名前端开发者,一定很奇怪:
腾讯云开发TCB
2020/03/27
2.1K0
云开发 For Web:一站式开发下一代 Serverless Web 应用
Next.js/Nuxt.js/Nest.js/Fastify
安利下:《next.js静态页面渲染技术(静态生成和服务端渲染):BSR/SSG/SSG》
周陆军博客
2023/05/14
3.2K0
uniapp 云开发 精讲
uniCloud 是 DCloud 联合阿里云、腾讯云、支付宝小程序云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
万少
2025/02/10
1020
uniapp 云开发 精讲
推荐阅读
相关推荐
Next.js + 腾讯云开发Webify 打造绝佳网站
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文