作者 |?鄧超 ?Serverless Devs 開源貢獻(xiàn)者

上周，我們?cè)?a target="_blank" textvalue="《如何使用 Serverless Devs 部署靜態(tài)網(wǎng)站到函數(shù)計(jì)算》" linktype="text" imgurl="" imgdata="null" data-itemshowtype="0" tab="innerlink" data-linktype="2">《如何使用 Serverless Devs 部署靜態(tài)網(wǎng)站到函數(shù)計(jì)算》中，詳細(xì)地介紹了如何通過(guò)?@serverless-devs/s?將已經(jīng)開發(fā)好了的靜態(tài)網(wǎng)站部署到阿里云函數(shù)計(jì)算（FC）上。

但是近期函數(shù)計(jì)算和?@serverless-devs/s?都更新了一系列的功能, 目前部署靜態(tài)網(wǎng)站的步驟可以更簡(jiǎn)潔了!下面我們就一起看一下具體的操作步驟吧。

假設(shè)我們現(xiàn)在已有如下結(jié)構(gòu)的前端工程；

/├ dist/ 待部署的構(gòu)建產(chǎn)物│  └ index.html ├ src/└ package.json

你問(wèn)我步驟 1 和 2 去哪兒了? 當(dāng)然是省掉了!?

yarn add @serverless-devs/s -D

然后在根目錄下創(chuàng)建一個(gè)基礎(chǔ)的 s.yaml 配置文件:

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/edition: 1.0.0name: my-awesome-website-projectservices:  my-service: # 任意的名稱    actions:      pre-deploy:        # 在 pre-deploy 插槽中安裝 website-fc 插件        - plugin: website-fc         # 使用 fc 組件    component: devsapp/fc           props:      # 部署到任意的可用區(qū), 例如深圳.      region: cn-shenzhen             service:        # 深圳可用區(qū)的 my-awesome-websites 服務(wù)        name: my-awesome-websites         function:        # my-awesome-websites 服務(wù)下的一個(gè)函數(shù)        name: website-fc-plugin            # 使用 custom 運(yùn)行環(huán)境        runtime: custom                # 由于使用了 custom 運(yùn)行環(huán)境, 所以這里可以隨便填        handler: dummy-handler             # 部署 dist 文件夾下的全部?jī)?nèi)容        codeUri: ./dist              triggers:        - name: http          # 創(chuàng)建一個(gè) HTTP 類型的觸發(fā)器, 以便客戶端可以通過(guò) HTTP 協(xié)議進(jìn)行訪問(wèn)          type: http                  config:            # 允許匿名訪問(wèn)            authType: anonymous                # 靜態(tài)網(wǎng)站只需要處理 HEAD 和 GET 請(qǐng)求就夠了            methods: [ HEAD, GET ]

與上文中不同的地方在于:

actions:      pre-deploy:        - plugin: website-fc     # 在 pre-deploy 插槽中安裝 website-fc 插件

在 pre-deploy 插槽中安裝的 website-fc 插件能代替上文中的步驟 1 和步驟 2;

以及:

 # 部署 dist 文件夾下的全部?jī)?nèi)容        codeUri: ./dist

s deploy

你的網(wǎng)站就部署上去啦。

step?5.?配置自定義域名

訪問(wèn)一下試試看:

本文中的樣本工程已經(jīng)上傳到 GitHub:

https://help.aliyun.com/document_detail/52895.html

https://help.aliyun.com/document_detail/51907.html

https://help.aliyun.com/document_detail/132044.html

https://help.aliyun.com/document_detail/90763.html

https://www.serverless-devs.com/

https://www.serverless-devs.com/serverless-devs/command/config

https://github.com/devsapp/website-fc

為了讓開發(fā)者快速定位 Serverless 開發(fā)問(wèn)題，找到對(duì)應(yīng)解決辦法，阿里云云原生 Serverless 團(tuán)隊(duì)，全新發(fā)布 2022 版本《Serverless開發(fā)速查手冊(cè)》目前已開放下載，我們希望給 Serverless 開發(fā)者提供一本能夠速查、速懂的工具書，實(shí)實(shí)在在幫助開發(fā)者快速解決 Serverless 開發(fā)遇到的實(shí)際問(wèn)題，讓大家能夠踏踏實(shí)實(shí)享受 Serverless 帶來(lái)的技術(shù)紅利！后臺(tái)回復(fù)?手冊(cè)?即可下載閱讀。

基于 Serverless 架構(gòu)的頭像漫畫風(fēng)處理小程序

戳下方，詳細(xì)了解 Serverless Devs！