OSS静态网站托管功能,支持将存储在存储空间(Bucket)中的静态文件(如HTML、CSS、JavaScript等)直接发布为一个公开访问的网站,无需维护传统服务器即可实现高可用网站部署,显著降低运维成本和技术门槛。
托管标准静态网站
适用于传统多页面静态网站(如企业官网、产品展示站)的完整托管部署,提供稳定的在线访问服务。
使用OSS Bucket域名访问HTML文件时,出于安全考虑浏览器会强制下载而非在线预览。要实现网页正常浏览(这是静态网站托管的主要目的),需要绑定自定义域名,具体操作请参见通过自定义域名访问OSS。若Bucket位于中国内地,绑定的域名需要完成ICP备案。
步骤一:配置静态网站托管
通过配置默认首页和错误页面,建立网站的基础访问规则,确保用户能够正常浏览网站并在访问异常时获得友好的错误提示。
前往Bucket列表,单击目标Bucket名称,然后在Bucket左侧菜单栏单击 。
单击设置,配置以下参数:
默认首页:设置为
index.html
。子目录首页:根据网站结构选择是否为子目录启用独立首页。
不开通 (默认):适用于无需独立子目录首页的简单网站。选择此项后,所有以正斜杠(
/
)结尾的URL路径都将返回根目录下的默认首页。开通:适用于包含多个独立内容版块(如
/blog/
、/docs/
)且各版块均有独立首页的复杂网站。开通后,需设置文件404规则,用于定义当用户请求一个不存在的文件时系统的响应行为:Redirect (默认):重定向至目录。当请求的文件不存在时,系统会检查其对应目录下是否存在首页。如果存在,则返回一个
302
重定向响应,浏览器地址栏将更新为目录路径(例如,.../subdir
变为.../subdir/
)。Index:直接返回首页内容。与Redirect类似,但如果找到对应的目录首页,系统会直接返回该首页的内容和
200
状态码,浏览器地址栏保持不变。NoSuchKey:直接返回404错误。最严格的规则,只要请求的文件不存在,无论其对应目录下是否有首页,都一律返回
404
错误。
默认404页:设置为
error.html
错误文档响应码:选择404。
单击保存。
步骤二:上传网站文件
将准备好的HTML文件上传到Bucket,为网站提供实际内容。
下载示例文件html.zip并解压,或使用已有的项目文件。
在Bucket左侧菜单栏单击
。拖动示例文件或已有项目文件到待上传文件窗口,将文件添加到待上传文件列表后,单击上传文件,完成文件上传。
步骤三:设置Bucket读写权限
配置公共读权限,使网站内容能够被互联网用户正常访问。
公共读权限使Bucket内所有文件对互联网公开可访问,任何知道文件URL的用户都可以直接下载。因此,仅将网站必需的HTML、CSS、JavaScript等公开资源存储在此Bucket中,敏感数据应存储在其他具有访问控制的Bucket内。
由于创建OSS Bucket时默认开启阻止公共访问功能,该功能会阻止Bucket设置为公共读或公共读写权限,需要先关闭此功能。
在Bucket左侧菜单栏单击
。单击阻止公共访问开关,在弹窗中输入我确认关闭阻止公共访问,单击确定,关闭阻止公共访问设置。
设置Bucket读写权限为公共读。
切换至读写权限页签,单击设置。
选择Bucket ACL为公共读,在弹窗中单击继续修改。
单击保存。
步骤四:验证网站配置效果
通过实际访问测试,确认网站托管功能正常运行。
验证首页访问:在浏览器中访问自定义域名(如
http://example.com
),访问效果如下图所示。验证404页面:在浏览器中访问不存在的文件(如
http://example.com/missing-object
),访问效果如下图所示。
托管SPA单页应用
针对单页应用(SPA)提供专门的托管方案,支持前端路由和页面刷新功能,满足现代Web应用的部署需求。
使用OSS Bucket域名访问HTML文件时,出于安全考虑浏览器会强制下载而非在线预览。要实现网页正常浏览(这是静态网站托管的主要目的),需要绑定自定义域名,具体操作请参见通过自定义域名访问OSS。若Bucket位于中国内地,绑定的域名需要完成ICP备案。
步骤一:配置单页应用托管
配置单页应用托管的各项参数,针对SPA的路由特性进行优化,确保前端路由能够正常工作。
前往Bucket列表,单击目标Bucket名称,然后在Bucket左侧菜单栏单击 。
单击设置,配置以下参数:
默认首页:设置为
index.html
。子目录首页:选择不开通,此时访问静态网站域名或者域名下任何一个以正斜杠(
/
)结尾的URL都会返回根目录默认首页。默认404页:设置为
index.html
(关键配置:让所有路由都重定向到应用入口)。错误文档响应码:选择200(确保路由跳转返回正确状态码)。
单击保存。
步骤二:上传应用文件
将准备好的单页应用文件上传到Bucket,完成应用部署。
下载示例应用demo.zip并解压,或使用已有的应用文件。
在Bucket左侧菜单栏单击
。拖动
demo
目录下的所有文件或已有应用文件到待上传文件窗口,将所有文件添加到待上传文件列表后,单击上传文件,完成文件上传。
步骤三:设置Bucket读写权限
公共读权限使Bucket内所有文件对互联网公开可访问,任何知道文件URL的用户都可以直接下载。因此,仅将网站必需的HTML、CSS、JavaScript等公开资源存储在此Bucket中,敏感数据应存储在其他具有访问控制的Bucket内。
配置公共访问权限,使单页应用能够被用户正常访问。
关闭Bucket阻止公共访问功能。
在Bucket左侧菜单栏单击
。单击阻止公共访问开关,在弹窗中输入我确认关闭阻止公共访问,单击确定,关闭阻止公共访问设置。
设置Bucket读写权限为公共读。
切换至读写权限页签,单击设置。
选择Bucket ACL为公共读,在弹窗中单击继续修改。
单击保存。
步骤四:验证应用部署效果
通过实际访问测试,确认单页应用部署成功并能够正常处理路由跳转。
验证首页访问:在浏览器中访问自定义域名(如
http://example.com
)访问单页应用,访问效果如下图所示。验证404页面:在浏览器中访问不存在的文件(如
http://example.com/missing-object
),请求被重定向到应用入口,并返回200 OK
。访问效果如下图所示。
应用于生产环境
为了确保静态网站在生产环境中稳定运行并提供良好的用户体验,需要进行一系列安全性和性能优化配置。
最佳实践
安全传输:启用HTTPS访问
现代浏览器对HTTP网站显示"不安全"警告,搜索引擎对HTTPS网站给予更高的SEO评分。为绑定的自定义域名实现HTTPS访问,强制使用HTTPS访问。HTTPS协议通过TLS/SSL加密传输数据,防止数据在传输过程中被窃取或篡改,提升网站安全性和用户信任度。
性能优化:配置CDN加速
静态网站面向全球用户或大量并发访问时,可通过配置CDN加速,将内容缓存到全球边缘节点,显著提升访问速度并降低OSS流量成本。
跨域访问:配置CORS规则
单页应用通常需要调用后端API或访问第三方资源,会遇到浏览器同源策略限制。通过配置跨域规则,设置允许的请求来源、方法和头信息,确保前端应用能够正常访问所需的API服务和外部资源。
版本管理:实现发布与回滚
生产环境需要支持快速发布新版本和紧急回滚能力。启用OSS版本控制功能,结合自动化部署工具(如Jenkins),实现持续集成和持续部署的完整工作流,提高发布效率和系统稳定性。
风险防范
流量盗用防护:配置防盗链规则
静态资源被其他网站直接引用会产生额外的流量费用和服务器负载。通过配置Referer防盗链,设置允许访问的域名白名单,有效防止恶意网站盗用带宽资源并控制运营成本。
访问监控:启用访问日志
生产环境需要完整的访问记录用于安全审计、性能分析和故障排查。启用实时日志查询,记录所有访问请求的详细信息,便于识别异常访问模式、分析用户行为和优化网站性能。
常见问题
单页应用部署后刷新页面出现404错误如何解决?
单页应用的所有路由都由前端JavaScript处理,当直接访问或刷新非首页路由时,服务器找不到对应的物理文件。解决方法是将默认404页设置为index.html
,错误文档响应码设置为200
,这样所有"不存在"的路径都会重定向到应用入口,由前端路由正确处理。
如何关闭静态网站托管功能?
前往Bucket列表,单击目标Bucket名称,然后在Bucket左侧菜单栏单击
单击设置,清空默认首页和默认404页配置,单击保存,即可关闭静态网站托管功能。
静态网站是否支持动态内容?
静态网站托管只支持客户端执行的静态内容,包括HTML、CSS、JavaScript等。不支持服务器端动态语言(如PHP、Python、Java)。如需动态功能,可以采用前端框架的客户端渲染技术,或结合阿里云函数计算等无服务器服务实现后端API调用。