簡介：部署個靜態(tài)網(wǎng)站到函數(shù)計算~

前言

公司經(jīng)常有一些網(wǎng)站需要發(fā)布上線，對比了幾款不同的產(chǎn)品后，決定使用阿里云的函數(shù)計算（FC)來托管構(gòu)建出來的靜態(tài)網(wǎng)站。 FC 彈性實例自帶的500 Mb 存儲空間對靜態(tài)網(wǎng)站來說簡直是太充足了 。

函數(shù)計算資源使用：資源使用限制 - 函數(shù)計算 - 阿里云

部署靜態(tài)網(wǎng)站到 Custom Runtime 函數(shù)

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

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

step 1. 編寫一個簡單的 HTTP 服務(wù)器

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

yarn add express

然后新建 app.js 并寫入:

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

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

接下來就是把 app.js 和 dist 一起發(fā)布到函數(shù)計算上就行了。

step 2. 編寫 bootstrap

函數(shù)計算 custom 運行時要求用戶提供一個 bootstrap 文件用于啟動自定義的 HTTP 服務(wù)器, 所以我們需要在根目錄下創(chuàng)建這個文件:

#! /bin/bash node app.js

注意第一行的 #! /bin/bash 是必須的, 不然函數(shù)計算不知道該用哪一個解釋器來執(zhí)行腳本中的內(nèi)容. Windows 用戶記得把這個文件的換行符從 /r/n 改成 /n , 不然會遇到函數(shù)計算啟動超時的問題。

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

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

yarn add @serverless-devs/s -D

然后在根目錄下創(chuàng)建一個基礎(chǔ)的 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 # 部署到任意的可用區(qū), 例如深圳.service:name: my-awesome-websites # 深圳可用區(qū)的 my-awesome-websites 服務(wù)function:name: www-example-com # my-awesome-websites 服務(wù)下的一個函數(shù)runtime: custom # 使用 custom 運行環(huán)境handler: dummy-handler # 由于使用了 custom 運行環(huán)境, 所以這里可以隨便填codeUri: ./ # 部署當(dāng)前文件夾下的全部內(nèi)容triggers:- name: httptype: http # 創(chuàng)建一個 HTTP 類型的觸發(fā)器, 以便客戶端可以通過 HTTP 協(xié)議進行訪問config:authType: anonymous # 允許匿名訪問methods: [ HEAD, GET ] # 靜態(tài)網(wǎng)站只需要處理 HEAD 和 GET 請求就夠了

step 4. 部署到函數(shù)計算

配置好 AccessKey 和 AccessSecret 后， 執(zhí)行命令:

s deploy

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

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

step 5. 配置自定義域名

以自定義域名 deploy-static-website-to-fc.example.dengchao.fun 為例；

首先添加 CNAME 記錄, 解析值填寫 ${UID}.${REGION}.fc.aliyuncs.com.

因為我們的 s.yaml 中設(shè)置的 region 是 cn-shenzhen, 所以對應(yīng)的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com .

接下來設(shè)置函數(shù)計算控制臺上的自定義域名:

訪問一下試試看:

http://deploy-static-website-to-fc.example.dengchao.fun(opens new window)

樣本工程

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

https://github.com/DevDengChao/deploy-static-website-to-fc-example(opens new window)

參考:

• 阿里云函數(shù)計算-產(chǎn)品簡介(opens new window)

• 資源使用限制(opens new window)
• 自定義運行環(huán)境(opens new window)
• 配置自定義域名(opens new window)

• Serverless devs 官網(wǎng)(opens new window)

• 配置 AccessKey 和 AccessSecret(opens new window)

原文鏈接

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。?

總結(jié)

以上是生活随笔為你收集整理的如何使用 Serverless Devs 部署静态网站到函数计算（上）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。