使用 Serverless Devs 外掛快速部署前端應用

阿里巴巴雲原生發表於2022-04-13
Serverdev前端

作者：鄧超 Serverless Devs 開源貢獻者

背景

我們在上文 [Aliyun] [FC] 如何使用 @serverless-devs/s 部署靜態網站到函式計算 中，詳細的介紹瞭如何通過 @serverless-devs/s 將已經開發好了的靜態網站部署到阿里雲函式計算（FC）上, 但是近期函式計算和 @serverless-devs/s 都更新了一系列的功能, 目前部署靜態網站的步驟可以更為簡潔了!

使用 website-fc 外掛部署靜態網站到 Custom Runtime 函式

假設我們現在有如下結構的前端工程：

/
├ dist/ 待部署的構建產物
│  └ index.html 
├ src/
└ package.json

step 3.安裝 @serverless-devs/s 並編寫 s.yaml

你問我步驟 1 和 2 去哪兒了? 當然是省掉了!

新增 @serverless-devs/s 命令列工具到工程:

在這裡插入圖片描述

然後在根目錄下建立一個基礎的 s.yaml 配置檔案:

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/
edition: 1.0.0
name: my-awesome-website-project
services:
  my-service: # 任意的名稱
    actions:
      pre-deploy:
        - plugin: website-fc     # 在 pre-deploy 插槽中安裝 website-fc 外掛
    component: devsapp/fc       # 使用 fc 元件
    props:
      region: cn-shenzhen       # 部署到任意的可用區, 例如深圳.
      service:
        name: my-awesome-websites   # 深圳可用區的 my-awesome-websites 服務
      function:
        name: website-fc-plugin    # my-awesome-websites 服務下的一個函式
        runtime: custom        # 使用 custom 執行環境
        handler: dummy-handler     # 由於使用了 custom 執行環境, 所以這裡可以隨便填
        codeUri: ./dist        # 部署 dist 資料夾下的全部內容
      triggers:
        - name: http
          type: http        # 建立一個 HTTP 型別的觸發器, 以便客戶端可以通過 HTTP 協議進行訪問
          config:
            authType: anonymous    # 允許匿名訪問
            methods: [ HEAD, GET ]  # 靜態網站只需要處理 HEAD 和 GET 請求就夠了

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

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

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

以及:
在這裡插入圖片描述

現在不必將整個工程部署到函式中, 只需要部署構建好的靜態檔案了。

step 4.部署到函式計算

配置好 AccessKey 和 AccessSecret 後(opens new window), 詳情參考：

https://www.serverless-devs.c...，執行命令:

在這裡插入圖片描述

你的網站就部署上去啦。

接下來就是配置自定義域名了, 配置好以後就可以通過你自己的域名訪問到這個網站了。

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

以自定義域名 deploy-static-website-with-website-fc-plugin.example.dengchao.fun 為例。

首先新增 CNAME 記錄, 解析值填寫 ${UID}.${REGION}.fc.aliyuncs.com。因為我們的 s.yaml 中設定的 region 是 cn-shenzhen, 所以對應的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com 。
在這裡插入圖片描述

接下來設定函式計算控制檯上的自定義域名:

在這裡插入圖片描述

訪問一下試試看: http://deploy-static-website-...(opens new window)

樣本工程

本文中的樣本工程已經上傳到 GitHub:
https://github.com/DevDengCha...(opens new window)

參考

[1] 阿里雲函式計算-產品簡介(opens new window)
https://help.aliyun.com/docum...

[2] 資源使用限制(opens new window)
https://help.aliyun.com/docum...

[3] 自定義執行環境(opens new window)
https://help.aliyun.com/docum...

[4] 配置自定義域名(opens new window)
https://help.aliyun.com/docum...

[5] Serverless devs 官網(opens new window)
https://www.serverless-devs.com/

[6] 配置 AccessKey 和 AccessSecret(opens new window)
https://www.serverless-devs.c...

[7] website-fc 外掛
https://github.com/devsapp/we...

點選此處，瞭解 Serverless Devs 官網更多資訊！

相關文章