Author: Han Xi | Ali Yunyun native middleware front-end leader
In this article, we will introduce how to build a dynamic Web site with low cost, flexible scalability, and limited flow.
I believe many students have wanted to have their own Web site idea, but if you want to build a dynamic site, you need to purchase cloud host, buy bandwidth and build their own environment, deployment operation and maintenance, the overall cost will be very high. If you just make a static site, a lot of ways are also very cheap, but the overall functionality will be weaker, and the revenue effect will be much worse.
Let’s use Serverless Devs to demonstrate how to build a modern, dynamic Web site with the Serverless architecture.
Build a modern dynamic Web site
1. Architecture overview
First of all, I would like to introduce the architecture diagram of this Web application:
We use Ali Cloud gateway as the main traffic entrance, and then forward dynamic requests to Ali Cloud function calculation, static files are handed to Ali cloud object storage OSS for processing. And do a series of security measures on the gateway, such as limiting traffic.
2. Preparation
As shown in the figure above, we need to open several aliyun products:
- Cloud analytical DNS
- API gateway
- Function to calculate
- Object storage OSS
Prepare the domain name that oneself like next, can go ten thousand net applies for, the cheapest has a few dollars only, the author applies for
Serverbasic developer.com Only has 48 top-level domain names per year. This deployment will be based on The Hong Kong region. Real-name authentication is required for domain names.
(By the way, DNS domain name resolution costs money, about 40.8 yuan/year for the first domain name in the personal version, plus about 20 yuan for each additional domain name.)
NPM install -g @serverless-devs/s
3. Operation steps
1) Key configuration
For starters, the first step in using Serverless Devs is to configure the relevant cloud vendor’s secret key information so that the relevant build and deployment operations can take place. Just open the terminal of your computer and enter S config add to enter the wizard-style operation.
(Open the link for a more detailed aliyun secret key tutorial)
2) Application initialization
After the key is configured, you can log in to serverless Devs Application Center, search for “modern-web-application”, and perform the following operations to search for relevant application templates more conveniently.
1. Click the copy command
2. Open the CLI terminal and paste
3. Enter the prepared domain name (for example, Demo.serverbasic developer.com) and oss bucket name (hanxie-serverless-web) as prompted. You are advised to create an OSS bucket on the console in advance
3) Build deployment
After initialization, you can choose to make configuration changes to the project, such as changing the gateway group name:
Function computes the service name or function name:
After the modification, type S deploy. The deployment build time will take less than 1 minute
The final result is as follows:
4) Visit and view
When we have deployed, we can check to see if the gateway, OSS, function calculation, and DNS have been deployed to do what we need.
- The gateway part
- Function calculation part
- OSS part
- DNS Resolution section
At this point, we can try to access Demo.serverbasic developer.com and find that the access is blocked:
There are two possible reasons:
\
- The gateway domain name is not bound successfully
- Apigateway group management
- Myserverlessdemo check domain binding and find that this part is actually OK;
- If the DOMAIN name of OSS is not bound successfully, you can check it on the OSS console
- Object storage
- The Bucket list
- Transmission management, the above domain name is not bound;
Here we click the domain name binding, enter the above domain name binding, then visit the domain name again, you can see:
Serverless Devs Application center deployment effect
5) Site security
The site we deployed is not HTTPS yet, so we need to make it HTTPS to increase its security.
We can apply for a free certificate on Ali Cloud SSL and bind it to the domain name. The specific operations are as follows:
- Visit aliyun official website
- Search for SSL certificates and go to Buy
- Then choose the free domain name
Then go to the SSL console, select “SSL Certificate – Free Certificate”, and click Create Certificate.
A list of data to apply for the certificate will be generated:
Click the “Certificate Application” on the right to fill in your information and domain name, and then verify, and “Submit for review” after passing:
Next, go back to the Apigateway console and select “Certificates” in the domain binding section. You can see that the domain name has been created:
After the synchronization, wait for a moment and visit https://demo.serverless-developer.com to see the results:
At this point you have an encrypted Web site.
After encryption also need to consider a problem, for example, this time I made the site into a demo, may face a lot of people to visit, or even be attacked; So how do I limit the high cost of too much data? With a gateway, the problem of limiting traffic becomes simple.
We log in to the gateway console:
- Select plug-in management;
- Click on the classic Network instance plugin – Flow Control;
- And create policies;
Then set up a maximum of 5 visits per minute:
After the policy is created, it is time to bind the API, as shown below:
With the policy set and the API bound to access the home page, let’s test it out. Visit the domain name and refresh 5 times. The 6th time you find the site is not accessible:
This shows that your site has been successfully limited stream.
More Serverless security issues, such as Auther authentication, VPC access, multi-environment deployment, can be discussed with you later. Limited by space, I will not explain in this article. If you are interested, you can leave a message in the comments section.
6) The site can be observed
When a site goes live, it will inevitably require some observable capabilities, such as PV, UV, API anomalies, etc. There are many related products, such as Baidu statistics, Google statistics and so on. In addition to the general indicator monitoring, you can also customize and report some key information through ARMS, such as counting the number of clicks on the share button and uploading the sourceMap to locate problems.
Serverless Application architecture disassembled
1. Overall directory structure description
The Serverless architecture project consists of three main parts:
- S. yaml configuration file
- Js Runtime API service
- Front-end standard REACT project
You can choose the backend API service architecture and the front-end development framework without affecting the overall effect. It is worth mentioning that the API framework used here is the Serverless First development framework provided by Serverless Devs, which is optimized for cold start. You can use the development syntax sugar of familiar framework, such as koA-style syntax sugar here. You can also choose Express, the details can be accessed from the official library, ideal for small to medium sized Web projects.
2. Gateway Description
In fact, the core part of the Web application architecture is in the gateway, through the gateway to achieve dynamic and static streaming. Domain names and certificates are bound through gateways for traffic limiting and security authentication. To better use the gateway we developed apigateway component, which is an API publishing service tailored to the official SDK. It is fully open source and allows you to customize more of the gateway routing deployment process as needed, such as adding multiple environment Settings, etc. I have simplified the configuration to allow developers to focus on routing and target services, which saves a lot of time compared to configuring apis one by one.
However, it is still complicated at present. We plan to solve this problem through visual configuration of Serverless Desktop. We can also offer more issues to Devs officials to improve the gateway components together.
3. True statement of tariff
In fact, as we mentioned at the beginning, the cost of a Web site with this Serverless architecture is very low. If you exclude the database, you only need to apply for a domain name, maybe a few dollars, and then you will be charged entirely by traffic. For the site of an individual or a new venture, it is undoubtedly a great benefit. Here I can share my personal bills with you.
You can see that the cost is really low, of course, if you have a small application, not enterprise production. If your project blows up and traffic and fees come up, you’ll really see the benefits of the Serverless architecture.
4. About databases
The application template of this article is only to do service forwarding, so it does not involve database, presumably we will also be very concerned about the use of database, so in the next series of chapters I will focus on the tableStore table storage Serverless Nosql introduction. We will introduce the use of Mysql and mongodb step by step.
Although there are still many problems with using database in Serverless architecture, such as database connection will increase the cold startup time, and the cost of pre-database is still high, don’t worry, we believe that with the widespread implementation of Serverless architecture, these problems will be solved.
What is “modern application”?
The title of the article mentions the concept of “Modern Application”. Here I also explain to you what “Modern Application” means. In fact, the concept of modern application has been more and more widely recognized. Both Ali Cloud, Huawei Cloud and AWS are promoting the concept of modern applications. Here is a reference to the AWS concept of Modern Application:
A modern application is the combination of modern technologies, architectures, software delivery practices, and operational processes that lead teams to deliver value more quickly, frequently, consistently, and safely. These applications typically take advantage of loosely coupled, distributed technologies and focus on event-driven, serverless components that allow teams to offload undifferentiated heavy lifting in order to spend more time on delivering value for their customers. A modern application also takes advantage of operational and security tooling to increase the reliability and consistency of deployments, while making it safe to deploy many times a day. The use of automation of infrastructure, security, and deployments allows the teams that own modern applications to move more quickly than if they were relying on manual processes or more significant operational management.
In a nutshell, modern applications are a combination of modern technologies, architectures, software delivery practices, and operational processes that can lead teams to deliver value faster, more frequently, more consistently, and more safely. Things like Serverless and event-driven architectures fall behind modern applications.
This article also objectively demonstrates the value of this architecture, including ultra-low cost, security, scalability, etc. However, there is still no silver bullet in software engineering, and there are still many problems to be solved in Modern Application, which requires everyone to practice and verify together. In short, I believe that only through practice can we really get the answers we want.
A link to the
1) Serverless Devs: github.com/Serverless-…
2) analytical DNS cloud: wanwang.aliyun.com/domain/dns
3) API gateway: www.aliyun.com/product/api…
4) Function calculation:
www.aliyun.com/product/fc
5) object storage OSS: www.aliyun.com/product/oss
6) Wanwang.aliyun.com/
7) Key acquisition document: www.serverless-devs.com/zh-cn/docs/…
8) Serverless Hub: serverlesshub.resume.net.cn/#/hubs/spec…
9) SSL certificate of choose and buy: www.aliyun.com/product/cas
10) very different application of real-time monitoring service: www.aliyun.com/product/arm…
11) Official library: github.com/devsapp/dk-…
12) Apigateway Components: github.com/devsapp/api…
13) Tablestore table store: https://www.aliyun.com/product/ots
About the author:
Wang Qing (Hanxi) | Head of aliyunyun native middleware front-end
In 2016, I joined Ali Middleware, engaged in the r&d of enterprise console of cloud products, and was responsible for the front-end r&d of more than 20 cloud products of middleware. The main technology stack is the general technology of big front-end. At present, I focus on the construction of Serverless developer tool chain, and I am one of the r&d leaders of cloud native Serverless Devs.
Click here to jump to Serverless Devs~