Summary: Both function computing and @serverless-devs/s have recently been updated with a number of features, making it easier to deploy static websites!
Author: Deng Chao Serverless Devs Open source contributor
background
We saw above how [Aliyun] [FC] used @serverless-devs/s to deploy static websites to function calculations, Detailed introduction of how to use @serverless-devs/s will have developed the static site deployment to Ali cloud function computing (FC), but the recent function computing and @serverless-devs/s have updated a series of functions, the current deployment of static site steps can be more concise!
Deploy static web sites to the Custom Runtime function using the website-FC plug-in
Suppose we now have a front-end project with the following structure:
│ ├ index.html ├ SRC / ├ package.jsonCopy the codeStep 3. Install @serverless-devs/s and write S.yaml
You ask me what happened to steps 1 and 2? Of course!
Add @serverless-devs/s command line tool to project:
Then create a basic S.aml configuration file in the root directory:
# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/ edition: 1.0.0 name: my - awesome website - project services: # Install the website-fc plug-in component in the pre-deploy slot: Devsapp /fc # Use FC component props: region: CN-shenzhen # Deploy to any available zone, such as Shenzhen. My-awesome websites # my-awesome websites service function: name: Website-fc-plugin # my-awese-websites runtime: custom # website-awese-websites CodeUri:./dist # Triggers: - name: HTTP type: triggers: codeUri:./dist # Config: authType: anonymous # Allow anonymous access methods: Static sites only need to handle HEAD and GET requestsCopy the codeThe difference from above is that:
# Install the website-fc plug-in in the pre-deploy slotCopy the codeThe website-FC plug-in installed in the pre-deploy slot can replace steps 1 and 2 above.
And:
Now you don’t have to deploy the entire project into a function, you just need to deploy the built static files.
Step 4. Deploy to function calculations
Configure AccessKey and AccessSecret (open New Window).
www.serverless-devs.com/serverless-…
Execute the following command:
Your website is deployed.
The next step is to configure the custom domain name, configured after you can access the site through your own domain name.
Step 5. Configure the user-defined domain name
To deploy custom domain name – static – website – with – website – fc – plugin. Example. Dengchao. Fun for example.
First add the CNAME record and fill in the resolution value UID.{UID}.uid.{REGION}.fc.aliyuncs.com. Since the region set in S. yaml is CN-shenzhen, the corresponding value is xxxxxx.cn-shenzhen.fc.aliyuncs.com.
Next set the function to calculate the custom domain name on the console:
Give it a try:
deploy-static-website-with-website-fc-plugin.example.dengchao.fun(opens new window)
The sample project
The sample project in this article has been uploaded to GitHub:
Github.com/DevDengChao… new window)
reference
[1] Aliyun Function Computing – Product Introduction (Opens New Window)
Help.aliyun.com/document\_d…
[2] The Labour of Love (click to view)
Help.aliyun.com/document\_d…
[3] Customizable runtime environment (Opens New Window)
Help.aliyun.com/document\_d…
[4] Configure the custom domain name (open new Window).
Help.aliyun.com/document\_d…
[5] Serverless devs 官网(opens new window)
www.serverless-devs.com/
[6] Configure AccessKey and AccessSecret(Open New window)
www.serverless-devs.com/serverless-…
[7] website – fc plug-in
Github.com/devsapp/web…
The original link
This article is the original content of Aliyun and shall not be reproduced without permission.