Deploying static websites using OSS and CDN on Alibaba cloud international

As a collection of static files - There is little difference in deployment between static websites and front-end applications . They all come with static files , for example HTML,CSS,JS,JPEG and PNG.

A common method for hosting static websites on alicloud is to use Object storage service （OSS） and Content distribution network （CDN） Of “ Static hosting ” function ：

1. Managed assets do not require a server
2. OSS Store redundant copies of assets across multiple zones within a region ; therefore , Provides high availability at the regional level for the source of assets , Without doing anything else
3. CDN For improved delivery , To improve the user experience
4. CDN Is a huge global network of interconnected servers , Therefore, it provides high availability for user oriented servers all over the world
5. OSS Very cheap

This article 87cloud In this paper, we introduce a simple and reliable way to integrate static websites / How to deploy front-end applications to Alibaba cloud . It provides a good reference for the engineering team of the company who wants to automate the deployment . It should be noted that , Although this can be done with video 、 Audio works with large files , But Alibaba cloud CDN Provides optimized for each use case CDN type （ therefore , By separating these assets and using dedicated CDN type , Can provide a better user experience ）.

precondition

Follow this guide , The following conditions need to be met ：

1. Aliyuncli  and  ossutil  Installed and configured . If you have Docker, The faster option is to use “python hold-all ”, These include
2. already installed curl（ perhaps , You can use the browser with checking function in the section of checking the title ）
3. Yes Object storage service  （OSS） and Content distribution network  （CDN） Deep understanding of
4. Linux Basic on the box Linux Skill

Architecture

The following figure shows a simplified flow of what we are going to implement ：

So what happened here ？ Have source assets （“ Source ”） Your computer will push it to OSS.OSS act as CDN Of “ Source ”, Whenever a copy of an asset is not found in its cache , It will take assets from it ;CDN Accept all requests for static files .

Realization

OSS bucket

Create your OSS Buckets or use existing buckets . I will use CLI To achieve this ：

# ossutil mb oss://angry-medusa 1.244258(s) elapsed # ossutil ls oss://angry-medusa Object Number is: 0 0.350505(s) elapsed

Upload to OSS

Upload some static files in the current directory to the newly created bucket ; In this example , We uploaded 1 A document – An index .html

# ossutil cp . oss://angry-medusa –rf

Here's what it might look like ：

Now? , We are OSS Has this file in . Now? , Let's make sure it serves these static assets .

OSS Static page function

Go to the console and bucket , First , take ACL Set to public read：

Now? , Set the default home page as our index .html page ：

Let's verify OSS Whether it can provide services for our index .html：

cool , We are OSS Hosted a page on . Simple and easy to use .

add to CDN

although OSS It is good enough for sites with small traffic , but OSS Can't handle a lot of traffic by itself （ That is, a large number of concurrent reads ）, And bound to a region . In order to provide a better user experience , You should use CDN, It will provide cached static assets from nodes physically closer to the user , Let alone . The other came from CDN Absorb all incoming reads instead of OSS.

Access control , Set a point to us OSS As the origin CDN domain name , And use “ overseas ” As a region （ China and global options require you get ICP license ）：

wait for CDN start-up ：

Now? , Let's go through CDN Load our microsite . By clicking on the newly created CDN, We can open the details page , You can configure caching rules in it ：

At the time of writing ,CDN The default behavior of is to cache resources 10 second . This is far from optimal , Because it makes CDN Return to too often Origin. Let's set a rule , Cache all resources for a whole month ：

Let's write down what we are CDN To obtain the DNS CNAME：

Because we don't actually own the domain , And it is not bound to CDN CNAME, So we will be in curl Sent in “Host” Header to solve this problem ：

We can see , Our first request missed the cache . Let's try publishing another ：

therefore , The request is actually provided from the cache . Let's see if we update the source html file , Upload again to OSS And query OSS and CDN What's going to happen ：

You can see CDN Providing obsolete version of file . Because we actually know when and which files change , So we can make CDN invalid , Then test whether the updated file is satisfied ：

Please note that , This time we are curl and invalidation Use full path in . The reason behind this is CDN act , It applies to precise documents / Directory name , to “http://angry-medusa.me.w.kunlungr.com/” Your request will still provide us with outdated documents , Because we didn't invalidate the root directory .

In addition to making it be called “ Pull ” The cache of is invalid , Another technique is to put a newer version of the asset “ push ” To CDN in . The following figure illustrates the main differences between the two technologies ：

If a resource is hit by a large number of requests and fails , be CDN In from OSS The time required to get the new version may be invalid , Because all requests for new resources will be forwarded to the origin . Although very robust OSS There are certain concurrent read restrictions , But it may also run out . under these circumstances , The method on the right is more advantageous , Because it guarantees CDN Always in “HIT” Running on the basis of , Assets are actively “ PUSH ” Enter into , Instead of relying on the logic to retrieve it from the origin .

Lock the operating system

up to now , We have actually been able to learn from OSS or CDN Request page . In the real world , This is not desirable , Because malicious users can easily run out OSS Read volume . To solve this problem , Please go to... In the console first OSS, And remove the storage bucket from “ Public read ” Change to “ private ”：

Now turn to CDN Console and change the bucket settings ：

If you have not previously authorized CDN Use OSS, Please do this in the following way ：

You will be directed to access the enable page ：

Please note that , This is a general access rule ; You may want to go through RAM The console more finely restricts access . After reloading the form , It allows CDN visit OSS：

Let's verify , We no longer have direct access to OSS, but CDN from Origin There is no problem acquiring assets ：

this is it ; We are now stopping the right OSS Direct access , And allow from CDN Visit it .

Conclusion

As you can see , Deploy front-end applications and get OSS and CDN The significant advantage of is quite straightforward ：

# copy your assets over: # ossutil cp . oss://angry-medusa –rf # invalidate the cache through pull: # aliyuncli cdn RefreshObjectCaches --ObjectType Directory --ObjectPath http://angry-medusa.me/ # invalidate through push # aliyuncli cdn PushObjectCache --ObjectPath http://angry-medusa.me/ --ObjectTyp e Directory # party

This document describes the use of OSS Static website hosting function and CDN Pairing is a simple way to deploy front-end applications to alicloud . This approach enables teams to quickly start deploying their front-end applications , Without going through setup and maintenance Web The pain of server infrastructure .