基于MSE云原生网关和阿里云OSS实现静态网站托管_微服务引擎(MSE)-阿里云帮助中心

静态网站是指所有的网页都由静态内容构成，包括HTML文件、CSS文件和客户端执行的脚本（例如JavaScript文件）。您可以将静态网站涉及的文件存储到OSS（Object Storage Service）的存储空间（Bucket），然后通过云原生网关代理OSS中存储的静态网站内容。本文介绍如何基于MSE云原生网关和阿里云OSS实现静态网站托管。

前提条件

创建MSE云原生网关。

背景信息

通常来说，Web应用都会有对外服务的页面，用户访问页面时通常会先请求静态页面，然后根据JavaScript脚本发起对后端服务的调用，最后根据响应结果动态修改页面内容。在前后端分离的设计思想下，静态文件和后端服务解耦，使得静态页面和后端服务可以分开维护，大大提升了开发效率。

在前后端架构下，您需要借助存储服务将静态页面单独存储，与后端服务分开部署，通过七层网关再决定请求路由到静态页面或者后端服务。

场景示例

假设有一个Web应用，对外域名为example.com，静态页面由OSS托管，并通过MSE云原生网关代理静态页面以及后端服务。架构示意图如下：

场景示例

所有静态页面的请求均被云原生网关转发到OSS存储。例如，访问example.com或者example.com/index.html时，返回网站首页index.html。
其他业务的请求被云原生网关转发到目标服务。例如，访问example.com/app时，返回后端服务处理请求的业务结果。

步骤一：创建存储Bucket并上传静态页面

您需要创建一个公共读的Bucket，用于存放静态页面。

登录OSS管理控制台。
在左侧导航栏，单击Bucket 列表，然后单击创建 Bucket。

在创建 Bucket面板，按照如下说明进行相关配置，其他配置项保留默认配置，然后单击完成创建。

配置项	说明
Bucket名称	设置Bucket名称。本示例设置为`static-demo-0`。
存储类型	选择标准存储。
读写权限	单击公共读，在确认选择公共读对话框中单击继续修改。

在Bucket 列表页面，单击目标Bucket。在文件列表页面，单击上传文件，上传以下示例的静态网页index.html，文件 ACL选择继承 Bucket。

<html>
   <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>开始阿里云OSS托管</p>
       <p>这是索引页面</p>
   </body>
 </html>

单击上传文件。
您可以在上传列表页签查看各个文件的上传进度。上传完成后，您可以在目标路径下查看上传文件的文件名、文件大小以及存储类型等信息。

（可选）步骤二：设置默认首页

如果您希望在访问业务域名example.com的根路径/时，返回静态页面index.html，您需要在目标Bucket中设置静态页面。设置首页

如果您希望在访问不存在的静态文件时，返回一个默认的404页面，您需要额外在Bucket中上传一个404.html。同时，需要在静态页面中设置404页面。

<html>
   <head>
       <title>您访问的页面不存在</title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>您访问的页面不存在</p>
       <p>您可以试试访问首页</p>
   </body>
 </html>

设置首页

关于如何设置默认首页，请参见为examplebucket配置静态网站托管。

步骤三：查看OSS的Bucket的内部默认域名

阿里云OSS默认为您创建的Bucket创建域名，您可以在概览页面的访问端口区域，查看内网访问域名。具体操作，请参见ECS实例通过OSS内网地址访问OSS资源。

步骤四：在MSE云原生网关为OSS的Bucket创建服务

对于MSE云原生网关来说，存储用户静态页面的Bucket也是一个服务，因此需要在MSE云原生网关上为其创建一个基于DNS服务发现方式的服务。

登录MSE网关管理控制台。
在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。
在左侧导航栏，选择路由管理，然后选择服务页签。

单击创建服务。在创建服务面板，按如下说明进行相关配置，然后单击确定。

配置项	说明
服务来源	选择DNS 域名。
服务名称	用于唯一标识服务。本示例将服务名称设置为`static`。
服务端口	配置为80。
域名列表	后端服务的域名。本示例将域名设置为步骤三中Bucket的内部域名，即`static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com`。
TLS模式	选择关闭。

步骤五：在云原生网关为静态页面创建路由

登录MSE管理控制台。
在左侧导航栏，选择云原生网关 > 网关列表，单击目标网关名称。
在网关列表页面，单击目标网关名称。
在左侧导航栏，单击路由管理，然后选择路由页签。
单击创建路由。在创建路由页面，创建一个匹配条件为前缀是，路径为/，目标服务为static的路由。具体操作，请参见创建路由。
在路由详情页面，单击策略配置页签，为已创建的路由开启重写策略。将路由的Host重写为OSS Bucket的内部域名static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com，然后单击确定。开启重写后，网关转发请求到后端时，会按照您配置的重写策略对原请求的Path和Host进行修改。具体操作，请参见配置重写策略
删除OSS响应中的content-disposition头部，然后开启Header设置策略，网关会操控请求和响应的Header。具体操作，请参见配置Header设置策略。

步骤六：访问测试

假设您的业务域名为example.com，在浏览器地址栏分别输入example.com、example.com/index.html和example.com/test，查看返回的静态页面。

因为步骤二已在OSS的Bucket中设置默认首页，所以在浏览器地址栏输入example.com，会返回index.html页面。
您也可以明确访问index.html文件。例如，在浏览器地址栏输入example.com/index.html，也会返回index.html页面。
当访问不存在的文件。例如，在浏览器地址栏输入example.com/test，会返回在OSS的Bucket中设置的404.html页面。