Help Center/ Object Storage Service/ Best Practices/ Using a User-Defined Domain Name to Host a Static Website

Updated on 2024-10-17 GMT+08:00

View PDF

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

Application Scenario

A company has a large number of static websites for users to access, but does not want to set up servers. In this case, this company can host its static websites in an OBS bucket, so that users can access the hosted static websites using the domain name bound to the OBS bucket.

Solution Architecture

Figure 1 Using a user-defined domain name to access hosted static resources

Company A hosts its static websites in an OBS bucket and binds a user-defined domain name to the bucket.
Users access the static websites hosted in the bucket by accessing the bound domain name.

Before starting the configuration, you may need to learn more about static website hosting.

Solution Advantages

You can quickly build static websites in a simple way, with low operation costs.
Static websites can be easily rolled out without the need to set up servers.

Resources and Costs

The table below describes the resources that you need in this practice.

**Table 1** Resource and cost description
Resource	Description	Cost
OBS	An OBS bucket must be created for hosting static website files, and the bucket must have the static website hosting configured and a user-defined domain name bound.	Fees charged for using OBS: Storage fee generated for storing static website files in OBS Request fee generated when users access static website files stored in OBS Traffic fee generated when users use a user-defined domain name to access OBS over the Internet Actual fees vary depending on the size of stored files, the number of requests, and the traffic volume.
Static website files	Static website homepage: Index page (homepage) that is returned when the hosted static website is accessed. Example: index.html 404 error page: Page that is returned when the accessed static website path is incorrect. Example: error.html	Free
User-defined domain name	The user's domain name that needs to be bound to the OBS bucket. As required by the MIIT, the user must complete the ICP filing, if the bucket to which the user-defined domain name is bound is in any of the following regions: CN North-Beijing1, CN North-Beijing4, CN East-Shanghai1, CN East-Shanghai2, and CN South-Guangzhou Example: www.example.com	Domain name registration fees charged by the registrar
DNS	A CNAME record must be configured on DNS for the domain name bound to the bucket.	Free

In this example, the static website files are as follows:

Content in the index.html file

<html>
  <head>
      <title>Hello OBS!</title>
      <meta charset="utf-8">
  </head>
  <body>
      <p>Welcome to OBS static website hosting.</p>
      <p>This is the homepage.</p>
  </body>
</html>

Content in the error.html file

<html>
  <head>
      <title>Hello OBS!</title>
      <meta charset="utf-8">
  </head>
  <body>
      <p>Welcome to OBS static website hosting.</p>
      <p> This is the 404 error page.</p>
  </body>
</html>

Static Website Hosting Process

You need to first create a bucket on OBS Console to store static website resources. Then, enable static website hosting for the bucket and bind a user-defined domain name to the bucket using the domain binding function of OBS. After that, create and configure domain name hosting using Domain Name Service (DNS) so that the user-defined domain name can be used to access the static website hosted on OBS. Specific operations are as follows:

Figure 2 Process of using a user-defined domain name to host a static website

Making Preparations

Complete the following preparations.

Registering a Domain Name

If you already have a registered domain name, skip this step.

If you do not have such domain name, register one with a registrar. In this example, the example domain name www.example.com is used. In practice, you need to replace the domain name with the one you actually planned.

Creating a Bucket

There are no special requirements on bucket names. Follow the instructions on the console to create a bucket for storing static website files. The following example describes how to create a bucket named example:

Log in to OBS Console.
Click Create Bucket in the upper right corner of the page.
Configure the following parameters:
- Region: Select a region closest to you.
- Default Storage Class: Select Standard (recommended).
  
  You can also select Infrequent Access or Archive based on how frequently the website is accessed or how fast the website should respond. For details about storage classes, see Storage Classes.
- Bucket Name: Enter example.
- Bucket Policy: Select Public Read to allow any user to access objects in the bucket.
- Server-Side Encryption: Select Disable.
- Enterprise Project: The default project is default. You can also create an enterprise project and then choose it for the bucket you are creating. Only an enterprise account can configure enterprise projects.
Click Create Now. The bucket is created.

Uploading Static Website Files

Prepare all static website files to be uploaded and repeat the following steps on OBS Console until all files are uploaded to the bucket created in Making Preparations.

In regions where batch upload is available, you can upload a maximum of 100 files in a batch, with a total size of no more than 5 GB. If there are a large number of website files, you are advised to use OBS Browser+ to upload them. For details, see Using OBS Browser+ to Upload Files or Folders.

Click the name of the created bucket to go to the Objects page.
Click Upload Object.

Figure 3 Uploading objects
Add the file to be uploaded.
- Static website files cannot be encrypted for upload.
- It is recommended that you select Standard for the storage class. If you store the static website files in the Archive storage class, you need to restore the files before accessing them. For details, see Restoring an Archive File.
- The website homepage file (index.html) and 404 error page (error.html) must be stored in the root directory of the bucket.
Click Upload to complete the upload.

Configuring Static Website Hosting

After the static website files are uploaded, perform the following steps to configure the static website hosting for the bucket.

You can also redirect the entire static website to another bucket or domain name. For details, see Configuring Redirection.

Click the bucket name to go to the Objects page. In the navigation pane, choose Data Management > Static Website Hosting.
Click Configure Static Website Hosting.
In the dialog box that is displayed, enable this function and select Host a static website for Hosting Type. Set Homepage to index.html and 404 Error Page to error.html.

Figure 4 Configuring static website hosting

You can also configure redirection rules as needed to redirect your website content. For details, see Static Website Hosting.
Click OK.

Configuring a User-Defined Domain Name

Click the bucket name to go to the Objects page. In the navigation pane, choose Domain Name Mgmt.
Click Configure User Domain Name in the upper part of the page, or in the lower card area of the page (when no user-defined domain names are available). On the displayed page, enter www.example.com.

Figure 5 Configuring a user-defined domain name
Click OK.
Based on the tips, click Resolve or manually add a CNAME record set. Then, click OK.

Clicking Resolve will automatically add CNAME record sets for Huawei Cloud domain names. To resolve those domain names not registered with Huawei Cloud, you need to configure resolution rules by yourself.

Creating and Configuring Domain Name Hosting

To facilitate unified management of your user-defined domain names and static websites, you can host your user-defined domain names on Huawei Cloud DNS. After the hosting is configured, you can manage domain names on DNS, including managing record sets and PTR records, as well as creating wildcard DNS records.

You can also add a CNAME record to the DNS at the DNS registrar, mapping to the domain name for the website hosted by the bucket. For example, if www.example.com is in the CN-Hong Kong region, you need to add a CNAME record whose value is www.example.com CNAME www.example.com.obs-website.ap-southeast-1.myhuaweicloud.com at your DNS registrar.

To create and configure domain name hosting on DNS, perform the following steps:

Add a public zone.

Use the root domain name example.com created in Making Preparations as the name of the public zone to be created. For details, see "Create a Public Zone" in Routing Internet Traffic to a Website.
Add a CNAME record.

In DNS, add a record set for the sub-domain name www.example.com of the hosted domain name, to map the CNAME of the sub-domain name to the static website domain name hosted by OBS. Configure the parameters as follows:
- Name: Enter www.
- Type: Select CNAME – Map one domain to another.
- Line: Select Default.
- TTL (s): Retain the default value.
- Value: Domain name to map. If CDN acceleration is disabled when a user-defined domain name is bound, enter the static website hosting domain name of the bucket. If CDN acceleration is enabled, set this parameter to the acceleration domain name (CNAME) provided by CDN.
For details, see Adding a CNAME Record Set.
Change the DNS server address at your domain name registrar.

At your domain name registrar, change the DNS server address in the NS record of the root domain name to the cloud DNS server address. The specific address is the NS value of the public zone in DNS.

For details, see section "Change the DNS Servers of the Domain Name" in Routing Internet Traffic to a Website.

The address change will be effective within 48 hours. The actual time taken varies depending on the domain name registrar.

Verifying the Hosting

Enter www.example.com in the address bar of a browser to verify that you can access the default homepage, as shown in Figure 6.
Figure 6 Default homepage
In a web browser, enter a static file access address (for example, www.example.com/imgs) that does not exist in the bucket to verify that the 404 error page is displayed, as shown in Figure 7.
Figure 7 404 error page

Due to browser caching, you may need to clear the browser cache to view the expected results.

(Follow-up Operation) Updating a Static Website

If you need to update a static file (such as a picture, music file, HTML file, or CSS file) on a static website, you can upload this file again. By default, if you upload a new file using the same name as the file you previously uploaded to the same path of OBS, the new file overwrites the previous one. To avoid this problem, you can enable versioning for OBS. A versioned OBS bucket stores static files of multiple versions, so that you can quickly retrieve and restore different versions or restore data in the event of unintended operations or application failures.

Enabling Versioning

Log in to OBS Console.
In the bucket list, click the bucket you want to go to the Objects page. In the navigation pane, click Overview.
In the Basic Configurations area, click Versioning. The Versioning dialog box is displayed.

Figure 8 Configuring versioning
Select Enable and click OK to enable versioning for objects in the bucket.

For more information about versioning, see Versioning.

Updating Static Files

Log in to OBS Console.
In the bucket list, click the bucket you want to go to the Objects page.
Click Upload Object, or go to the folder where the file you want to update is located and click Upload Object.

Figure 9 Uploading objects
Add the file to be uploaded.
- Static website files cannot be encrypted for upload.
- It is recommended that you select Standard for the storage class. If you store the static website files in the Archive storage class, you need to restore the files before accessing them. For details, see Restoring an Archive File.
Click Upload to complete the upload.

The most recently uploaded file with the same name as those previously uploaded ones is displayed as the latest version in the object list. Each time, only the latest version is accessed. This way, the static website file can be updated.