Implement static website hosting by using MSE cloud-native gateways and Alibaba Cloud OSS - Microservices Engine

A static website is a collection of web pages that contain only static content. Static content includes HTML files, CSS files, and scripts that can be executed on the client, such as JavaScript files. You can store files that are required by static websites in Object Storage Service (OSS) buckets and then use Microservices Engine (MSE) cloud-native gateways as proxies to manage the static website content that is stored in OSS buckets. This topic describes how to implement static website hosting by using MSE cloud-native gateways and Alibaba Cloud OSS.

Prerequisites

A cloud-native gateway is created. For more information, see Create an MSE cloud-native gateway.

Background information

In most cases, web applications provide web pages for external access. During page accesses, static web pages are requested first. Then, calls to backend services are initiated based on JavaScript scripts. At last, the content of web pages is dynamically modified based on the response result. In the design concept of frontend and backend separation, static files are decoupled from backend services. This way, static pages and backend services can be separately maintained, and development efficiency is significantly improved.

In the frontend and backend separation architecture, you must use a storage service to store static pages and deploy backend services in another location. Then, you can use a Layer-7 gateway to route requests to the static pages or backend services.

Sample scenario

In this scenario, a web application is available. The domain name for external access is example.com, and static pages are stored in OSS buckets. An MSE cloud-native gateway is used as a proxy to route requests to OSS buckets in which static pages are stored or route requests to backend services.

The MSE cloud-native gateway routes all requests for static pages to OSS buckets. For example, when you visit example.com or example.com/index.html, the homepage index.html is returned.
The cloud-native gateway routes requests for other services to the destination backend service. For example, when you visit example.com/app, the service processing result of the backend service is returned.

Step 1: Create an OSS bucket and upload a static page to the OSS bucket

Create a public-read bucket to store static pages.

Log on to the OSS console.
In the left-side navigation pane, click Buckets. On the Buckets page, click Create Bucket.

In the Create Bucket panel, configure the parameters that are described in the following table, retain the default settings for other parameters, and then click OK.

Parameter	Description
Bucket Name	The name of the bucket. In this example, the bucket name is `static-demo-0`.
Storage Class	Select Standard.
ACL	Click Public Read. The Are you sure you want to select Public Read? message appears. In this message, click Continue.

On the Buckets page, click the name of the created bucket. In the Objects pane, click Upload Object to upload the following static web page index.html. For the upload operation, select Inherited from Bucket for Object ACL.

<html>
   <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
   </head>
   <body>
       <P>Configure static website hosting for Alibaba Cloud OSS.</p>
       <P>This is the index page.</p>
   </body>
 </html>

Click Upload Object.
You can view the upload progress of files in the Task List panel. After the file is uploaded, you can view the name, size, and storage class of the uploaded file in the destination directory.

Step 2 (Optional): Configure the default homepage

If you want the static page index.html to be returned when you access the root path / of the service domain name example.com, configure the static page as the default homepage in the destination bucket. 设置首页

If you want the default page 404 to be returned when you access a non-existent static file, upload the 404.html page to the bucket. You also need to configure the 404 page in the static page.

<html>
   <head>
       <title>The page you visited does not exist</title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>The page you visited does not exist.</p>
       <p>You can try to visit the homepage.</p>
   </body>
 </html>

设置首页

For more information about how to configure the default homepage, see Configure static website hosting for the examplebucket bucket.

Step 3: View the default domain name of the OSS bucket

By default, Alibaba Cloud OSS creates a domain name for the bucket that you create. You can view the domain name in the Port section of the Overview page. For more information, see Access to OSS resources from an ECS instance by using an internal endpoint of OSS.

Step 4: Create a service for the OSS bucket on the MSE cloud-native gateway

For the MSE cloud-native gateway, the OSS bucket that stores static pages is also considered as a service. Therefore, you must create a service based on Domain Name System (DNS) service discovery on the MSE cloud-native gateway.

Log on to the MSE console.
In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.
In the left-side navigation pane, click Routes. On the page that appears, click the Services tab.

On the Services tab, click Add Service. In the Add Service panel, configure parameters and click OK.

Parameter	Description
Service Source	Select DNS Domain Name.
Service Name	Enter a name for the service. This parameter uniquely identifies a service. In this example, the service name is `static`.
Service Port	Enter 80.
Domain Names	Enter the domain name of the backend service. In this example, `static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com` is used, which is the internal domain name of the OSS bucket in Step 3.
TLS mode	Select Disabled.

Step 5: Create a route for the static page on the cloud-native gateway

Log on to the MSE console.
In the left-side navigation pane, choose Cloud-native Gateway > Gateways. On the Gateways page, click the name of the gateway.
On the Gateways page, click the name of the gateway.
In the left-side navigation pane, click Routes, and click the Routes tab.
On the Routes tab, click Add Route. On the Add Route page, create a route whose matching rule is Prefix, path is /, and destination service is static. For more information, see Create a route.
On the Routes tab, click the name of the created route. On the route details page, click the Policies tab. In the left-side navigation pane of the Policies tab, click Rewrite to add a rewrite policy for the route. Enter the internal domain name static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com of the OSS bucket in the Destination Host field, and click Save. After the rewrite is enabled, the gateway rewrites the path and host domain of a request based on the configured rewrite policy when the gateway forwards the request to the backend service. For more information, see Configure a rewrite policy.
In the left-side navigation pane of the Policies tab, click Edit Header. Add a policy of deleting the content-disposition header from OSS responses and enable the policy. The gateway manages the headers in requests or responses. For more information, see Configure a header setting policy.

Step 6: Perform access testing

In this example, the service domain name is example.com. In the address bar of a web browser, enter example.com, example.com/index.html, and example.com/test separately, and check the returned static pages.

After you enter example.com in the address bar of a web browser, you are redirected to the index.html page because the index.html page is configured as the default homepage in the OSS bucket in Step 2.
You can also directly access the index.html page. After you enter example.com/index.html in the address bar of a web browser, you are redirected to the index.html page.
For a non-existent page named test, after you enter example.com/test in the address bar of a web browser, you are redirected to the 404.html page that is uploaded to the OSS bucket.