简介 | uni-app

Introduction

case

open

use

Basic configuration

Configure domain name

Routing rules

Cache configuration

Refresh cache

Anti-leech configuration

Expand All

# Introduction

DCloud provides a uni publishing platform for developers, including website publishing, App publishing and unified portal pages.

Front-end web hosting is one of the products in the web publishing link.

Front-end web hosting is based on uniCloud's ability to provide developers with faster, safer, more worry-free, and cheaper website publishing for their html web pages.

Faster: Without going through the web server, the pages and resources are directly uploaded to the CDN, and the nearest access is faster.
Safer: There are no loopholes in various operating systems and web servers of traditional servers, so you don't have to think about patching every day. Not afraid of DDoS attacks, services that will never be defeated.
More peace of mind: no need to buy virtual machines, install operating systems, configure web servers, handle load balancing, handle large concurrency, handle DDoS attacks... you don't have to worry about anything, just upload the page file you wrote
Cheaper: uniCloud is launched by DCloud in conjunction with Alibaba Cloud and Tencent Cloud, and enjoys preferential policies from cloud vendors.

# case

HBuilderX document website is a document system based on markdown, domain name: https://hx.dcloud.net.cn/
uni Statistics official website has been deployed to uniCloud, a report, grasp the business panorama, domain name: https://tongji.dcloud.net.cn
The hello uni-app project has been deployed to uniCloud, online address: https://hellouniapp.dcloud.net.cn

# open

First, developers need to activate uniCloud and log in to https://unicloud.dcloud.net.cn/.

Then select or create a service space.

Finally, navigate to the left side of the above web page and click Front-end Web Hosting to start using it.

Front-end web page hosting has no binding relationship with cloud functions, and can be deployed in the same service space as cloud functions, or in different spaces, or even spaces of different cloud service providers.

Alibaba Cloud's front-end web hosting provides a free version, and the paid version is priced see details
Tencent Cloud's front-end web page hosting requires payment, and the pricing is provided by Tencent Cloud. See details

Notice:

Under Tencent Cloud's new billing model, the front-end web page hosting only supports the pay-as-you-go billing model, and the original yearly and monthly packages have been discontinued. The existing yearly and monthly subscription front-end web hosting, if the service space is upgraded to a new package, front-end web hosting will automatically switch to the pay-as-you-go mode, please ensure that the balance is sufficient.

# use

After activation, the developer's front-end webpage needs to be uploaded to uniCloud's front-end webpage hosting.

There are currently 2 ways to operate:

Method 1. Upload on the web interface through uniCloud console.

When uploading, you can upload by file or by folder.

If uploading by folder, you can choose whether the uploaded directory includes the root directory of the uploaded folder.

Method 2. Upload through the HBuilderX tool.

Starting from HBuilderX 2.8+, it supports directly uploading front-end web pages to uniCloud Alibaba Cloud version in HBuilderX; starting from 3.5.1, it supports uniCloud Tencent Cloud version.

In the menu release, select Upload website to server.

For the uni-app project, you can first compile it into h5, and then directly upload the compiled h5. As shown below

For non-uni-app projects, you can choose the directory to upload, including static front-end file interfaces such as html, js, css, and pictures. As shown below

HBuilderX 2.8.9+, supports front-end web hosting manager to manage uniCloud Alibaba Cloud version, starting from 3.5.1, supports uniCloud Tencent Cloud version.

In the menu view, or in the status bar in the lower left corner, click Frontend Webpage Hosting to open the frontend webpage hosting manager on the left. As shown below

In the front-end web hosting manager, you can see the list of service spaces for the current user. If the service space is grayed out, it means that the front-end web hosting has not been opened for the service space. After clicking, you can open it according to the prompt. (As shown in the grayed out ali1 service space in the figure above).

Click the available service space, you can see the remote resource manager on the right, drag the local file into it, and you can upload the file.

Precautions

Front-end web hosting is suitable for publishing h5 pages of uni-app. Especially with uniCloud cloud development, there will be no need to rent any traditional servers at all.
Front-end web page hosting is suitable for publishing front-end pages in all websites with front-end and back-end separation, including PC web pages.
Only html, CSS, JavaScript, fonts, pictures, audio and video, json and other files are supported. It does not support php, java, python, ruby, go, c++ and other language files that need to be interpreted by an additional language interpreter.
If developers need to do a/b test or grayscale new functions, they need to write code in js to implement it, and cannot implement it by routing to different servers.
When compiling the uni-app project to h5, configure the secondary directory in the project manifest. There is no need to repeatedly set the secondary directory when uploading.
In a "front-end web hosting" space, multiple websites can be uploaded, separated by different directories, and accessed by using the same domain name followed by different directories. It is not supported to set different domain names for each directory separately.
Websites deployed to different service spaces in Front-End Web Hosting can also access cloud functions in the same service space. You only need to add the deployment front-end in the Cross-Domain Configuration of the service space where the cloud functions are deployed The domain name of the page
The default cache time of Tencent Cloud is 1 day. Generally, Alibaba Cloud will automatically refresh the cache within a short period of time after the file is changed.

# Basic configuration

This chapter introduces the descriptions of various configuration items provided by Frontend Web Hosting. Among them, the configuration of domain name, website homepage, and 404 page is supported by both Alibaba Cloud and Tencent Cloud. Other configurations are only supported by Tencent Cloud.

# Configure domain name

Front-end web page hosting comes with a test domain name, which is only used for product experience and testing to quickly experience the complete process of front-end web page deployment. This domain name has the following restrictions:

Alibaba Cloud has a maximum of 60 requests per minute. By default, only 10 public network IPs are allowed to access each day. If the excess part is exceeded, the source IP needs to be added to the whitelist manually, and the IP whitelist will also have a limit on the number of requests
Tencent cloud speed limit 100K/s

If you want to launch your business for commercial use, please configure your own official domain name. After configuring your own official domain name, it will not be restricted by the above test domain name. (Pay special attention to the fact that Alibaba Cloud’s test domain name is public. If any malicious file uploaded in any service space is complained, the test domain name will be blocked by the built-in browser of WeChat as a whole.)

The steps to configure your own domain name for front-end web hosting are as follows:

1、 Log in to uniCloud console. 2、 Enter the front-end web page hosting page, select [Basic Settings], click [Add Domain Name] to add a domain name, (note: the domain name needs to be purchased by yourself) as shown in the following figure:

3、 After adding, the system will automatically assign a CNAME domain name. The CNAME domain name cannot be accessed directly. You need to complete the CNAME configuration at the domain name service provider (CNAME the added domain name to this domain name). After the configuration takes effect, the new domain name can be used .

Alibaba Cloud now supports http to force jump to https, just turn on the corresponding switch on the above adding interface

Domain name registration

If you already have a registered domain name, you can directly resolve it; if you want to register a new domain name, first purchase it online, and then note that if you want to bind the domain name to Alibaba Cloud or Tencent Cloud normally in China, you need to register the domain name. The filing process here is slightly different from traditional cloud hosts, involving a problem that uniCloud does not have a fixed IP. At this time, you can buy the filing service of peanut shells; you can also temporarily buy a short-term traditional cloud and follow the traditional filing; there is also an authorization code scheme, here is the experience post shared by developers: https://ask.dcloud.net. cn/article/38116

About certificate content and private key

If the domain name uses https, a certificate is required. After the certificate is issued, it can be downloaded locally, and then copy and paste the content to the uniCloud web console.

Note: The suffix of the certificate downloaded by each operator may be different. Generally speaking, the .key file corresponds to the private key, and the .pem or .crt file corresponds to the certificate. These types of files are all text content, you can choose Notepad to open to view the content.

If you do not have an SSL certificate, click here quickly get it.

Precautions

When Alibaba Cloud has turned on pan-domain name acceleration, the corresponding sub-domain name may not be configured to be hosted on the front-end web page. In this case, a prompt may be displayed: This domain name has already been added and cannot be added again
Binding of Chinese domain names is not currently supported
Alibaba Cloud requires that there must be a record in Alibaba before it can be bound. Just follow the prompts on the uniCloud web console. Tencent Cloud does not have this restriction.

It is important to note that if you purchased and filed a domain name from Tencent, you need to keep a resolution to Tencent ip, otherwise the filing will be revoked, and Alibaba Cloud is the same. For details, please consult the cloud provider who purchased the domain name

# Routing rules

Home page

Set the homepage document name of the website

404 page

The page returned after an error occurs when accessing a static website.

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

Redirection Rules

Only supported by Tencent Cloud

Supports the following three combination configurations

Type: error code, rule: replacement path. Redirect requests for specific error codes to the target document. Only 4xx error codes are supported.

Example: To redirect the 404 error code to index.html, the following configuration is required (this configuration can be used when the uni-app project uses the history mode to publish to h5):

Type	Description	Rule	Replace
Error code	404	Replace path	index.html

Type: Prefix Match, Rule: Replace Path. Redirect requests matching a specific prefix to the target document

Example: when you deleted the images/ folder (i.e. deleted all objects with prefix images/). You can add redirect rules to redirect requests for any object with the prefix images/ to the test.html page.

Type	Description	Rule	Replace
prefix match	images/	replace path	test.html

Type: Prefix Match, Rule: Replace Prefix. Replace the prefix in the request matching a specific prefix with the replacement content, for example:

Example: After you rename the folder from docs/ to documents/, users will generate errors when accessing the docs/ folder. So, you can redirect requests prefixed with docs/ to documents/.

Type	Description	Rule	Replace
prefix match	docs/	replace prefix	documents/

Notice

Alibaba Cloud can only modify routing rules 3 times a day

# Cache configuration

仅腾讯云、支付宝小程序云支持

File type: Set the cache expiration time according to the filled-in file suffix, the format is .jpg, and use ; between different suffixes.
Folder: Set the cache expiration time according to the filled directory path, the format is /test, there is no need to end with /, and the interval between different directories is ;.
Full path file: specify the complete file path to set the cache expiration time, the format is /index.html, and support the full path plus file type matching mode, such as /test/*.jpg.

Notice

Up to 10 cache expiration rules can be configured.
The priority among multiple cache expiration rules is bottom priority.
The cache expiration time can be set up to 365 days.

# Refresh cache

Only supported by commercial versions of Tencent Cloud and Alibaba Cloud

Tencent Cloud needs to fill in the link to be refreshed, and refresh the filled link. Alibaba Cloud refreshes the default domain name and custom domain name with one click.

Notice

Alibaba Cloud commercial version only allows 3 refreshes per hour

# Anti-leech configuration

仅腾讯云、支付宝小程序云支持

referer blacklist:

If the referer field of the request matches the content set in the blacklist, the CDN node refuses to return the request information and directly returns a 403 status code.
If the requested referer does not match the content set in the blacklist, the CDN node will return the request information normally.
When the Include empty referer option is checked, if the request referer field is empty or has no referer field (such as a browser request), the CDN node refuses to return the request information and returns a 403 status code.

referer whitelist:

If the referer field of the request matches the content set in the whitelist, the CDN node returns the request information normally.
If the referer field of the request does not match the content set in the whitelist, the CDN node refuses to return the request information, and returns status code 403 directly.
When a whitelist is set, the CDN node can only return requests that match the string content in the whitelist.
When the Include empty referer option is checked, if the request referer field is empty or has no referer field (such as a browser request), the CDN will return the request information normally.

Configuration rules:

Anti-leeching supports domain name/IP rules, and the matching method is prefix matching (only path support is supported, domain name prefix matching is not supported), that is, assuming the configuration list is www.abc.com, then www.abc.com/123 matches, www .abc.com.cn does not match; assuming the configuration list is 127.0.0.1, 127.0.0.1/123 will also match. Anti-leeching supports wildcard matching, that is, if the list is *.qq.com, www.qq.com and a.qq.com will match.

# IP black and white list configuration

仅腾讯云、支付宝小程序云支持

IP Blacklist

When the client IP matches the IP or IP segment in the blacklist, the 403 status code will be returned directly when accessing the CDN node.

IP Whitelist

When the client IP does not match the IP or IP segment in the whitelist, the 403 status code will be returned directly when accessing the CDN node.

List Rules

IP blacklist and IP whitelist can be selected, and cannot be configured at the same time.
The IP segment only supports /8, /16, /24 network segments, other network segments are not supported.
Does not support black and white lists in the form of IP:ports
Up to 50 names can be entered in the list.

# Default Domain IP Whitelist

Only supported by Alibaba Cloud

In order to ensure that the default domain name is not abused, Alibaba Cloud has made the following restrictions on the default domain name: the first 10 IPs per day can be directly accessed, and after more than 10 IPs need to be configured with an IP whitelist to access

Only ipv4 is supported, and IP or IP network segment can be configured, and the mask bit range is 24-31. Up to three can be configured at the same time, separated by commas, such as: 123.120.5.235/24,123.123.123.123

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

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

# IP access frequency limit configuration

Only supported by Tencent Cloud

Configuration instructions

After the configuration is enabled, requests that exceed the QPS limit will directly return 514. Setting a lower frequency limit may affect the use of your normal high-frequency users. Please set the threshold reasonably according to business conditions and usage scenarios.
The frequency limit is only limited to the number of visits to a single node with a single IP. If a malicious user attacks a large number of IPs on the entire network, it cannot be effectively controlled through this function.

# cross-domain

Web browsers have cross-domain restrictions. If the website of A domain name requests another domain name B through js, and the other B domain name does not release the cross-domain policy, the browser will report a cross-domain error.

In front-end web hosting, the website hosting the front-end web page is the A domain name. The server interface to be connected is the B domain name.

B domain name is the cloud function/cloud object of uniCloud

That is, the business background is also on the cloud function or cloud object of uniCloud. At this time, you need to fill in the A domain name in the web security domain name in the cross-domain configuration of uniCloud’s web console.

B domain name is the developer's own traditional server

You need to configure cross-domain on the developer's own traditional server to allow A domain name to access itself across domains.

# 缓存问题

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

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

# Best Practices

# Deploy uni-app project

The uni-app project requires different configurations depending on the routing mode

When using hash mode, it can be used normally without special configuration
When using history mode, you can configure the following rules
- Tencent Cloud configures redirection rules to redirect 404 error codes to index.html
- Alibaba Cloud please configure the 404 page as index.html

When manually deploying the uni-app project, you need to pay attention to deploying the file under the configured h5 base path. HBuilderX will automatically deploy according to the basic path configured in manifest.json during one-click deployment

# Deploy multiple projects

If you deploy multiple projects to a service space, you can use different basic paths to distinguish them. It should be noted that only one of the multiple projects can use the history mode.

Taking an admin project and a client project as an example, the client project can be deployed in the root directory of the front-end web hosting, and the admin project can be deployed in the /admin directory. Access the client project through https://xxx.com/, and access the admin project through https://xxx.com/admin/

Notice

Before the release of the uni-app project deployed in the subdirectory, it is necessary to configure h5 configuration --> running base path in the manifest.json under the project as the subdirectory name, for example /admin/