云开发网站托管悄悄上线了 Next.js 的支持
我们知道部署web应用程序的最佳方式是作为静态HTML应用程序,因为他对搜索引擎很友好,速度快等等,这对我们写个人博客这样的小型网站无异于非常nice。如果你的应用可以作为静态HTML,那么可以试试Next.js。
它可以把一个应用程序作为静态页面导出,那么导出的静态页面怎么部署到静态托管呢?我们以云开发静态托管服务为例。
什么是云开发?
可以理解为它为我们提前做好了很多的事(例如负载均衡,冷备热备,网络安全等等),使我们只需关注业务逻辑即可。就像包饺子一样,提前有人给你准备好饺子馅和发好的面,我们只需要包饺子就可以了。详细了解可以到云开发查看哦~
首先我们需要准备的环境以及工具如下:
必要环境:
node.js
开通云环境
开发工具:
create-next-app
@cloudbase/cli
下面我们来详细操作~
首先我们进行安装create-next-app:
npm i create-next-app
以及云开发工具@cloudbase/cli:
npm i @cloudbase/cli
npm命令是在安装node.js时自动安装的,所以不需要单独安装。
构建Next项目
利用脚手架创建一个项目:
npx create-next-app 项目名称
此处项目名称为你的项目根目录名称。
创建完成后我们进入到项目中:
cd 项目名称
我们需要在跟目录中新建一个next.config.js文件:
module.exports = {
exportTrailingSlash: true,
exportPathMap: function () {
return {
'/': {page: '/'}
};
},
};
如果你希望生成的静态文件不只包含首页和404页面(Next自动生成),那么可以在next.config.js中加入**'/about': {page: '/about/about'}**
,并在pages下新建一个about文件夹并创建about.js文件写入,如果只是测试生成首页和404就够了,那么直接跳到第4步即可:
const about = () => (
<div>about</div>
)
export default about
附上next.config.js添加后的完整代码:
module.exports = {
exportTrailingSlash: true,
exportPathMap: function () {
return {
'/': {page: '/'},
'/about': {page: '/about/about'}
};
},
};
在 package 中加入一个 script 命令:
"export": "next export"
我们运行下列代码来生成静态文件:
npm run build
npm run export
我们发现根目录中生成了一个out文件夹,该文件夹下的所有文件就是我们生成的静态文件,所以接下来要做的事就是开通云环境并将其部署到静态网站托管。
开通云环境
我们打开云开发并创建一个新的环境:
这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。
创建成功后会自动对环境进行初始化(此过程大概2~3分钟)。
初始化成功后我们进到对应的环境中找到静态网站托管并开始使用:
等待静态网站服务初始化后就可以使用啦~
部署上传
首先在项目根目录下执行云开发登录命令:
tcb login
在弹出的页面进行授权操作:
进行上传操作,这里我们希望out文件夹下所有的文件一并上传,所以,我们执行命令
tcb hosting:deploy ./out -e 你的云开发环境ID
云环境ID可在环境ID下查看
上传完成后我们在静态网站托管中可以看到我们out目录下的所有文件:
云开发默认提供了一个与环境对应的默认域名,可以通过这个默认域名进行访问。
总结
我们总结一下步骤,大体上只有三步
创建Next项目并生成静态文件
开通云环境与静态网站托管服务
使用云开发工具cloudbase/cli命令进行部署上传
One More Thing
大家都知道,Next.js 一个很强大的功能就是可以做 SSR (Server Side Render),云开发也支持了 SSR,你期待吗?
公众号:腾讯云云开发
腾讯云云开发:https://cloudbase.net
云开发控制台:https://console.cloud.tencent.com/tcb?from=12304
☁
更多精彩
扫描二维码了解更多
云开发网站托管悄悄上线了 Next.js 的支持的更多相关文章
- 基于云开发 CloudBase 搭建在线视频会议应用教程
基于云开发 CloudBase 搭建在线视频会议应用 在线视频会议应用是基于浏览器的能力 WebRTC 以及 腾讯云开发 CloudBase 能力构建而成的应用. 在云开发的助力下, 一个复杂的在线会 ...
- 微信小程序又一爆炸功能上线-云开发
云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...
- 如何将你的 Vue.js 项目部署在云开发静态托管之上
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...
- 云开发静态网站托管现已支持 Angular 应用
云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML.CSS.JavaScript.字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托 ...
- 新能力 | 云开发CMS内容管理系统,5分钟搞定小程序管理后台
小程序·云开发的云调用能力,让用户可以免鉴权快速调用微信的开放能力,极大节约了开发成本.现在,大家期待已久的云开发 CMS 内容管理系统,终于上线啦!顺便提示,接下来还可以二次开发哦! 云开发 CMS ...
- 云开发中的战斗机 Laf,让你像写博客一样写代码
各位云原生搬砖师 and PPT 架构师,你们有没有想过像写文章一样方便地写代码呢? 怎样才能像写文章一样写代码? 理想的需求应该是可以在线编写.调试函数,不用重启服务,随时随地在 Web 上查看函数 ...
- 【微信小程序云开发】从陌生到熟悉
前言 微信小程序在9月10号正式上线了云开发的功能,弱化后端和运维概念,以前开发一个小程序需要申请一个小程序,准备一个https的域名,开发需要一个前端一个服务端,有了云开发只有申请一个小程序,一个前 ...
- 微信小程序云开发
什么是云开发? 云开发是由腾讯云联合微信团队为开发者提供的 包含 云函数.云数据库和云文件存储能力的后端云服务 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 A ...
- 微信小程序之云开发一
最近听说微信小程序发布了云开发,可以不需要购买服务器,就能开发小程序和发布小程序,对于动辄千元的服务器,极大的节约了开发成本,受不住诱惑,我就开始了小程序的云开发,目前项目已上线,亲测不收费,闲不住的 ...
随机推荐
- CentOS7配置环境变量
执行命令env查看当前环境变量: [duanyongchun@192 3DUnetCNN]$ env 例如扩展环境变量为/tmp/bin: PATH=$PATH:/tmp/bin 查看特定环境变量命令 ...
- [noip模拟]B<构造>
[题目描述] 在两个n*m的网格上染色,每个网格中被染色的格子必须是一个四联通块(没有任何格子被染色也可以),四联通块是指所有染了色的格子可以通过网格的边联通,现在给出哪些格子在两个网格上都被染色了, ...
- 是什么是递归?-[all]-[编程理论]
递归是所有编程语言中,都会讨论到的一个问题. Content Of Table 递归的通俗认识 编程领域的抽象 一个最简单的示例 一点总结 栈溢出问题 本示例的一点拓展说明 ### 递归的通俗认识 编 ...
- Java toString解析
Java toString解析 我们知道,Java所有的类都是Object类的派生类,toString就是Object类中的一个方法. 我们看看它的源代码. public String toStrin ...
- 混合app禁止切换输入法英文键盘方案
前言 在此介绍的是h5的部分,非原生,原生可以直接属性禁止. 需求 禁止中文出现在input中.(如果你认为不显示出来中文,那么请往下看) 效果:只显示英文键盘. 遇到的问题 1.在三星低版本上会出现 ...
- 【php】面向对象(一)
1. 学习面向对象的目标: a) 语法的学习: b) 编程思想的学习: i. 过程化: ii. 面向对象:2. 比较(有对象和没对象的区别) a) 没对象: i. 我饿了 自己做饭 ii. 我渴了 自 ...
- AntSword 中国蚁剑的下载安装配置(附下载文件)
文章更新于:2020-04-11 按照惯例,需要的文件附上链接放在文首. 文件一: antSword-2.1.8.1.zip.7z 文件大小: 14.3 MB 下载链接: 中国蚁剑 v2.1.8.1 ...
- go语言goroutine
Go语言goroutine 在别的语言里想要在一个程序中实现多任务,如python,python实现多任务可以使用多进程.多线程.携程.但多进程占用资源,多线程无法发挥多核的优势(GIL),pytho ...
- (js描述的)数据结构 [数组的一些补充](1)
(js描述的)数据结构 [数组的一些补充](1) 1. js的数组: 1.优点:高度封装,对于数组的操作就是调用API 2.普通语言的数组: 1.优点:根据index来查询,修改数据效率很高 2.缺点 ...
- Eclipse(Eclipse for android)代码自动提示设置
java代码和xml资源代码在有的eclipse中可以自己提示,但有的并不支持这个功能,还得我们人为去调整,主要原因是因为你们下载的elipse的渠道不同,获得的版本有的官方原版,有的是个人备份版等等 ...