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

## 前言

公司經常有一些網站需要釋出上線，對比了幾款不同的產品後，決定使用阿里雲的函式計算（FC)來託管構建出來的靜態網站。FC 彈性例項自帶的 500 Mb 儲存空間[1]對靜態網站來說簡直是太充足了 。

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

## 部署靜態網站到 Custom Runtime 函式 
假設我們現在有如下結構的前端工程：

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

### step 1.編寫一個簡單的 HTTP 伺服器
 
以 Express 為例, 首先新增依賴到工程:

```css
yarn add express
```

然後新建 app.js 並寫入:

```css
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 伺服器, 所以我們需要在根目錄下建立這個檔案:

```css
#! /bin/bash
node app.js
```

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

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

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

```css
yarn add @serverless-devs/s -D
```

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

```css
# 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] 後， 執行命令:

```css
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 .

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/4567146490a84d2fba18f4b3456baa5f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_6YeM5be05be05LqR5Y6f55Sf,size_19,color_FFFFFF,t_70,g_se,x_16)

接下來設定函式計算控制檯上的自定義域名:
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/133ba50ca649463bb50667cac443a488.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zi_6YeM5be05be05LqR5Y6f55Sf,size_20,color_FFFFFF,t_70,g_se,x_16)

訪問一下試試看:
 http://deploy-static-website-to-fc.example.dengchao.fun(opens new window)

## 樣本工程
本文中的樣本工程已經上傳到 GitHub:
 https://github.com/DevDengChao/deploy-static-website-to-fc-example(opens new window)

## 參考及相關連結

[1] 500 Mb 儲存空間
https://help.aliyun.com/document_detail/51907.html

[2] 配置好 AccessKey 和 AccessSecret
https://www.serverless-devs.com/serverless-devs/command/config

[3] 阿里雲函式計算-產品簡介
https://help.aliyun.com/document_detail/52895.html

[4] 資源使用限制
https://help.aliyun.com/document_detail/51907.html

[5] 自定義執行環境
https://help.aliyun.com/document_detail/132044.html

[6] 配置自定義域名
https://help.aliyun.com/document_detail/90763.html

[7] Serverless devs 官網
https://www.serverless-devs.com/

點選[此處](https://www.serverless-devs.com/)，瞭解 Serverless Devs 官網更多資訊！

如何使用 Serverless Devs 部署靜態網站到函式計算

相關文章