简介

DCloud为开发者提供了uni发布平台，包括网站发布、App发布和统一门户页面。

前端网页托管是其中的网页发布环节产品。

前端网页托管基于uniCloud的能力，为开发者的html网页提供更快速、更安全、更省心、更便宜的网站发布。

• 更快速：不经过web server，页面和资源直接上cdn，就近访问，速度更快。
• 更安全：不存在传统服务器各种操作系统、web server的漏洞，不用天天想着打补丁。不怕DDoS攻击，永远打不垮的服务。
• 更省心：无需再购买虚拟机、安装操作系统、配置web服务器、处理负载均衡、处理大并发、处理DDoS攻击......您什么都不用管，只需上传您写的页面文件
• 更便宜：uniCloud由DCloud联合阿里云和腾讯云推出，享受云厂商政策优惠。

案例

• HBuilderX文档网站，是一个基于markdown的文档系统，域名：https://hx.dcloud.net.cn/
• uni统计官网现已部署到uniCloud，一份报表，掌握业务全景，域名：https://tongji.dcloud.net.cn
• hello uni-app项目现已部署到uniCloud，线上地址：https://hellouniapp.dcloud.net.cn

开通

首先开发者需要开通uniCloud，登录https://unicloud.dcloud.net.cn/。

然后选择或创建一个服务空间。

最后在上述网页左侧导航点击前端网页托管，即可开始使用。

前端网页托管和云函数没有绑定关系，可以和云函数部署在一个服务空间，也可以是不同的空间，甚至是不同云服务商的空间。

• 阿里云前端网页托管提供一个免费版，收费版定价详见
• 腾讯云前端网页托管需付费，定价由腾讯云提供。详见

注意：

• 腾讯云新计费模式下前端网页托管仅支持按量计费模式，原包年包月套餐已下线。现存包年包月前端网页托管，如果服务空间升级到新套餐，则前端网页托管会自动切换为按量计费模式，请确保余额充足。

使用

开通后，需要把开发者的前端网页，上传到uniCloud的前端网页托管中。

目前提供了2种方式操作：

方式1. 通过uniCloud控制台，在web界面上传。

上传时，可以按文件上传，也可以按文件夹上传。

如果是按文件夹上传，可以选择上传后的目录是否包含上传文件夹的根目录。

方式2. 通过HBuilderX工具上传。

HBuilderX 2.8+起，支持在HBuilderX中直接上传前端网页到uniCloud阿里云版；3.5.1起，支持uniCloud腾讯云版。

在菜单发行中，选择上传网站到服务器。

• 对于uni-app项目，可以先编译为h5，然后直接把编译后的h5上传上去。如下图

• 对于非uni-app项目，可以自己选择要上传的目录，包含html、js、css、图片等静态前端文件接口。如下图

HBuilderX 2.8.9+，支持前端网页托管管理器管理uniCloud阿里云版，3.5.1起，支持uniCloud腾讯云版。

在菜单视图中，或者在左下角状态栏中，点击前端网页托管，可在左侧打开前端网页托管管理器。如下图

在前端网页托管管理器中，可以看到当前用户的服务空间列表，置灰表示该服务空间还没有开通前端网页托管，点击后可根据提示开通。（如上图中置灰的ali1服务空间）。

点击可用的服务空间，在右侧可以看到远端的资源管理器，把本地文件拖进入，即可上传文件。

注意事项

1. 前端网页托管适于uni-app的h5页面发布。尤其是配搭uniCloud云开发，将彻底不用再租用任何传统的服务器。
2. 前端网页托管适于所有前后端分离的网站中的前端页面发布，包括pc网页。
3. 仅支持html、CSS、JavaScript、字体、图片、音视频、json等文件。不支持php、java、python、ruby、go、c++等其他需要额外语言解释器解释的语言文件。
4. 如果开发者需要做a/b test或灰度新功能，需要自己在js里写代码实现，不能通过路由到不同服务器实现。
5. uni-app项目编译为h5时，在项目的manifest中配置二级目录。上传时无需重复设置二级目录。
6. 一个前端网页托管的空间里，可以上传多个网站，用不同目录区分开，访问时使用同一个域名后加不同目录的方式访问。不支持每个目录单独设置不同域名。
7. 部署到不同的服务空间的前端网页托管内的网站，也是可以访问同一个服务空间内的云函数的，只需要在部署云函数的服务空间的跨域配置内添加部署前端页面的域名即可
8. 腾讯云缓存时间默认为1天，阿里云一般情况下文件变动后会一小段时间内自动刷新缓存

基础配置

本章节介绍前端网页托管提供的各种配置项目说明。其中配置域名、网站首页、404页面，是阿里云和腾讯云均支持的，其他配置仅腾讯云支持。

配置域名

前端网页托管，自带一个测试域名，仅用于产品体验及测试可快速体验前端网页部署的完整流程，该域名有如下限制：

• 阿里云每分钟最多60次请求，默认每日仅允许10个公网IP访问，超出部分，需通过手动方式将来源IP加入白名单,IP白名单也会有数量限制
• 腾讯云限速100K/s

业务如要上线商用，请配置自己的正式域名，配置自己的正式域名后，将不受上述测试域名的限制。（尤其注意阿里云测试域名是公共的，任意一个服务空间如果有上传恶意文件被投诉，会导致测试域名被微信内置浏览器整体禁封）

前端网页托管配置自己域名的步骤如下：

1、登录uniCloud控制台。 2、进入前端网页托管页面，选择【基础设置】，单击【添加域名】，进行域名添加，（注意：域名是需要自行购买的）如下图所示：

3、添加后，系统会自动分配一个 CNAME 域名，CNAME 域名不能直接访问，您需要在域名服务提供商处完成 CNAME 配置（将添加的域名CNAME到此域名），配置生效后，新域名即可使用。

阿里云现已支持http强制跳转https，在上述添加界面打开对应开关即可

域名备案

如果你已经有备案过的域名，直接解析过来即可；如果你要新注册域名，首先自行在网上购买，然后注意域名如果想在国内正常绑定阿里云或腾讯云，需要域名备案。这里的备案流程和传统云主机略有不同，涉及一个uniCloud没有固定ip的问题。此时可以去买花生壳的备案服务；也可以临时买一个短期传统云，走传统备案；还有授权码方案，这里有开发者分享的经验贴：https://ask.dcloud.net.cn/article/38116

关于证书内容与私钥

域名如果使用https，则需要证书。证书签发后，可下载到本地，然后将内容复制黏贴到uniCloud web控制台。

注意：各运营商下载证书的后缀可能不同，一般来说，.key文件对应私钥，.pem或.crt文件对应证书。这几种类型文件都是文本内容，可选择记事本打开查看内容。

如果您还没有SSL证书，点此快速获取。

注意事项

• 在阿里云开启了泛域名加速的情况下，对应的子域名可能无法配置到前端网页托管，这种情况下可能会提示：该域名已被添加过，不能重复添加
• 暂不支持绑定中文域名
• 阿里云要求必须有一个备案在阿里才可以绑定，按照uniCloud web控制台提示操作即可，腾讯云没有此条限制。

务必注意，如果你是在腾讯购买并备案的域名需要保留一个到腾讯ip的解析，否则备案会被撤销，阿里云同理。具体细节可以咨询购买域名的云厂商

路由规则

网站首页

设置网站首页文档名

404页面

访问静态网站出错后返回的页面。

如需在阿里云正式版支持history模式，请将404页面配置为网站首页。注意正式版404页面不支持目录，即阿里云仅能在根目录下支持history模式

重定向规则

仅腾讯云支持

支持以下三种组合配置

• 类型：错误码、规则：替换路径。将特定错误码的请求重定向到目标文档，仅支持对4xx错误码。

例：将404错误码重定向至index.html，需做如下配置（uni-app项目使用history模式发行到h5时可以使用此配置）：

类型	描述	规则	替换内容
错误码	404	替换路径	index.html

• 类型：前缀匹配、规则：替换路径。将匹配到特定前缀的请求重定向到目标文档

例：当您删除了images/文件夹（即删除了具有前缀images/的所有对象）。您可以添加重定向规则，将具有前缀images/的任何对象的请求重定向至test.html页面。

类型	描述	规则	替换内容
前缀匹配	images/	替换路径	test.html

• 类型：前缀匹配、规则：替换前缀。将匹配到特定前缀的请求中的前缀替换为替换内容，例：

例：当您将文件夹从docs/重命名为documents/后，用户在访问docs/文件夹会产生错误。所以，您可以将前缀docs/的请求重定向至documents/。

类型	描述	规则	替换内容
前缀匹配	docs/	替换前缀	documents/

注意

• 阿里云每天仅能修改3次路由规则

缓存配置

仅腾讯云支持

• 文件类型：根据填入的文件后缀进行缓存过期时间设置，格式为.jpg形式，不同后缀之间用;间隔。
• 文件夹：根据填入的目录路径进行缓存过期时间设置，格式为/test形式，无需以/结尾，不同目录之间用;间隔。
• 全路径文件：指定完整的文件路径进行缓存过期时间设置，格式为/index.html，支持完整路径加文件类型匹配模式，如/test/*.jpg。

注意

• 缓存过期规则最多可配置10条。
• 多条缓存过期规则之间的优先级为底部优先。
• 缓存过期时间最多可设置365天。

刷新缓存

仅腾讯云、阿里云商用版支持

腾讯云需要填写要刷新的链接，针对填写的链接进行刷新。阿里云对默认域名和自定义域名一键刷新。

注意

• 阿里云商用版限制每小时只允许刷新3次

防盗链配置

仅腾讯云支持

referer 黑名单：

• 若请求的 referer 字段匹配黑名单内设置的内容，CDN 节点拒绝返回该请求信息，直接返回403状态码。
• 若请求的 referer 不匹配黑名单内设置的内容，则 CDN 节点正常返回请求信息。
• 当勾选包含空 referer 选项时，此时若请求 referer 字段为空或无 referer 字段（如浏览器请求），则 CDN 节点拒绝返回该请求信息，返回403状态码。

referer白名单：

• 若请求的 referer 字段匹配白名单设置的内容，则 CDN 节点正常返回请求信息。
• 若请求的 referer 字段不匹配白名单设置的内容，则 CDN 节点拒绝返回该请求信息，会直接返回状态码403。
• 当设置白名单时，CDN 节点只能返回符合该白名单内字符串内容的请求。
• 当勾选包含空 referer 选项时，此时若请求 referer 字段为空或无 referer 字段（如浏览器请求），则 CDN 正常返回请求信息。

配置规则：

防盗链支持域名 / IP 规则，匹配方式为前缀匹配（仅支持路径情况下，域名的前缀匹配不支持），即假设配置名单为www.abc.com，则www.abc.com/123匹配，www.abc.com.cn不匹配；假设配置名单为127.0.0.1，则127.0.0.1/123也会匹配。 防盗链支持通配符匹配，即假设名单为*.qq.com，则www.qq.com、a.qq.com均会匹配。

IP黑白名单配置

仅腾讯云支持

IP 黑名单

用户端 IP 匹配黑名单中的 IP 或 IP 段时 ，访问 CDN 节点时将直接返回403状态码。

IP 白名单

用户端 IP 未匹配白名单中的 IP 或 IP 段时 ，访问 CDN 节点时将直接返回403状态码。

名单规则

• IP 黑名单与 IP 白名单二选一，不可同时配置。
• IP 段仅支持 /8、/16、/24 网段，不支持其他网段。
• 不支持IP：端口形式的黑白名单
• 名单最多可输入50个。

默认域名IP白名单

仅阿里云支持

为保障默认域名不被滥用，阿里云对默认域名做出了如下限制：每天前10个IP可以直接访问，超出10个IP后需要配置IP白名单才可以访问

仅支持配置ipv4，可以配置IP或者IP网段，掩码位数取值范围24-31。最多可同时配置三个，多个之间用逗号隔开，如：123.120.5.235/24,123.123.123.123

当访问IP超限或不在白名单时，前端网页托管将拒绝访问请求，并在页面输出错误码为ClientIpNotAllowed的提示：Your clientIp xxx does not in the whitelist.

您可以通过配置域名来解除默认域名的访问限制。

IP访问限频配置

仅腾讯云支持

配置说明

• 配置开启后，超出 QPS 限制的请求会直接返回514，设置较低频次限制可能会影响您的正常高频用户的使用，请根据业务情况、使用场景合理设置阈值。
• 限频仅针对与单 IP 单节点访问次数进行约束，若恶意用户海量 IP 针对性的进行全网节点攻击，则通过此功能无法进行有效控制。

跨域

web浏览器有跨域限制，A域名的网站如果通过js请求另一个域名B，且另一个B域名并没有放开跨域策略，那么浏览器就会报跨域错误。

在前端网页托管里，托管前端网页的网站就是A域名。要连接的服务器接口就是B域名。

1. B域名是uniCloud的云函数/云对象

也就是业务后台也在uniCloud的云函数或云对象上。此时需要在uniCloud的web控制台的跨域配置中，把A域名填写在Web安全域名中。

2. B域名是开发者自己的传统服务器

需要在开发者自己的传统服务器上配置跨域，允许A域名跨域访问自己。

缓存问题

如果在更新页面后浏览器访问到的仍是旧页面，可以通过如下流程排查

1. 客户端禁用缓存或无痕模式打开是否正常，如果是就是客户端缓存问题，需要等浏览器缓存失效
2. 排除了第一步的影响后，访问页面路径后加参数 比如 /admin#/pages/index/index 改为 /admin?v=1#/pages/index/index，如果正常则是cdn缓存问题，在uniCloud前端网页托管配置页面刷新缓存即可

最佳实践

部署uni-app项目

uni-app项目根据路由模式不同需要做不同的配置

• 使用hash模式时，无需特别的配置即可正常使用

• 使用history模式时可以配置如下规则

  • 腾讯云配置重定向规则将404错误码重定向至index.html
  • 阿里云请配置404页面为index.html

手动部署uni-app项目时需要注意将文件部署在配置的h5基础路径下。HBuilderX一键部署时会自动按照manifest.json内配置的基础路径进行部署

部署多个项目

如果部署多个项目到一个服务空间可以使用不同的基础路径来区分，需要注意的是这多个项目中只有一个项目可以使用history模式。

以一个admin项目和一个用户端项目为例，可以将用户端项目部署在前端网页托管的根目录下，admin项目部署在/admin目录下。通过https://xxx.com/访问用户端项目，通过https://xxx.com/admin/来访问admin项目

注意

• 部署到子目录内的uni-app项目发行前需要将项目下manifest.json内h5配置-->运行的基础路径配置为子目录名，例/admin/

阿里云使用限制

• 前端网页部署限制为最大存储空间用量2GB
• 单文件最大限制为50MB

阿里云CDN安全策略

阿里云前端网页托管在绑定自定义域名后，支持配置CDN安全策略：https://uniapp.dcloud.net.cn/uniCloud/cdn-security-policy.html