靜態網站托管
靜態網站是指所有的網頁都由靜態內容構成,包括客戶端執行的腳本(例如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。 即從瀏覽器訪問這些文件時,會以附件形式進行下載。
使用自定義域名通過瀏覽器訪問靜態網頁文件時,在瀏覽器支持預覽對應格式的網頁文件的情況下,默認直接預覽文件內容。
費用說明
配置示例
為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是否存在。
如果文件存在則返回200,并直接返回文件內容。
如果文件不存在,則繼續檢查
https://examplebucket.oss-cn-hangzhou.aliyuncs.com/error.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。
常見問題
開啟靜態網站托管功能后是否支持關閉?
更多參考
您可以通過存儲空間(Bucket)托管靜態網站,并讓訪問者通過Bucket綁定的自定義域名(例如example.com)訪問您的網站。具體操作,請參見使用自定義域名設置靜態網站托管。
您可以使用React框架,通過OSS的靜態網站托管功能在前端快速部署一個線上可用的單頁應用SPA(Single-Page Application)。具體操作,請參見教程示例:通過靜態網站托管部署單頁應用。