全部產品
Search
文件中心

Object Storage Service:靜態網站託管概述

更新時間:Aug 08, 2024

靜態網站是指所有的網頁都由靜態內容構成,包括用戶端執行的指令碼(例如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";

        // 建立OSSClient執行個體。
        OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);

        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,
    );
    $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.ProviderAuth(EnvironmentVariableCredentialsProvider())
# Endpoint以華東1(杭州)為例,其他Region請按實際情況填寫。
# 填寫Bucket名稱,例如examplebucket。
bucket = oss2.Bucket(auth, 'https://oss-cn-hangzhou.aliyuncs.com', 'examplebucket')

# 開啟靜態網站託管模式,並將預設首頁設定為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請按實際情況填寫。
    client, err := oss.New("yourEndpoint", "", "", oss.SetCredentialsProvider(&provider))
    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";

// 建立OSSClient執行個體。
var client = new OssClient(endpoint, accessKeyId, accessKeySecret);
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帳號資訊。*/
    
    /* 填寫Bucket所在地區對應的Endpoint。以華東1(杭州)為例,Endpoint填寫為https://oss-cn-hangzhou.aliyuncs.com。*/
    std::string Endpoint = "yourEndpoint";
    /* 填寫Bucket名稱,例如examplebucket。*/
    std::string BucketName = "examplebucket";

    /* 初始化網路等資源。*/
    InitializeSdk();

    ClientConfiguration conf;
    /* 從環境變數中擷取訪問憑證。運行本程式碼範例之前,請確保已設定環境變數OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。*/
    auto credentialsProvider = std::make_shared<EnvironmentVariableCredentialsProvider>();
    OssClient client(Endpoint, credentialsProvider, conf);

    /* 設定靜態網站託管。*/
    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頁配置,然後單擊儲存
    返回如下頁面,表示已成功關閉靜態網站託管功能。關閉靜態頁面

更多參考