靜態網站是指所有的網頁都由靜態內容構成,包括用戶端執行的指令碼(例如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):
費用說明
儲存費用
按照儲存靜態網站檔案(如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控制台
設定靜態網站頁面。
未開通子目錄首頁
結合以上配置樣本可知,當您希望訪問子目錄subdir/時,不支援跳轉至子目錄下的index.html頁面,而是跳轉至根目錄下的index.html頁面。此外,當訪問Bucket內不存在的檔案時,返回預設錯誤頁面。具體配置步驟如下:
登入OSS管理主控台。
單擊Bucket 列表,然後單擊目標Bucket名稱。
在左側導覽列,選擇。
在靜態頁面,單擊設定,按如下說明配置各項參數。
參數 | 說明 |
預設首頁 | 預設首頁是您通過瀏覽器訪問靜態網站網域名稱時,OSS返回的網站首頁。此處設定為index.html。 |
子目錄首頁 | 選擇不開通,此時訪問靜態網站根網域名稱或者根網域名稱下任何一個以正斜線(/)結尾的URL都會返回根目錄預設首頁。 |
預設404頁 | 訪問Bucket內檔案出現404錯誤時,OSS返回的錯誤頁面。預設404頁僅支援根目錄下的檔案。此處設定為error.html。 |
錯誤文檔響應碼 | 您可以配置返回錯誤文檔時的HTTP響應碼為404或200。 |
單擊儲存。
已開通子目錄首頁
結合以上配置樣本可知,您希望訪問子目錄subdir/時,支援直接跳轉至子目錄下的index.html頁面。此外,當訪問Bucket內不存在的檔案時,返回預設錯誤頁面,並通過檔案404規則指定訪問不存在檔案時的返回結果。具體配置步驟如下:
在靜態頁面,單擊設定,按如下說明配置各項參數。
參數 | 說明 |
預設首頁 | 預設首頁是您通過瀏覽器訪問靜態網站網域名稱時,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是否存在。
|
預設404頁 | 訪問Bucket內檔案出現404錯誤時,OSS返回的錯誤頁面。預設404頁僅支援根目錄下的檔案。此處設定為error.html。 |
錯誤文檔響應碼 | 您可以配置返回錯誤文檔時的HTTP響應碼為404或200。 |
單擊儲存。
建立並上傳預設首頁。
當您為examplebucket配置靜態網站託管時指定的預設首頁為index.html,您需要將與預設首頁名稱相同的檔案上傳至examplebucket根目錄下。由於examplebucket中包含了子目錄subdir/,則子目錄subdir/下也必須包含index.html檔案。
建立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>
將index.html檔案儲存至本地路徑。
分別將index.html檔案上傳至examplebucket根目錄以及子目錄subdir下。上傳檔案時,您需要將檔案讀寫權限設定為公用讀取。
關於上傳檔案的具體操作,請參見簡單上傳。
建立並上傳預設404頁。
當您為examplebucket配置靜態網站託管時指定的預設404頁為error.html,您需要將與預設404頁名稱相同的檔案上傳至examplebucket根目錄下。
建立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>
將error.html檔案儲存至本地。
將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頁等靜態網站託管配置時,請按如下步驟關閉靜態網站託管功能:
- 在左側導覽列,選擇。
- 在靜態頁面地區,單擊設定。
- 清空預設首頁和預設404頁配置,然後單擊儲存。
返回如下頁面,表示已成功關閉靜態網站託管功能。