All Products
Search
Document Center

Object Storage Service:Static website hosting (mirroring-based back-to-origin)

Last Updated:Oct 18, 2023

You can enable static website hosting for buckets and configure mirroring-based back-to-origin rules. After you host a static website on a bucket, you can access the bucket to visit the website. You are automatically redirected to the specified index page or error page. After mirroring-based back-to-origin rules are configured and take effect, you can use mirroring-based back-to-origin to seamlessly migrate data to Object Storage Service (OSS).

Static website hosting

Static websites are websites in which all web pages consist only of static content, including scripts such as JavaScript code that can be run on the client. You can use the static website hosting feature to host your static website in an OSS bucket and use the domain name of the bucket to access the website.

  • Configure static website hosting

    The following code provides an example on how to configure static website hosting:

    const OSS = require('ali-oss')
    
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Obtain access credentials from environment variables. Before you run the sample code, make sure that you have configured environment variables OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET. 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,  
    });
    
    // Configure static website hosting. 
    async function putBucketWebsite () {
      try {
        // Specify the name of the bucket. Example: examplebucket.     
        const result = await client.putBucketWebsite('examplebucket', {
        // Specify the default homepage of the static website that is hosted on the bucket. 
        index: 'index.html',
        // Specify the default 404 page of the static website that is hosted on the bucket. 
        error: 'error.html'
      });
       console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    putBucketWebsite();            
  • Query the static website hosting configurations

    The following code provides an example on how to query the static website hosting configurations:

    const OSS = require('ali-oss')
    
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Obtain access credentials from environment variables. Before you run the sample code, make sure that you have configured environment variables OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET. 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
    });
    
    // Query the default homepage and default 404 page of the static website that is hosted on the bucket. 
    async function getBucketWebsite () {
      try {
        // Specify the name of the bucket. Example: examplebucket. 
        const result = await client.getBucketWebsite('examplebucket');
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    getBucketWebsite();            
  • Delete the static website hosting configurations

    The following code provides an example on how to delete the static website hosting configurations:

    const OSS = require('ali-oss')
    
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Obtain access credentials from environment variables. Before you run the sample code, make sure that you have configured environment variables OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET. 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,  
    });
    
    // Delete the static website hosting configurations. 
    async function deleteBucketWebsite() {
      try {
        // Specify the name of the bucket. Example: examplebucket. 
        const result = await client.deleteBucketWebsite('examplebucket');
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    deleteBucketWebsite();            

Mirroring-based back-to-origin

Mirroring-based back-to-origin allows you to seamlessly migrate data to OSS. For example, you can migrate services from a self-managed origin or from another cloud service to OSS without causing a service interruption. You can use mirroring-based back-to-origin rules during migration to obtain data that is not migrated to OSS. This ensures business continuity.

  • Configure mirroring-based back-to-origin

    If a requester attempts to access an object in a specified bucket but the object does not exist, you can specify the URL of the object in the origin and back-to-origin conditions to allow the requester to obtain the object from the origin. For example, a bucket named examplebucket is located in the China (Hangzhou) region. When a requester attempts to access an object in the examplefolder directory of the root directory of the bucket but the object does not exist, the requester is redirected to its origin https://www.example.com/ to access the required object that is stored in the examplefolder directory of the origin.

    The following code provides an example on how to configure mirroring-based back-to-origin for the preceding scenario:

    const OSS = require('ali-oss')
    constpath=require("path")
    
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Obtain access credentials from environment variables. Before you run the sample code, make sure that you have configured environment variables OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET. 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
    });
    
    async function putBucketWebsite() {
      try {
        // Specify the name of the bucket. Example: examplebucket. 
        const result = await client.putBucketWebsite("examplebucket", {
          // Specify the default homepage of the static website that is hosted on the bucket. 
          index: "index.html",
          // Specify the default 404 page of the static website that is hosted on the bucket. 
          error: "error.html",
          // Specify whether to redirect the requester to the default homepage in the subdirectory when the subdirectory is accessed. 
          // supportSubDir:true ,
          // Specify the operation that you want to perform when the default homepage is specified and the non-existing object whose name does not end with a forward slash (/) is accessed. This parameter takes effect only when SupportSubDir is set to true. 
          // type: 0 ,
          routingRules: [
             { RuleNumber: 1,
                 // Specify the prefix that is contained in the object names. Only the objects whose names contain the specified prefix match the rule. 
                 Condition: { KeyPrefixEquals: "examplefolder/" ,
                              // Specify the HTTP status code. The rule is matched only if the specified object is requested and HTTP status code 404 is returned. 
                              HttpErrorCodeReturnedEquals: 404
                            },
                 // Specify the redirection type. 
                 Redirect: { RedirectType: "Mirror",
                             // Specify whether to include the request parameters when the redirection rule or the mirroring-based back-to-origin rule is triggered. 
                             PassQueryString: true,
                             // Specify the URL of the origin for mirroring-based back-to-origin. 
                             MirrorURL: 'http://example.com/',                         
                             // Specify whether to use MirrorPassQueryString. This parameter is used in the same manner as the PassQueryString parameter and is assigned a higher priority than the PassQueryString parameter. This parameter takes effect only when RedirectType is set to Mirror. 
                             MirrorPassQueryString:true,
                             // Specify whether to redirect the requester to the address that is specified by the Location parameter if the origin returns a 3xx HTTP status code. This parameter takes effect only when RedirectType is set to Mirror. If you set MirrorFollowRedirect to true, OSS redirects the requester to the address that is specified by the Location parameter. 
                             MirrorFollowRedirect:true,
                             // Specify whether to check the MD5 hash of the body of the response that is returned by the origin. 
                             MirrorCheckMd5:false,
                             // Specify the headers that are included in the request when you use mirroring-based back-to-origin. 
                             // Specify whether to pass through all request headers except the following header to the origin. 
                             MirrorHeaders:{ PassAll: true,
                                             // Configure the Pass parameter to specify the headers that you want to pass through to the origin. 
                                             Pass:'myheader-key1',
                                             Pass:'myheader-key2',
                                             // Configure the Remove parameter to specify the headers that cannot be passed through to the origin. 
                                             Remove:'myheader-key3',
                                             Remove:'myheader-key4'}
                            }}
           ] 
        });
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    putBucketWebsite();
  • Query the mirroring-based back-to-origin configurations

    The following code provides an example on how to query the mirroring-based back-to-origin configurations of a bucket:

    const OSS = require('ali-oss')
    constpath=require("path")
    
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Obtain access credentials from environment variables. Before you run the sample code, make sure that you have configured environment variables OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET. 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,  
    });
    
    // Query the mirroring-based back-to-origin configurations. 
    async function getBucketWebsite () {
      try {
        // Specify the name of the bucket. Example: examplebucket. 
        const result = await client.getBucketWebsite('examplebucket');
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    getBucketWebsite();            
  • Delete the mirroring-based back-to-origin configurations

    The following code provides an example on how to delete the mirroring-based back-to-origin configurations of a bucket:

    const OSS = require('ali-oss')
    constpath=require("path")
    
    const client = new OSS({
      // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Obtain access credentials from environment variables. Before you run the sample code, make sure that you have configured environment variables OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET. 
      accessKeyId: process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
    });
    
    // Delete the mirroring-based back-to-origin configurations. 
    async function deleteBucketWebsite() {
      try {
        // Specify the name of the bucket. Example: examplebucket. 
        const result = await client.deleteBucketWebsite('examplebucket');
        console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    deleteBucketWebsite();            

References

  • For more information about the API operation that you can call to configure static website hosting or mirroring-based back-to-origin, see PutBucketWebsite.

  • For more information about the API operation that you can call to query static website hosting configurations or mirroring-based back-to-origin rules, see GetBucketWebsite.

  • For more information about the API operation that you can call to delete static website hosting configurations or mirroring-based back-to-origin rules, see DeleteBucketWebsite.