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 / ├ dist/ ├ index.html 
├ src/
└ package.json
Copy the code

Step 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.0Name: my-awesome-website-project services: my-service: # Arbitrary name: actions: pre-deploy: -plugin: Component: devsapp/fc # Use fc component props: region: Service: name: my-awesome-websites # Shenzhen usability website my-awesome-websites 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 code

The difference from above is that:

# Install the website-fc plug-in in the pre-deploy slotCopy the code

The 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-… :

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 parse value
U I D . {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:

Talk to give it a try: deploy – static – website – with – website – fc – plugin. Example. Dengchao. Fun (opens new window)

The sample project

The sample project for this article has been uploaded to GitHub: github.com/DevDengChao… new window)

reference

[1] Alibaba Cloud computing – Product Introduction (new Window) help.aliyun.com/document_de…

[2] Open new Window help.aliyun.com/document_de…

[3] Customizable runtime environment (opens New Window) help.aliyun.com/document_de…

[4] Configure the custom domain name (open new Window) help.aliyun.com/document_de…

[5] Serverless Devs official website (Opens New Window) www.serverless-devs.com/

[6] Configure AccessKey and AccessSecret(Open new window) www.serverless-devs.com/serverless-…

[7] Website-fc plugin github.com/devsapp/web…

Click here to learn more about the Serverless Devs website! Release the latest information of cloud native technology, collect the most complete content of cloud native technology, hold cloud native activities and live broadcast regularly, and release ali products and user best practices. Explore the cloud native technology with you and share the cloud native content you need.

Pay attention to [Alibaba Cloud native] public account, get more cloud native real-time information!