## 简介

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

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

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

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

## 案例

- HBuilderX插件开发网站，是一个基于markdown的文档系统，域名：[https://hx.dcloud.net.cn/](https://hx.dcloud.net.cn/)。
- hello uni-app项目现已部署到uniCloud，线上地址：[https://hellouniapp.dcloud.net.cn](https://hellouniapp.dcloud.net.cn)

## 开通

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

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

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

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

- 阿里云`前端网页托管`免费。
- 腾讯云`前端网页托管`需付费开通，定价由腾讯云提供。腾讯云的不同档套餐有不同规格，见文末附表：


## 使用

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

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

方式1. 通过[uniCloud控制台](https://unicloud.dcloud.net.cn/)，在web界面上传。

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

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

![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/unicloud-web-hosting.jpg)

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

  > HBuilderX 2.8+起，支持在HBuilderX中直接上传前端网页到uniCloud中。

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

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

![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/unicloud-hx-hosting.jpg)

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

![](https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/unicloud-hx-hosting-h5.jpg)

**注意事项**

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. 部署到不同的服务空间的`前端网页托管`内的网站，也是可以访问同一个服务空间内的云函数的，只需要在部署云函数的服务空间的`h5域名配置`内添加部署前端页面的域名即可

## 基础配置@base-config

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

### 配置域名@domain

`前端网页托管`，自带一个测试域名，该域名限速。如商用，请配置自己的域名。

测试域名具体限制：
  + 阿里云每分钟最多300次请求
  + 腾讯云默认域名限速100K/s

绑定自己的正式域名后不受上述测试域名的限制影响

1. 登录[uniCloud控制台](https://unicloud.dcloud.net.cn/)。
2. 进入前端网页托管页面，选择【基础设置】，单击【添加域名】，进行域名添加，如下图所示：

![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/uni-app/uniCloud/uniCloud-hosting-domain-add.jpg)

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

**关于证书内容与私钥**

申请证书时通常会有下载选项，下载到证书之后找到对应Nginx的证书（包含一个crt文件和一个key文件），以文本形式打开crt文件即可看到证书内容，同样的key文件对应着私钥。

**注意事项**

- 阿里云新增域名之后可能需要几个小时才能让其他配置对新域名生效，后续会优化此问题
- 使用阿里云时遇到绑定的域名访问网址会下载html文件的情况，也是由上一条导致的，可以等待一段时间再看看。阿里云正在优化此问题，近期可以完成
- 在阿里云开启了泛域名加速的情况下，对应的子域名可能无法配置到前端网页托管
- 暂不支持绑定中文域名

### 路由规则@routing

**网站首页**

设置网站首页文档名

**404页面**

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

**重定向规则**

支持以下三种组合配置

- 类型：错误码、规则：替换路径。将特定错误码的请求重定向到目标文档，仅支持对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/	|

### 缓存配置@cache

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

**注意**

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

### 防盗链配置@referer

**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-filter

**IP 黑名单**

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

**IP 白名单**

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

**名单规则**

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

### IP访问限频配置@ip-freq

**配置说明**

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

## 最佳实践

### 部署uni-app项目@host-uni-app

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

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

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

  + 腾讯云配置重定向规则将404错误码重定向至`index.html`
  + 阿里云配置错误文档为`index.html`

## 腾讯云计费详细说明

|套餐名		|前端网页部署增值包1|前端网页部署增值包2|前端网页部署增值包3|
|:-:			|:-:								|:-:								|:-:								|
|容量			|5G									|10G								|100G								|
|流量			|5G/月							|50G/月							|500G/月						|
|读次数		|150万次/月					|200万次/月					|1500万次/月				|
|写次数		|60万次/月					|100万次/月					|600万次/月					|
|回源流量	|5G/月							|10G/月							|150G/月						|

<!--
|费用			|9.9元/月						|35元/月						|330元/月						|
-->

**注意**

- 资源统计页面展示的数据可能会有延迟
- 读次数、写次数、回源流量为系统限制，在现有套餐的容量、流量限制下一般不会超出
- 腾讯云前端网页部署套餐到期之后会保留7天，超过7天将会销毁

## 阿里云使用限制

目前阿里云没前端网页部署限制为最大存储空间用量为2GB

### 名词解释

**CDN 回源流量**

指开启了 CDN 加速后，CDN 回源存储时产生的流量。

<!--
### 腾讯云费用说明

**新购**

- 新购时某套餐时有效期按自然月计。例：2020年5月28日购买2个月套餐，则套餐有效期至2020年7月28日23时59分59秒

**续费**

- 续费逻辑和新购一样以自然月计。例：当前有效期至2020年7月28日23时59分59秒，续费一个月，则套餐有效期至2020年8月28日23时59分59秒

**升配**

- 升配费用 = 按月升配差价 × 升配天数 / (365 / 12) × 适用折扣
  - 按月升配差价：新老配置原价按月的单价。
  - 升配的费用按天计算：升配天数 = 资源到期时间 - 当前时间。
  - 适用折扣：根据升配天数向下匹配适用折扣。
  - 折扣为现网生效的折扣。
- 升配不影响资源到期时间。

**升配示例**

>以下价格仅作示例用，非官网实际价格，实际单价请以购买时为准。

举例：

2019年11月1日，购买3个月专业版套餐，到期时间为2020年2月1日23时59分59秒，包年包月单价为100元/月。

2019年12月15日，将该套餐升级为1000元/月的企业版套餐。

- 按月升配差价 = 1000 - 100 = 900元/月
- 升配天数 = 31 × 1 + 15 + 1 = 47天（1指1月份为31天，15指12月份剩余15天， 1指2月份1天）
- 适用折扣：暂无折扣
- 升配费用 = （1000 - 100） × 47 /（365 / 12） = 1390.53元
-->
