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

前言

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

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

部署靜態(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. 編寫(xiě)一個(gè)簡(jiǎn)單的 HTTP 服務(wù)器

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

yarn add express

然后新建 app.js 并寫(xiě)入:

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

通過(guò) node app.js 啟動(dòng)這個(gè)簡(jiǎn)單的 Express 服務(wù)器, 并訪問(wèn) http://localhost:9000 確認(rèn) /dist/index.html 能被訪問(wèn)到。

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

step 2. 編寫(xiě) bootstrap

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

#! /bin/bash node app.js

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

step 3. 安裝 @serverless-devs/s 并編寫(xiě) s.yaml

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

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.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ù)下的一個(gè)函數(shù)runtime: custom # 使用 custom 運(yùn)行環(huán)境handler: dummy-handler # 由于使用了 custom 運(yùn)行環(huán)境, 所以這里可以隨便填codeUri: ./ # 部署當(dāng)前文件夾下的全部?jī)?nèi)容triggers:- name: httptype: http # 創(chuàng)建一個(gè) HTTP 類型的觸發(fā)器, 以便客戶端可以通過(guò) HTTP 協(xié)議進(jìn)行訪問(wèn)config:authType: anonymous # 允許匿名訪問(wèn)methods: [ HEAD, GET ] # 靜態(tài)網(wǎng)站只需要處理 HEAD 和 GET 請(qǐng)求就夠了

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

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

s deploy

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

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

step 5. 配置自定義域名

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

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

因?yàn)槲覀兊?s.yaml 中設(shè)置的 region 是 cn-shenzhen, 所以對(duì)應(yīng)的值就是 xxxxxx.cn-shenzhen.fc.aliyuncs.com .

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

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

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ù)計(jì)算-產(chǎn)品簡(jiǎn)介(opens new window)

• 資源使用限制(opens new window)
• 自定義運(yùn)行環(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 部署静态网站到函数计算（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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