• Object Storage Service

obs
  1. Help Center
  2. Object Storage Service
  3. User Guide
  4. OBS Console Operation Guide
  5. Static Website Hosting
  6. Using a User-Defined Domain Name to Configure Static Website Hosting

Using a User-Defined Domain Name to Configure Static Website Hosting

OBS allows you to access static websites hosted by OBS using user-defined domain names. This section uses a specific scenario as an example to describe how to use a user-defined domain name to configure static website hosting. For a basic understanding of the concepts and operations about the static website hosting on OBS, see Static Website Hosting.

Scenario

Company A has a large number of files to archive but it does not want to put the time and effort into its storage resources. Therefore, the company subscribes to OBS for hosting static websites and expects that the user names owned by the company can access the static resources through a user-defined domain name. See Figure 1.

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

Operation Process

You need to create a bucket named with a user-defined domain name on OBS Console to store static website resources, enable the static website hosting of the bucket, and create and configure domain name hosting using the Domain Name Service (DNS). The following describes details about the process:

  1. Register a domain name.
  2. Create a bucket.
  3. Upload static website files.
  4. Configure static website hosting on OBS.
  5. Create and configure domain name hosting.
  6. Verification

Data Planning

Table 1 describes the data to be planned before this configuration.

Table 1 Data planning

Item

Description

Example

User-defined domain name

User's own domain name

www.example.com

Bucket name

The bucket name must be consistent with the user-defined domain name.

www.example.com

Static website homepage

Indicates the index page that is returned when you access a static website, that is, the homepage.

index.html

404 error page

When an incorrect static website path is accessed, the 404 error page is returned.

error.html

  • For example, the content of the index.html file is as follows:
    <html>
      <head>
          <title>Hello OBS!</title>
          <meta charset="iso-8859-1">
      </head>
      <body>
          <p>Welcome to use OBS static website hosting.</p>
          <p>This is the homepage.</p>
      </body>
    </html>
  • For example, the content of the error.html file is as follows:
    <html>
      <head>
          <title>Hello OBS!</title>
          <meta charset="iso-8859-1">
      </head>
      <body>
          <p>Welcome to use OBS static website hosting.</p>
          <p>This is the 404 error page.</p>
      </body>
    </html>

Procedure

  1. Register a domain name.

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

    If you do not have a registered domain name, register one with a third-party domain name registrar at your choice. In this scenario, the example domain name www.example.com is used. In practice, you need to replace the domain name with the one you actually planned.

  2. Create a bucket.

    The bucket name must be consistent with the user-defined domain name. Take the www.example.com domain name in the data plan as an example. You need to create a bucket named www.example.com by performing the following steps:

    1. Open OBS Console and log in to the console as prompted.
    2. Click Create Bucket in the upper part of the page.
    3. Set the following parameters in the dialog box that is displayed:
      • Region: Select a region at your own choice.
      • Storage Class: It is recommended that you select Standard.
      • Bucket Name: Enter www.example.com.
      • Bucket Policy: Select Public Read to allow any user to access objects in the bucket.
      Figure 2 shows the configuration details.
      Figure 2 Creating a bucket for static website hosting
    4. Click Create Now to complete the creation.

  3. Upload static website files.

    Prepare the static website files to be uploaded and repeat the following steps until all static website files are uploaded to bucket www.example.com.

    1. Click bucket www.example.com to go to the bucket overview page, and then click Objects in the navigation pane on the left.
    2. Click Upload File, and the dialog box is displayed.
      Figure 3 Upload File
    3. Click and select the file to be uploaded.
      NOTE:
      • The static website files cannot be encrypted for upload.
      • Homepage files and 404 error pages must be stored in the root directory of the bucket.
    4. Click OK to complete the upload.

  4. Optional: To ensure that a hosted static website can be accessed by all users, configure the following policy so that all static website files in the bucket can be accessed publicly.

    1. In the navigation tree on the left, click Objects.
    2. Click the target object and click Object ACL.
    3. In Object ACL > Public Permissions > Anonymous Users, click Edit to set an object read permission for anonymous users. This option is selected in Figure 4.
      Figure 4 Setting an object read permission for anonymous users
    4. Click Save to save the permission setting.

    If the bucket contains only static website files, configure the public read policy for the bucket so that all files in the bucket can be accessed publicly.

    1. Choose Permissions > Bucket Policy.
    2. Click the Public Read card to allow all objects in the bucket to be accessible publicly. This option is selected in Figure 5.
      Figure 5 Configuring the public read permission

  5. Configure static website hosting.

    After uploading the static website file, you need to set the bucket to the static website hosting mode.

    NOTE:

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

    1. Click the bucket name to go to the bucket overview page, and then click Static Website Hosting.
    2. Click the Static Website Hosting card.
    3. In the dialog box that is displayed, select Use this bucket to host a website, and set Default Home Page to the homepage described in the data plan. Figure 6 displays this dialog box.
      Figure 6 Static Website Hosting
      NOTE:

      You can also configure redirection rules based on service requirements to implement website content redirection. For details, see Configuring Static Website Hosting.

    4. Click OK.

  6. Create and configure domain name hosting.

    To facilitate unified management of your user-defined domain names and static websites and implement cloud-based services, directly manage your user-defined domain names on DNS. After the hosting is configured, you can perform subsequent management of the domain name on DNS, including managing record sets and PTR records, as well as creating wildcard DNS records.

    Alternatively, you can add a CNAME record to the DNS at the DNS registrar, mapping to the static website domain name hosted by the bucket. For example, the bucket www.example.com is located in the eu-de region, and the added CNAME record is www.example.com CNAME www.example.com.obs-website.eu-de.otc.t-systems.com.

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

    1. Add a public zone.

      Use the root domain name example.com created in Step 1 as the name of the public zone to be created. For details, see the description about "Creating a Public Zone" in section "Managing Public Zones" of the Domain Name Service User Guide.

    2. 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.

      If bucket www.example.com is located in the eu-de region, then you can set the CNAME to the endpoint address displayed on the Static Website Hosting page in Step 4 (for example, https://www.example.com.obs-website.eu-de.otc.t-systems.com). Configure the parameters as follows:

      • Name: Enter www.
      • Type: Select CNAME-Canonical name.
      • TTL(s): Set it to its default value.
      • Value: Set it to www.example.com.obs-website.eu-de.otc.t-systems.com.

      For details, see the description about "Adding a Record Set" in section "Managing Record Sets" of the Domain Name Service User Guide.

    3. 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 about how to change the addresses of the DNS servers, see the description about "Updating the NS addresses" in section "

      Configuring a Public Zone

      " of the Domain Name Service User Guide.

      NOTE:

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

  7. Verify that the configuration is successful.

    After the above steps are configured successfully, enter http://www.example.com in the browser address box, to check whether you can access the index.html page hosted by bucket www.example.com, as shown in Figure 7.

    Figure 7 Default homepage

    In the web browser, enter a static file access address that does not exist in a bucket. For example: www.example.com/imgs to verify that the 404 error page (error.html) can be returned. Figure 8 displays the error page.

    Figure 8 404 error page
    NOTE:

    In some conditions, you may need to clear the browser cache before the expected results are displayed.

Website Update

If you need to update a static file, such as a picture, a piece of music, an HTML file, or a CSS file, you can re-upload the static file.

By default, if two files in a path share one name, the newly uploaded file overwrites the original one. To prevent files being overwritten, you can enable the versioning function. Versioning allows you to keep multiple versions of a static file, so that you can retrieve and restore history versions conveniently. With versioning enabled, data can be restored rapidly when accidental operations or application faults occur. For detailed information about versioning, see chapter Versioning.