静态网站托管

更新时间: 2024-11-29 17:00:52

静态网站是指所有的网页都由静态内容构成,包括客户端执行的脚本(例如JavaScript)。您可以通过静态网站托管功能将您的静态网站托管到OSS的存储空间(Bucket),并使用Bucket的访问域名访问这个网站。

使用说明

配置静态网站托管时,您需要指定网站的默认首页和默认404页:

  • 默认首页是您通过浏览器访问静态网站域名时,OSS返回的网站首页。

    您为默认首页指定的文件必须是Bucket根目录下允许被匿名访问的文件。如果您还开通了子目录首页,则子目录下也应存在此文件。

  • 默认404页是您通过浏览器访问Bucket内文件出现404错误时,OSS返回的错误页面。

    您为默认404页指定的文件必须是Bucket根目录下允许被匿名访问的文件。

您可以通过将默认首页或者默认404页中指定文件的读写权限ACL设置为public-read,确保该文件允许匿名访问。有关设置文件读写权限ACL的具体步骤,请参见文件ACL

注意事项

出于安全考虑,中国内地各地域自2018年09月28日起,非中国内地各地域自2019年09月25日起,通过浏览器访问OSS静态网页类型文件(mimetype为text/html,扩展名包括HTM、HTML、JSP、PLG、HTX、STM):

  • 使用OSS默认域名通过浏览器访问静态网页文件时,Response Header中会自动加上Content-Disposition:attachment。 即从浏览器访问这些文件时,会以附件形式进行下载。

  • 使用自定义域名通过浏览器访问静态网页文件时,在浏览器支持预览对应格式的网页文件的情况下,默认直接预览文件内容。

费用说明

  • 存储费用

    按照存储静态网站文件(如HTML、CSS、JavaScript、图片等)占用的存储容量进行收费。更多信息,请参见存储费用

  • 流量费用

    访问静态网站产生的流出流量,包括默认首页、图片、脚本等所有静态资源以及返回404错误页面所产生的流出流量。更多信息,请参见流量费用

  • 请求费用

    向OSS发送GET请求访问默认首页、其他页面、静态资源以及404页面,这些请求会涉及GET类请求费用。更多信息,请参见请求费用

配置示例

为Bucket开启静态网站托管后,您需要将与默认首页名称相同的文件(例如index.html)上传至目标Bucket,如果Bucket中包含了目录结构subdir/,则目录层级下也必须包含index.html文件。此外,您还需要将与默认404页名称相同的文件(例如error.html)上传至目标Bucket。Bucket的文件结构如下所示:

Bucket
 ├── index.html
 ├── error.html
 ├── example.txt
 └── subdir/
      └── index.html

如果该Bucket绑定了自定义域名example.com,且配置的静态网站默认首页为index.html,默认404页为error.html。则通过自定义域名访问静态网站时,根据是否开通了子目录首页,访问规则如下:

  • 未开通子目录首页

    • 当您访问https://example.com/https://example.com/subdir/时,OSS会返回https://example.com/index.html

    • 当您访问https://example.com/example.txt时,正常获取example.txt文件。

    • 当您访问https://example.com/object时,因object不存在,OSS会返回https://example.com/error.html

  • 已开通子目录首页

    • 当您访问https://example.com/时,OSS会返回https://example.com/index.html

    • 当您访问https://example.com/subdir/时,OSS会返回https://example.com/subdir/index.html

    • 当您访问https://example.com/example.txt时,正常获取example.txt文件。

    • 当您访问https://example.com/object时,因object不存在,OSS会根据您设置的文件404规则返回对应信息:

      • 如果文件404规则设置为Redirect(默认值),OSS会继续检查object/index.html是否存在。如果文件存在则返回302,并将访问请求重定向为https://example.com/object/index.html;如果文件不存在则返回404,并继续检查https://example.com/error.html

      • 如果文件404规则设置为NoSuchKey,则直接返回404,并继续检查https://example.com/error.html

      • 如果文件404规则设置为Index,OSS会继续检查object/index.html是否存在。如果文件存在则返回200,并直接返回文件内容。如果文件不存在,则继续检查https://example.com/error.html

操作步骤

使用OSS控制台

  1. 设置静态网站页面。

    • 未开通子目录首页

      结合以上配置示例可知,当您希望访问子目录subdir/时,不支持跳转至子目录下的index.html页面,而是跳转至根目录下的index.html页面。此外,当访问Bucket内不存在的文件时,返回默认错误页面。具体配置步骤如下:

      1. 登录OSS管理控制台

      2. 单击Bucket 列表,然后单击目标Bucket名称。

      3. 在左侧导航栏,选择数据管理 > 静态页面

      4. 静态页面,单击设置,按如下说明配置各项参数。静态页面

        参数

        说明

        默认首页

        默认首页是您通过浏览器访问静态网站域名时,OSS返回的网站首页。此处设置为index.html

        子目录首页

        选择不开通,此时访问静态网站根域名或者根域名下任何一个以正斜线(/)结尾的URL都会返回根目录默认首页。

        默认404页

        访问Bucket内文件出现404错误时,OSS返回的错误页面。默认404页仅支持根目录下的文件。此处设置为error.html

        错误文档响应码

        您可以配置返回错误文档时的HTTP响应码为404200

      5. 单击保存

    • 已开通子目录首页

      结合以上配置示例可知,您希望访问子目录subdir/时,支持直接跳转至子目录下的index.html页面。此外,当访问Bucket内不存在的文件时,返回默认错误页面,并通过文件404规则指定访问不存在文件时的返回结果。具体配置步骤如下:

      1. 静态页面,单击设置,按如下说明配置各项参数。静态页面2

        参数

        说明

        默认首页

        默认首页是您通过浏览器访问静态网站域名时,OSS返回的网站首页。此处设置为index.html

        子目录首页

        选择开通。开通子目录首页后,访问静态网站根域名时,返回根目录默认首页。访问根域名下以正斜线(/)结尾的URL时会返回对应目录的默认首页。例如,访问示例中的https://examplebucket.oss-cn-hangzhou.aliyuncs.com/subdir/时,则返回subdir/目录下的默认首页文件index.html

        文件404规则

        开通子目录首页后,通过文件404规则决定访问不存在的Object时的返回结果。例如,访问https://examplebucket.oss-cn-hangzhou.aliyuncs.com/exampledir,因示例中不存在exampledir文件,则根据设置的文件404规则返回对应信息:

        • Redirect(默认值):检查exampledir/index.html是否存在。

          • 如果文件存在则返回302,并将访问请求重定向为https://examplebucket.oss-cn-hangzhou.aliyuncs.com/exampledir/index.html

          • 如果文件不存在则返回404,并继续检查https://examplebucket.oss-cn-hangzhou.aliyuncs.com/error.html。如果error.html页面也不存在该文件,则返回404状态码。

        • NoSuchKey:直接返回404,并继续检查https://examplebucket.oss-cn-hangzhou.aliyuncs.com/error.html

        • Index:检查exampledir/index.html是否存在。

          • 如果文件存在则返回200,并直接返回文件内容。

          • 如果文件不存在,则继续检查https://examplebucket.oss-cn-hangzhou.aliyuncs.com/error.html

        默认404页

        访问Bucket内文件出现404错误时,OSS返回的错误页面。默认404页仅支持根目录下的文件。此处设置为error.html

        错误文档响应码

        您可以配置返回错误文档时的HTTP响应码为404200

      2. 单击保存

  2. 创建并上传默认首页。

    当您为examplebucket配置静态网站托管时指定的默认首页为index.html,您需要将与默认首页名称相同的文件上传至examplebucket根目录下。由于examplebucket中包含了子目录subdir/,则子目录subdir/下也必须包含index.html文件。

    1. 创建index.html文件。index.html文件配置示例如下:

      <html>
      <head>
          <title>My Website Home Page</title>
          <meta charset="utf-8">
      </head>
      <body>  
        <p>Now hosted on OSS.</p>
      </body>
      </html>
    2. index.html文件保存至本地路径。

    3. 分别将index.html文件上传至examplebucket根目录以及子目录subdir下。上传文件时,您需要将文件读写权限设置为公共读。

      关于上传文件的具体操作,请参见简单上传

  3. 创建并上传默认404页。

    当您为examplebucket配置静态网站托管时指定的默认404页为error.html,您需要将与默认404页名称相同的文件上传至examplebucket根目录下。

    1. 创建error.html文件。error.html文件配置示例如下:

      <html>
      <head>
          <title>Hello OSS!</title>
          <meta charset="utf-8">
      </head>
      <body>  
        <p>This is error 404 page.</p>
      </body>
      </html>
    2. error.html文件保存至本地。

    3. error.html文件上传至examplebucket根目录下。上传文件时,您需要将文件读写权限设置为公共读。

使用阿里云SDK

以下仅列举常见SDK的设置静态网站托管的代码示例。关于其他SDK的设置静态网站托管的代码示例,请参见SDK简介

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.common.auth.*;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.SetBucketWebsiteRequest;

public class Demo {

    public static void main(String[] args) throws Exception {
        // Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
        String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
        // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
        EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
        // 填写Bucket名称,例如examplebucket。
        String bucketName = "examplebucket";
        // 填写Bucket所在地域。以华东1(杭州)为例,Region填写为cn-hangzhou。
        String region = "cn-hangzhou";

        // 创建OSSClient实例。
        ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
        clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);        
        OSS ossClient = OSSClientBuilder.create()
        .endpoint(endpoint)
        .credentialsProvider(credentialsProvider)
        .clientConfiguration(clientBuilderConfiguration)
        .region(region)               
        .build();

        try {
            // 填写Bucket名称。
            SetBucketWebsiteRequest request = new SetBucketWebsiteRequest(bucketName);
            // 设置静态网站托管的默认主页。
            request.setIndexDocument("index.html");
            // 设置静态网站托管的默认404页。
            request.setErrorDocument("error.html");
            ossClient.setBucketWebsite(request);
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }
}
<?php
if (is_file(__DIR__ . '/../autoload.php')) {
    require_once __DIR__ . '/../autoload.php';
}
if (is_file(__DIR__ . '/../vendor/autoload.php')) {
    require_once __DIR__ . '/../vendor/autoload.php';
}

use OSS\Credentials\EnvironmentVariableCredentialsProvider;
use OSS\OssClient;
use OSS\CoreOssException;
use OSS\Model\WebsiteConfig;

// 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。 
$provider = new EnvironmentVariableCredentialsProvider();
// Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
$endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 填写Bucket名称,例如examplebucket。
$bucket= "examplebucket";

// 设置静态网站托管的默认主页为index.html,默认404页为error.html。
$websiteConfig = new WebsiteConfig("index.html", "error.html");
try {
    $config = array(
        "provider" => $provider,
        "endpoint" => $endpoint,
        "signatureVersion" => OssClient::OSS_SIGNATURE_VERSION_V4,
        "region"=> "cn-hangzhou"
    );
    $ossClient = new OssClient($config);

    $ossClient->putBucketWebsite($bucket, $websiteConfig);
} catch (OssException $e) {
    printf(__FUNCTION__ . ": FAILED\n");
    printf($e->getMessage() . "\n");
    return;
}
print(__FUNCTION__ . ": OK" . "\n");
            
#-*-coding:utf-8-*-
import oss2
from oss2.models import BucketWebsite
from oss2.credentials import EnvironmentVariableCredentialsProvider

# 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())

# 填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
endpoint = "https://oss-cn-hangzhou.aliyuncs.com"
# 填写Endpoint对应的Region信息,例如cn-hangzhou。注意,v4签名下,必须填写该参数
region = "cn-hangzhou"

# examplebucket填写存储空间名称。
bucket = oss2.Bucket(auth, endpoint, "examplebucket", region=region)

# 开启静态网站托管模式,并将默认首页设置为index.html,默认404页设置为error.html。
bucket.put_bucket_website(BucketWebsite('index.html', 'error.html'))           
package main

import (
	"fmt"
	"os"

	"github.com/aliyun/aliyun-oss-go-sdk/oss"
)

func main() {
	// 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
	provider, err := oss.NewEnvironmentVariableCredentialsProvider()
	if err != nil {
		fmt.Println("Error:", err)
		os.Exit(-1)
	}

	// 创建OSSClient实例。
	// yourEndpoint填写Bucket对应的Endpoint,以华东1(杭州)为例,填写为https://oss-cn-hangzhou.aliyuncs.com。其它Region请按实际情况填写。
	// yourRegion填写Bucket所在地域,以华东1(杭州)为例,填写为cn-hangzhou。其它Region请按实际情况填写。
	clientOptions := []oss.ClientOption{oss.SetCredentialsProvider(&provider)}
	clientOptions = append(clientOptions, oss.Region("yourRegion"))
	// 设置签名版本
	clientOptions = append(clientOptions, oss.AuthVersion(oss.AuthV4))
	client, err := oss.New("yourEndpoint", "", "", clientOptions...)
	if err != nil {
		fmt.Println("Error:", err)
		os.Exit(-1)
	}
	// 填写Bucket名称,例如examplebucket。
	bucketName := "examplebucket"

	// 设置静态网站托管的默认主页为index.html, 默认404页为error.html。
	err = client.SetBucketWebsite(bucketName, "index.html", "error.html")
	if err != nil {
		fmt.Println("Error:", err)
		os.Exit(-1)
	}
}
using Aliyun.OSS;
using Aliyun.OSS.Common;

// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
var endpoint = "yourEndpoint";
// 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
var accessKeyId = Environment.GetEnvironmentVariable("OSS_ACCESS_KEY_ID");
var accessKeySecret = Environment.GetEnvironmentVariable("OSS_ACCESS_KEY_SECRET");
// 填写Bucket名称。
var bucketName = "examplebucket";
// 填写Bucket所在地域对应的Region。以华东1(杭州)为例,Region填写为cn-hangzhou。
const string region = "cn-hangzhou";

// 创建ClientConfiguration实例,按照您的需要修改默认参数。
var conf = new ClientConfiguration();

// 设置v4签名。
conf.SignatureVersion = SignatureVersion.V4;

// 创建OssClient实例。
var client = new OssClient(endpoint, accessKeyId, accessKeySecret, conf);
c.SetRegion(region);
try
{
    // 设置静态网站托管的默认主页为index.html,默认404页为error.html。
    var request = new SetBucketWebsiteRequest(bucketName, "index.html", "error.html");
    client.SetBucketWebsite(request);
    Console.WriteLine("Set bucket:{0} Wetbsite succeeded ", bucketName);
}
catch (OssException ex)
{
    Console.WriteLine("Failed with error info: {0}; Error info: {1}. \nRequestID:{2}\tHostID:{3}",
        ex.ErrorCode, ex.Message, ex.RequestId, ex.HostId);
}
catch (Exception ex)
{
    Console.WriteLine("Failed with error info: {0}", ex.Message);
}
#include <alibabacloud/oss/OssClient.h>
using namespace AlibabaCloud::OSS;

int main(void)
{
    /* 初始化OSS账号信息。*/
    
    /* yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。*/
    std::string Endpoint = "yourEndpoint";
    /* yourRegion填写Bucket所在地域对应的Region。以华东1(杭州)为例,Region填写为cn-hangzhou。*/
    std::string Region = "yourRegion";
    /* 填写Bucket名称,例如examplebucket。*/
    std::string BucketName = "examplebucket";

    /* 初始化网络等资源。*/
    InitializeSdk();

    ClientConfiguration conf;
    conf.signatureVersion = SignatureVersionType::V4;
    /* 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。*/
    auto credentialsProvider = std::make_shared<EnvironmentVariableCredentialsProvider>();
    OssClient client(Endpoint, credentialsProvider, conf);
    client.SetRegion(Region);

    /* 设置静态网站托管。*/
    SetBucketWebsiteRequest request(BucketName);
    /* 设置静态网站托管的默认主页为index.html。*/
    request.setIndexDocument("index.html");
    /* 设置静态网站托管的默认404页为error.html。*/
    request.setErrorDocument("error.html");

    auto outcome = client.SetBucketWebsite(request);

    if (!outcome.isSuccess()) {
        /* 异常处理。*/
        std::cout << "SetBucketWebsite fail" <<
        ",code:" << outcome.error().Code() <<
        ",message:" << outcome.error().Message() <<
        ",requestId:" << outcome.error().RequestId() << std::endl;
        return -1;
    }

    /* 释放网络等资源。*/
    ShutdownSdk();
    return 0;
}

使用REST API

如果您的程序自定义要求较高,您可以直接发起REST API请求。直接发起REST API请求需要手动编写代码计算签名。更多信息,请参见PutBucketWebsite

常见问题

开启静态网站托管功能后是否支持关闭?

当您不再需要使用默认首页、默认404页等静态网站托管配置时,请按如下步骤关闭静态网站托管功能:

  1. 在左侧导航栏,选择数据管理 > 静态页面
  2. 静态页面区域,单击设置
  3. 清空默认首页和默认404页配置,然后单击保存
    返回如下页面,表示已成功关闭静态网站托管功能。关闭静态页面

更多参考

上一篇: 存储空间清单 下一篇: 教程示例:使用自定义域名设置静态网站托管
阿里云首页 对象存储 相关技术圈