Compute
Elastic Cloud Server
Huawei Cloud Flexus
Bare Metal Server
Auto Scaling
Image Management Service
Dedicated Host
FunctionGraph
Cloud Phone Host
Huawei Cloud EulerOS
Networking
Virtual Private Cloud
Elastic IP
Elastic Load Balance
NAT Gateway
Direct Connect
Virtual Private Network
VPC Endpoint
Cloud Connect
Enterprise Router
Enterprise Switch
Global Accelerator
Management & Governance
Cloud Eye
Identity and Access Management
Cloud Trace Service
Resource Formation Service
Tag Management Service
Log Tank Service
Config
OneAccess
Resource Access Manager
Simple Message Notification
Application Performance Management
Application Operations Management
Organizations
Optimization Advisor
IAM Identity Center
Cloud Operations Center
Resource Governance Center
Migration
Server Migration Service
Object Storage Migration Service
Cloud Data Migration
Migration Center
Cloud Ecosystem
KooGallery
Partner Center
User Support
My Account
Billing Center
Cost Center
Resource Center
Enterprise Management
Service Tickets
HUAWEI CLOUD (International) FAQs
ICP Filing
Support Plans
My Credentials
Customer Operation Capabilities
Partner Support Plans
Professional Services
Analytics
MapReduce Service
Data Lake Insight
CloudTable Service
Cloud Search Service
Data Lake Visualization
Data Ingestion Service
GaussDB(DWS)
DataArts Studio
Data Lake Factory
DataArts Lake Formation
IoT
IoT Device Access
Others
Product Pricing Details
System Permissions
Console Quick Start
Common FAQs
Instructions for Associating with a HUAWEI CLOUD Partner
Message Center
Security & Compliance
Security Technologies and Applications
Web Application Firewall
Host Security Service
Cloud Firewall
SecMaster
Anti-DDoS Service
Data Encryption Workshop
Database Security Service
Cloud Bastion Host
Data Security Center
Cloud Certificate Manager
Edge Security
Situation Awareness
Managed Threat Detection
Blockchain
Blockchain Service
Web3 Node Engine Service
Media Services
Media Processing Center
Video On Demand
Live
SparkRTC
MetaStudio
Storage
Object Storage Service
Elastic Volume Service
Cloud Backup and Recovery
Storage Disaster Recovery Service
Scalable File Service Turbo
Scalable File Service
Volume Backup Service
Cloud Server Backup Service
Data Express Service
Dedicated Distributed Storage Service
Containers
Cloud Container Engine
SoftWare Repository for Container
Application Service Mesh
Ubiquitous Cloud Native Service
Cloud Container Instance
Databases
Relational Database Service
Document Database Service
Data Admin Service
Data Replication Service
GeminiDB
GaussDB
Distributed Database Middleware
Database and Application Migration UGO
TaurusDB
Middleware
Distributed Cache Service
API Gateway
Distributed Message Service for Kafka
Distributed Message Service for RabbitMQ
Distributed Message Service for RocketMQ
Cloud Service Engine
Multi-Site High Availability Service
EventGrid
Dedicated Cloud
Dedicated Computing Cluster
Business Applications
Workspace
ROMA Connect
Message & SMS
Domain Name Service
Edge Data Center Management
Meeting
AI
Face Recognition Service
Graph Engine Service
Content Moderation
Image Recognition
Optical Character Recognition
ModelArts
ImageSearch
Conversational Bot Service
Speech Interaction Service
Huawei HiLens
Video Intelligent Analysis Service
Developer Tools
SDK Developer Guide
API Request Signing Guide
Terraform
Koo Command Line Interface
Content Delivery & Edge Computing
Content Delivery Network
Intelligent EdgeFabric
CloudPond
Intelligent EdgeCloud
Solutions
SAP Cloud
High Performance Computing
Developer Services
ServiceStage
CodeArts
CodeArts PerfTest
CodeArts Req
CodeArts Pipeline
CodeArts Build
CodeArts Deploy
CodeArts Artifact
CodeArts TestPlan
CodeArts Check
CodeArts Repo
Cloud Application Engine
MacroVerse aPaaS
KooMessage
KooPhone
KooDrive

Static Website Hosting

Updated on 2024-11-05 GMT+08:00

Scenarios

OBS allows static websites to be hosted by buckets and supports index page, error page, and page redirection. To host a static website in OBS, upload the static website files to a bucket, grant the read permission for these files to anonymous users, and configure static website hosting for the bucket.

Static websites contain static web pages and some scripts that can run on clients, such as JavaScript and Flash. Different from static websites, dynamic websites rely on servers to process scripts, such as PHP, JSP, and ASP.NET. OBS does not support scripts running on servers.

Figure 1 Static website hosting

After static website hosting is configured, you can access OBS in either of the following ways:

  • Resource management mode: You can access OBS using a common domain name. You can use APIs or SDKs and default OBS domain names with endpoints contained to perform common operations on buckets and objects, such as upload, download, deletion, or listing.
  • Static website: You can access objects in a bucket by using a specific domain name. You can configure domain name hosting rules to enable redirection of an index page, error page, or access page.

The configuration of static website hosting takes about two minutes to take effect. After it takes effect, you can access static resources using the following URLs:

https://static-website-domain-name/object-name
http://static-website-domain-name/object-name

A static website domain name is in the BucketName.obs-website.Endpoint format. BucketName indicates the name of a bucket, and Endpoint indicates the OBS domain name of the region where the bucket is located. For details about regions and endpoints, see Regions and Endpoints. For example, if you want to access bucket testbucket in the CN-Hong Kong region, the corresponding endpoint is ap-southeast-1.myhuaweicloud.com, and the static website domain name is testbucket.obs-website.ap-southeast-1.myhuaweicloud.com.

NOTE:
  • Avoid using periods (.) in the target bucket name, or there may be errors when the client verifies the certificate during HTTPS access.
  • In static website hosting scenarios, anonymous users must be granted access to hosted static website files. When they access the hosted files, there will be costs for outbound Internet traffic and requests.

To allow your users to access the content on your website, you must assign public read to your content. You can use bucket policies or ACLs on objects to grant permissions.

The following table lists the differences between the resource management mode and static website mode.

Main Difference

Resource Management

Static Website

Access control

Both public content and private content are supported.

Only publicly readable content is supported.

Error handling

An error response in XML format is returned.

An HTML document is returned.

Redirection support

N/A

Both object-level and bucket-level redirection are supported.

Supported requests

All operations on buckets and objects are supported.

Only GET and HEAD requests on objects are supported.

Response to GET and HEAD requests at the root level of a bucket

A list of object keys in a bucket is returned.

An index file specified in the configuration is returned.

Precautions

For security and compliance purposes, Huawei Cloud OBS does not allow you to use static website hosting based on the default domain name (a bucket domain name or static website domain name). When you use such a domain name to access web pages in a browser, no content will be displayed. Instead, the content is downloaded as an attachment.

This restriction takes effect in different regions at the following two points in time:

January 1, 2022: CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou

March 25, 2022: CN-Hong Kong, AP-Bangkok, AP-Singapore, AF-Johannesburg, LA-Mexico City1, LA-Mexico City2, LA-Sao Paulo1, and LA-Santiago

You can still use static website hosting with a user-defined domain name. This way, the content can still be previewed. For details, see How Do I Preview OBS Objects in My Web Browser?

Configuring Static Website Hosting

Description

If you want to use a bucket to host static websites, add the website configuration to the bucket. The configuration includes the following information:

Index document

When you enter a URL such as http://example.com, you are not requesting a specific page. In this case, the web server will provide a default page that contains the directory of the requested website. This default page is called an index document, and in most cases it is known as index.html. When you configure a bucket for website hosting, you must specify an index document. When a request is sent to the root domain or any subfolder, OBS returns this index document.

Error document

If an error occurs, OBS returns an HTML error document. For 4XX errors, you can provide your own custom error document that gives users guidance to address the error.

Redirection of all requests

If the root domain is example.com and you need to respond to requests for http://example.com and http://www.example.com, you can create two buckets named example.com and www.example.com, respectively. Then you store the website content in only one bucket (such as example.com), and configure the other bucket to redirect all requests to the example.com bucket.

Redirection based on advanced conditions

You can redirect requests based on the specific object name or prefix in the request, or based on the response code. For example, if you deleted or renamed an object in a bucket, you can add a routing rule to redirect requests for this object to another object.

The syntax format is as follows:

<WebsiteConfiguration> 
    <IndexDocument> 
        <Suffix>index.html</Suffix></IndexDocument> 
    <ErrorDocument> 
        <Key>SomeErrorDocument.html</Key> 
    </ErrorDocument> 
    <RoutingRules> 
        ……RoutingRules……
    </RoutingRules> 
</WebsiteConfiguration>

Here is the syntax format of RoutingRules. The content in square brackets ([]) is optional.

<RoutingRules> = 
    <RoutingRules> 
        <RoutingRule>...</RoutingRule> 
        [<RoutingRule>...</RoutingRule> ...] 
    </RoutingRules> 

<RoutingRule> = 
    <RoutingRule> 
        [ <Condition>...</Condition> ] 
        <Redirect>...</Redirect> 
    </RoutingRule> 

<Condition> = 
    <Condition>  
        [ <KeyPrefixEquals>...</KeyPrefixEquals> ] 
        [ <HttpErrorCodeReturnedEquals>...</HttpErrorCodeReturnedEquals> ] 
    </Condition> 

<Redirect> = 
    <Redirect> 
        [ <HostName>...</HostName> ] 
        [ <Protocol>...</Protocol> ] 
        [ <ReplaceKeyPrefixWith>...</ReplaceKeyPrefixWith> ] 
        [ <ReplaceKeyWith>...</ReplaceKeyWith> ][ 
        <HttpRedirectCode>...</HttpRedirectCode> ] 
    </Redirect>

For website configuration for redirecting all requests and for setting routing rules, see the "Request Elements" area in Configuring Static Website Hosting for a Bucket

Examples:

Example 1: Modifying the object name prefix for redirection

Assume that your bucket contains the following objects:

index.html

docs/article1.html

docs/article2.html

You decide to change the object name from docs/ to documents/. After the modification, the request for an object with prefix /docs needs to be redirected to documents/. For example, the request for docs/article1.html needs to be redirected to documents/article1.html.

To meet this need, you can add the following routing rule to the website configuration:

 <RoutingRules> 
    <RoutingRule> 
    <Condition> 
      <KeyPrefixEquals>docs/</KeyPrefixEquals> 
    </Condition> 
    <Redirect> 
      <ReplaceKeyPrefixWith>documents/</ReplaceKeyPrefixWith> 
    </Redirect> 
    </RoutingRule> 
  </RoutingRules>

Example 2: Redirecting requests sent to deleted folders to a specified page

Assume that you have deleted the images/ folder, that is, you have deleted all objects whose object name prefix is images/. You can add a routing rule that redirects the requests of all objects whose prefix is images/ to a page named folderdeleted.html.

<RoutingRules> 
    <RoutingRule> 
    <Condition> 
       <KeyPrefixEquals>images/</KeyPrefixEquals> 
    </Condition> 
    <Redirect> 
      <ReplaceKeyWith>folderdeleted.html</ReplaceKeyWith> 
    </Redirect> 
    </RoutingRule> 
  </RoutingRules>

Example 3: Redirection when HTTP errors occur

You want to redirect requests for an object that is not found to www.example.com. You can add a routing rule to redirect users to www.example.com if HTTP status code 404 (object not found) is returned. The following example inserts the object name prefix report-404/ into Redirect. Assume you request the page ExamplePage.html and receive an HTTP 404 error. In this case, you will be redirected to the page report-404/ExamplePage.html on the www.example.com. If there is no routing rule and HTTP error 404 occurs, the error document specified in the configuration is returned.

<RoutingRules> 
    <RoutingRule> 
    <Condition> 
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals > 
    </Condition> 
    <Redirect> 
      <HostName>www.example.com</HostName> 
      <ReplaceKeyPrefixWith>report-404/</ReplaceKeyPrefixWith> 
    </Redirect> 
    </RoutingRule> 
  </RoutingRules>

Index Document Support

An index document is a web page returned when a request is sent to the root of a website or any subfolder. For example, if the user enters http://www.example.com in the browser, the user is not requesting any specific page. In this case, OBS provides an index document, also known as a default page.

When configuring website hosting for your bucket, you must provide the name of an index document, which must be uploaded to OBS and configured with public read.

The trailing slash (/) in the root URL is optional. Both the following URLs can return an index document.

http://bucketname.obs-website.example.com/
http://bucketname.obs-website.example.com

In OBS, objects are stored in buckets horizontally, not in a hierarchical structure like that of a file system on a computer. You can create a logical hierarchy based on object names that represent a folder structure. For example, consider a bucket with the following three objects:

  • sample1.jpg
  • photos/2006/Jan/sample2.jpg
  • photos/2006/Feb/sample3.jpg

Although they are not stored in a hierarchical structure, you can infer the following logical relationship from their object name.

  • The sample1.jpg object is located at the root level of the bucket.
  • The sample2.jpg object is located in the photos/2006/Jan subfolder.
  • The sample3.jpg object is located in the photos/2006/Feb subfolder.

Custom Error Document Support

Table 1 lists the HTTP response codes returned by OBS when an error occurs.

Table 1 List of OBS error codes

HTTP Error Code

Description

301 Moved Permanently

When a user sends a request to an endpoint of OBS, a 301 Moved Permanently response is returned.

302 Found

When OBS receives a request for key x that does not end with a slash, it searches for the object whose key name is x. If the object is not found, OBS determines that the request is sent for subfolder x. Then OBS redirects the request by adding a slash to the end of x and returns 302 Found.

304 Not Modified

OBS users request the If-Modified-Since and If-Unmodified-Since headers to determine whether the requested object is the same as the cached copy stored on the client. If the objects are the same, the website endpoint returns a 304 Not Modified response.

403 Forbidden

If the requested object is changed to deny public read, a request for this object will receive a 403 Forbidden response. An object owner must use bucket policies or ACLs to allow public read for the object.

404 Not Found

This response is returned if:

  • OBS determines that an invalid object key is referenced in the website URL.
  • The OBS determines that the request is for an index document that does not exist.
  • The bucket specified in the URL does not exist.
  • The bucket specified in the URL exists but is not configured as a website.

You can create a custom document that will be returned if 404 Not Found occurs. Ensure that the document has been uploaded to a bucket configured as a website and the document has been configured as an error document in the website hosting configuration.

500 Service Error

If there is an internal server error, a 500 Service Error response is returned.

503 Service Unavailable

If your requests are too frequent, a 503 Service Unavailable response is returned.

Permissions Required for Website Access

When you configure a bucket as a website, you must configure public read for the objects in the bucket. To perform this operation, you need to write a bucket policy that grants the GetObject permission to everyone. If an object requested by a user does not exist on the website, OBS returns the HTTP response code 404 Not Found. If the object exists but you did not grant read permission for the object, OBS returns HTTP response code 403 Access Denied. Requesters can use the response code to determine whether the requested object exists. If you do not need this function, do not enable the bucket website support.

NOTE:

In static website hosting scenarios, anonymous users must be granted access to hosted static website files. When they access the hosted files, there will be costs for outbound Internet traffic and requests.

The following example bucket policy grants everyone the permission to access objects in a specified folder. For more information about bucket policies, see Bucket Policy.

{ 
   "Statement":[{ 
    "Sid":"PublicReadGetObject", 
      "Effect":"Allow", 
      "Principal": {"ID":"*"}, 
      "Action":["GetObject"], 
      "Resource":["example-bucket/*"  ] 
    } 
  ] 
}
NOTICE:

A bucket policy applies only to objects owned by a bucket owner. If the bucket contains objects that are not owned by the bucket owner, use object ACLs to grant the public read permission for the objects.

You can use bucket policies or object ACLs to grant the public read permission for your objects. To use ACLs to grant the read permission to everyone, refer to the example below. You can add the authorization element to object ACLs. For details about ACL management, see ACLs.

<Grant> 
  <Grantee> 
    <Canned>Everyone</Canned> 
  </Grantee> 
  <Permission>READ</Permission> 
</Grant>

Related Functions

Function

Relationship with Static Website Hosting

Reference

Cross-origin resource sharing (CORS)

By default, static websites hosted in an OBS bucket can only respond to access requests from websites in the same domain. You can configure CORS for the bucket so static websites can be accessed from a different origin.

Configuring CORS to Allow Cross-Origin Access to OBS

User-defined domain name configuration

OBS allows you to continue to use the original domain name of your static website hosted in OBS by configuring a user-defined domain name, with no code change required.

Configuring User-defined Domain Names

Using a User-Defined Domain Name to Host a Static Website

URL validation

OBS uses URL validation to protect your website from inline linking. OBS verifies URLs based on the referer field in the HTTP header.

Configuring URL Validation to Prevent Unauthorized Access to Your Data

Prerequisites

Web page files required for static website hosting have been uploaded to the specified bucket.

The static website files hosted in the bucket are accessible to all users.

Static web page files in the Archiveor Deep Archive storage class have been restored. For more information, see Restoring Archive or Deep Archive Objects.

Ways to Configure Static Website Hosting

You can use OBS Console, APIs, or SDKs to configure static website hosting.

We use cookies to improve our site and your experience. By continuing to browse our site you accept our cookie policy. Find out more

Feedback

Feedback

Feedback

0/500

Selected Content

Submit selected content with the feedback