Help Center> Object Storage Service> BrowserJS> Static Website Hosting> Website File Hosting
Updated on 2024-04-26 GMT+08:00
View PDF

Website File Hosting

If you have any questions during development, post them on the Issues page of GitHub. For details about parameters and usage of each API, see the API Reference.

You can perform the following to implement website file hosting:

  1. Upload a website file to your bucket in OBS as an object and set the MIME type for the object.
  2. Set the object ACL to public-read.
  3. Access the object using a browser.

Sample code:

// Create an instance of ObsClient.
var obsClient = new ObsClient({
    // Hard-coded or plaintext AK/SK are risky. For security purposes, encrypt your AK/SK and store them in the configuration file or environment variables. In this example, the AK/SK are stored in environment variables for identity authentication. Before running this example, configure environment variables AccessKeyID and SecretAccessKey.
    // The front-end code does not have the process environment variable, so you need to use a module bundler like webpack to define the process variable.
    // Obtain an AK/SK pair on the management console. For details, see https://support.huaweicloud.com/intl/en-us/usermanual-ca/ca_01_0003.html.
    access_key_id: process.env.AccessKeyID,
    secret_access_key: process.env.SecretAccessKey,
    // Replace the example endpoint with the actual one in your case.
    server: 'https://obs.ap-southeast-1.myhuaweicloud.com'
});

// Upload an object.
obsClient.putObject({
       Bucket: 'bucketname',
       Key: 'test.html',
       Body: '<html><header></header><body><h1>Hello OBS</h1></body></html>',
       // Set the MIME type for the object.
       ContentType: 'text/html',
       // Set the object ACL to public-read.
       ACL: obsClient.enums.AclPublicRead
}, function (err, result) {
       if(err){
              console.log('Error-->' + err);
       }else{
              console.log('Status-->' + result.CommonMsg.Status);
       }
});

You can use http://bucketname.your-endpoint/test.html in a browser to access files hosted using the sample code.

Parent topic: Static Website Hosting