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 Object Storage Service (OSS) bucket and use the domain name of the bucket to access the website.

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 Object Storage Service (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({
      // Set yourRegion to the region in which the bucket is located. For example, if your bucket is located in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a RAM user to call API operations or perform routine operations and maintenance. To create a RAM user, log on to the RAM console. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',  
    });
    
    // 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 hosted on the bucket. 
        index: 'index.html',
        // Specify the default 404 page of the static website hosted on the bucket. 
        error: 'error.html'
      });
       console.log(result);
      } catch (e) {
        console.log(e);
      }
    }
    
    putBucketWebsite();            
  • Query static website hosting configurations

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

    const OSS = require('ali-oss')
    
    const client = new OSS({
      // Set yourRegion to the region in which the bucket is located. For example, if your bucket is located in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a RAM user to call API operations or perform routine operations and maintenance. To create a RAM user, log on to the RAM console. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
    });
    
    // Query the default homepage and default 404 page of the static website 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 static website hosting configurations

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

    const OSS = require('ali-oss')
    
    const client = new OSS({
      // Set yourRegion to the region in which the bucket is located. For example, if your bucket is located in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a RAM user to call API operations or perform routine operations and maintenance. To create a RAM user, log on to the RAM console. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',  
    });
    
    // 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

  • Configure mirroring-based back-to-origin

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

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

    const OSS = require('ali-oss')
    const path = require("path")
    
    const client = new OSS({
      // Set yourRegion to the region in which the bucket is located. For example, if your bucket is located in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a RAM user to call API operations or perform routine operations and maintenance. To create a RAM user, log on to the RAM console. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
    });
    
    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 hosted on the bucket. 
          index: "index.html",
          // Specify the default 404 page of the static website 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, the name of the accessed object does not contain a forward slash (/) as a suffix, and the object does not exist. This parameter takes effect only when SupportSubDir is set to true. 
          // type: 0 ,
          routingRules: [
             { RuleNumber: 1,
                 // Specify the prefix of 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 when the specified object is accessed and HTTP status code 404 is returned. 
                              HttpErrorCodeReturnedEquals: 404
                            },
                 // Specify the redirect type. 
                 Redirect: { RedirectType: "Mirror",
                             // Specify whether to include parameters of the original request in the redirect request when the system uses the redirection rule or the mirroring-based back-to-origin rule. 
                             PassQueryString: true,
                             // Specify the origin URL for the mirroring-based back-to-origin rule. 
                             MirrorURL: 'http://example.com/examplefolder',                         
                             // This parameter is used in the same manner as the PassQueryString parameter and is assigned a higher priority level than the PassQueryString parameter. This parameter takes effect only when the value of the RedirectType parameter is 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 the value of the RedirectType parameter is 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 a mirroring-based back-to-origin rule. 
                             // Specify whether to pass through all request headers 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 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')
    const path = require("path")
    
    const client = new OSS({
      // Set yourRegion to the region in which the bucket is located. For example, if your bucket is located in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a RAM user to call API operations or perform routine operations and maintenance. To create a RAM user, log on to the RAM console. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',  
    });
    
    // Query 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 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')
    const path = require("path")
    
    const client = new OSS({
      // Set yourRegion to the region in which the bucket is located. For example, if your bucket is located in the China (Hangzhou) region, set yourRegion to oss-cn-hangzhou. 
      region: 'yourRegion',
      // Security risks may arise if you use the AccessKey pair of an Alibaba Cloud account to access OSS because the account has permissions on all API operations. We recommend that you use a RAM user to call API operations or perform routine operations and maintenance. To create a RAM user, log on to the RAM console. 
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
    });
    
    // Delete the mirroring-based back-to-origin configurations of the bucket. 
    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 or mirroring-based back-to-origin configurations, see GetBucketWebsite.
  • For more information about the API operation that you can call to delete static website hosting or mirroring-based back-to-origin configurations, see DeleteBucketWebsite.