如何使用 Serverless Devs 部署靜態網站到函式計算-有解無憂

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

前言

公司經常有一些網站需要發布上線，對比了幾款不同的產品后，決定使用阿里云的函式計算（FC)來托管構建出來的靜態網站，FC 彈性實體自帶的 500 Mb 存盤空間[1]對靜態網站來說簡直是太充足了，

函式計算資源使用：https://help.aliyun.com/document_detail/51907.html

部署靜態網站到 Custom Runtime 函式

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

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

step 1.撰寫一個簡單的 HTTP 服務器

以 Express 為例, 首先添加依賴到工程:

yarn add express

然后新建 app.js 并寫入:

let Express = require("express");
let app = new Express();
app.use(Express.static('dist'));
 //使用 dist 檔案夾中的內容對外提供靜態檔案訪問
app.use((req, res) => { res.redirect("/"); }); 
// 重定向無法處理的請求到網站的根目錄
let port = 9000;
app.listen(port, () => { console.log(`App started on port ${port}`); }); 
// 監聽 FC custom 運行時默認的 9000 埠

通過 node app.js 啟動這個簡單的 Express 服務器, 并問 http://localhost:9000 確認 /dist/index.html 能被訪問到，

接下來就是把 app.js 和 dist 一起發布到函式計算上就行了，

step 2.撰寫 bootstrap

函式計算 custom 運行時要求用戶提供一個 bootstrap 檔案用于啟動自定義的 HTTP 服務器, 所以我們需要在根目錄下創建這個檔案:

#! /bin/bash
node app.js

注意第一行的 #! /bin/bash 是必須的, 不然函式計算不知道該用哪一個解釋器來執行腳本中的內容，Windows 用戶記得把這個檔案的換行符從 /r/n 改成 /n , 不然會遇到函式計算啟動超時的問題，

step 3. 安裝 @serverless-devs/s 并撰寫 s.yaml

添加 @serverless-devs/s 命令列工具到工程:

yarn add @serverless-devs/s -D

然后在根目錄下創建一個基礎的 s.yaml 組態檔:

# https://github.com/devsapp/fc/blob/main/docs/zh/yaml/
edition: 1.0.0
name: my-awesome-website-project
services:
  my-service: # 任意的名稱
    component: devsapp/fc       # 使用 fc 組件
    props:
      region: cn-shenzhen       # 部署到任意的可用區, 例如深圳.
      service:
        name: my-awesome-websites   # 深圳可用區的 my-awesome-websites 服務
      function:
        name: www-example-com     # my-awesome-websites 服務下的一個函式
        runtime: custom        # 使用 custom 運行環境
        handler: dummy-handler     # 由于使用了 custom 運行環境, 所以這里可以隨便填
        codeUri: ./          # 部署當前檔案夾下的全部內容
      triggers:
        - name: http
          type: http        # 創建一個 HTTP 型別的觸發器, 以便客戶端可以通過 HTTP 協議進行訪問
          config:
            authType: anonymous    # 允許匿名訪問
            methods: [ HEAD, GET ]  # 靜態網站只需要處理 HEAD 和 GET 請求就夠了

step 4. 部署到函式計算

配置好 AccessKey 和 AccessSecret[2] 后，執行命令:

s deploy

你的網站就部署上去了，

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

step 5.配置自定義域名

以自定義域名 deploy-static-website-to-fc.example.dengchao.fun 為例；
首先添加 CNAME 記錄, 決議值填寫 ${UID}.${REGION}.fc.aliyuncs.com. 因為我們的 s.yaml 中設定的 region 是 cn-shenzhen, 所以對應的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com .

在這里插入圖片描述