一首歌的時(shí)間，手把手搭建基于FC的網(wǎng)站

時(shí)間：2023-04-30 02:09:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-30 02:09:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

一首歌的時(shí)間，手把手搭建基于FC的網(wǎng)站：

部署網(wǎng)站 說(shuō)好不哭

在接觸serverless架構(gòu)之前，我們?nèi)绻雽?shí)現(xiàn)上線一個(gè)Web網(wǎng)站，就要在開(kāi)發(fā)前期經(jīng)過(guò)操作很多冗雜但又必須的步驟，不少小白可謂是快速的從入門到退坑。

編寫(xiě)代碼，部署應(yīng)用，部署數(shù)據(jù)庫(kù)，申請(qǐng)域名，申請(qǐng)SSL證書(shū)，域名備案，到最終上線起碼要幾天時(shí)間。（在阿里云上申請(qǐng)自助備案，快的管局可能需要一到兩周完成全部備案流程）

即使是使用容器化大幅減少運(yùn)維和編排工作，那也會(huì)面臨不兼容和不穩(wěn)定的情況。

如下圖，一個(gè)你以為很“穩(wěn)定“的容器，可能會(huì)有出乎意料的環(huán)境錯(cuò)誤

（ps：我這次使用語(yǔ)雀編輯器上傳動(dòng)圖gif報(bào)錯(cuò)了，所以只能嵌入HTML代碼使用外部圖床了）

而且，在技術(shù)之外，你會(huì)發(fā)現(xiàn)服務(wù)器、域名、證書(shū)加起來(lái)就是一筆不菲的開(kāi)銷（快來(lái)參加阿里云新用戶飛天會(huì)員活動(dòng)?。?，在有了建個(gè)人站的打算之后也可能被價(jià)格勸退。

Serverless（server +? -less），顧名思義——“無(wú)服務(wù)器”。但它不是真正的不用服務(wù)器設(shè)施，更貼切的是無(wú)傳統(tǒng)服務(wù)器架構(gòu)的那些煩惱。我以個(gè)人站長(zhǎng)的視角，帶大家簡(jiǎn)單的體驗(yàn)下使用阿里云Serverless產(chǎn)品——函數(shù)計(jì)算FC來(lái)開(kāi)發(fā)網(wǎng)站的具體流程。看看通過(guò)實(shí)操來(lái)感受Serverless架構(gòu)的真實(shí)使用體驗(yàn)。

我是如此相信 Serverless

根據(jù)主流釋義，Serverless不是表示沒(méi)有服務(wù)器，而表示當(dāng)您在使用 Serverless 時(shí)，您無(wú)需關(guān)心底層資源，也無(wú)需登錄服務(wù)器和優(yōu)化服務(wù)器，只需關(guān)注最核心的代碼片段，即可跳過(guò)復(fù)雜的、繁瑣的基本工作。核心的代碼片段完全由事件或者請(qǐng)求觸發(fā)，平臺(tái)根據(jù)請(qǐng)求自動(dòng)平行調(diào)整服務(wù)資源。Serverless 擁有近乎無(wú)限的擴(kuò)容能力，空閑時(shí)，不運(yùn)行任何資源。代碼運(yùn)行無(wú)狀態(tài)，可以輕易實(shí)現(xiàn)快速迭代、極速部署。

它的大致執(zhí)行流程如下圖：

所以，Serverless其實(shí)是對(duì)傳統(tǒng)云上架構(gòu)的革新，開(kāi)發(fā)者只需要編寫(xiě)最核心的代碼，比如一個(gè)請(qǐng)求過(guò)來(lái)如何處理和返回對(duì)應(yīng)的數(shù)據(jù)。其他的軟硬件服務(wù)器部署相關(guān)的事情，都交給云服務(wù)商。這節(jié)省了大量資源，僅有服務(wù)被使用時(shí)（比如網(wǎng)站被訪問(wèn)），才會(huì)計(jì)算資源消耗，大幅度降低了成本。并且具有無(wú)限無(wú)感擴(kuò)容的能力，再也不用擔(dān)心訪問(wèn)量過(guò)大服務(wù)器宕機(jī)。

也許你只是想搭建一個(gè)博客，以前可能需要買一年的服務(wù)器，起碼一年開(kāi)銷幾百元。使用阿里云函數(shù)計(jì)算FC，如果你的網(wǎng)站訪問(wèn)量并不是很高，可能一年只要花費(fèi)十幾塊錢，甚至在每個(gè)月的免費(fèi)額度的加持之下你可以幾乎不花錢！

部署網(wǎng)站 簡(jiǎn)單點(diǎn)

我們打開(kāi)阿里云函數(shù)計(jì)算FC控制臺(tái)頁(yè)面，初次使用你需要開(kāi)通服務(wù)并完成RAM授權(quán)，這不用擔(dān)心，跟著流程下一步即可：https://fcnext.console.aliyun.com/overview

這是使用FC使用的流程圖，你可以清晰的看到上線一個(gè)Web服務(wù)有那些步驟：

首先，我們點(diǎn)擊左側(cè)導(dǎo)航欄，進(jìn)入應(yīng)用子頁(yè)面：

選擇Flask應(yīng)用模板案例：

Flask是一個(gè)使用 Python 編寫(xiě)的輕量級(jí) Web 應(yīng)用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎則使用 Jinja2 。Flask使用 BSD 授權(quán)。

應(yīng)用部署建議使用倉(cāng)庫(kù)部署，使用這種方式將會(huì)Push 代碼到您指定的代碼倉(cāng)庫(kù)中，然后觸發(fā)流水線部署；后期更新項(xiàng)目時(shí)，可以直接將代碼Push 到遠(yuǎn)程倉(cāng)庫(kù)進(jìn)行安全發(fā)布，總體更加靈活可控。

使用這種方式需要綁定倉(cāng)庫(kù)賬戶信息。

除了倉(cāng)庫(kù)授權(quán)，在這里你還可以設(shè)置一些有關(guān)部署的基本信息，也可以直接下一步，我就是這樣做的。

大概等待15秒，一個(gè)Serverless服務(wù)就創(chuàng)建部署完成了：

此時(shí)，你可以直接在基本信息中訪問(wèn)函數(shù)計(jì)算提供的域名來(lái)訪問(wèn)默認(rèn)站點(diǎn)：

到這里其實(shí)就已經(jīng)實(shí)現(xiàn)了一個(gè)網(wǎng)站上線了。

不過(guò)先別急，在應(yīng)用詳情頁(yè)面的最下方，你可以看到這個(gè)應(yīng)用所使用的函數(shù)資源并在其中編寫(xiě)函數(shù)代碼。

代碼空間默認(rèn)有了一個(gè)最基本的Flask框架模板，你可以在此基礎(chǔ)上進(jìn)行開(kāi)發(fā)。

如上所述，訪問(wèn)FC提供的域名你會(huì)發(fā)現(xiàn)，一個(gè)基礎(chǔ)的Web服務(wù)器就在公網(wǎng)環(huán)境下部署成功了。不需要買域名和SSL證書(shū)，不需要SSH登錄服務(wù)器部署環(huán)境和軟件，甚至不需要手動(dòng)PUSH代碼 。

名副其實(shí)，無(wú)標(biāo)題黨，一分鐘部署一個(gè)網(wǎng)站。

（別的應(yīng)用有相似的上線邏輯，在應(yīng)用中心提供了一些完整的小應(yīng)用，你可以直接使用）

小實(shí)踐

學(xué)習(xí)阿里云函數(shù)計(jì)算FC使用的相關(guān)知識(shí)之后，這首歌剩下的時(shí)間可以完成個(gè)小實(shí)踐。

實(shí)踐目標(biāo)：

實(shí)現(xiàn)RSS閱讀功能的Web站點(diǎn)

實(shí)現(xiàn)步驟：

• 安裝解析工具
• 寫(xiě)入裝飾器和調(diào)用函數(shù)
• 寫(xiě)入HTML頁(yè)面

背景知識(shí)：

RSS(Really Simple Syndication,簡(jiǎn)易信息聚合)

這是一種描述和同步網(wǎng)站內(nèi)容的格式你可以認(rèn)為是一種定制個(gè)性化推送信息的服務(wù)。它能夠解決你漫無(wú)目的的瀏覽網(wǎng)頁(yè)的問(wèn)題。它不會(huì)過(guò)時(shí)，信息越是過(guò)剩，它的意義也越加彰顯。讓自己關(guān)注的信息主動(dòng)來(lái)找自己，且這些信息都是用戶自己所需要的，這就是RSS的意義。

feedparser

這是一個(gè)Python的Feed解析庫(kù)，可以處理RSS ，CDF，Atom 。使用它我們可從任何 RSS 或 Atom 訂閱源得到標(biāo)題、鏈接和文章的條目。

簡(jiǎn)要過(guò)程：

1.安裝解析工具

這里使用的解析工具是feedparser它的feedparser.parse()函數(shù)提供了解析RSS URL的功能，它可以將RSS連接解析為一個(gè)字典feed 對(duì)應(yīng)一個(gè)字典，每個(gè)entry包含一個(gè)文章的標(biāo)題，作者，鏈接等內(nèi)容。

使用pip3 install feedparser(或pip install feedparser)安裝feedparser：

2.根據(jù)feedparser文檔說(shuō)明寫(xiě)入必要的裝飾器和調(diào)用函數(shù)，示例文件：

其中，render_template()函數(shù)是flask函數(shù)，它從模版文件夾templates中呈現(xiàn)給定的模板上下文。我們html文件就要放在模版文件夾templates中，本例html文件為../templates/rss.html

from flask import Flask, render_templateimport feedparserapp = Flask(__name__)@app.route('/')def index(): return render_template('index.html')@app.route('/rss', methods=["GET"])def rss(): feed = feedparser.parse(request.args.get('rssurl')) return render_template('rss.html', entries=feed.entries)if __name__ == "__main__": app.run(host="0.0.0.0", port=9000)3.寫(xiě)入HTML頁(yè)面

根據(jù)解析出來(lái)的內(nèi)容編寫(xiě)簡(jiǎn)單的HTML前端頁(yè)面，示例文件：../templates/rss.html

<!doctype html><html><head><meta charset="utf-8"><title>RSS</title><!--引入外部CSS--><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"><!--引入外部JavaScript--><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script></head><body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <!--導(dǎo)航欄--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">RSS</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">首頁(yè)</a> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">搜索</button> </form> </div> </div> </nav> <!--內(nèi)容列表--> <div class="accordion" id="accordionExample"> {% for entry in entries %} <div class="accordion-item"> <h2 class="accordion-header" id="heading{{ loop.index }}"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="false" aria-controls="collapse{{ loop.index }}"> {{ entry.title }} | {{ entry.published }} </button> </h2> <div id="collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#accordionExample"> <div class="accordion-body"> {{ entry.summary | safe }} </div> </div> </div> {% endfor %} </div> </div> </div> </div></body></html>文件創(chuàng)建完成后點(diǎn)擊保存和部署，在應(yīng)用詳情頁(yè)找到并訪問(wèn)FC給我們分配的域名。

效果：

使用方法：

我們使用GET請(qǐng)求方式request.args.get('rssurl')獲取參數(shù)，因此在URL后面?zhèn)魅胄枰馕龅腞SS訂閱地址參數(shù)就可以解析源并渲染成相應(yīng)的閱讀樣式。

例如： /rss?rssurl=<解析源>

示例：http://<EIP>/rss?rssurl=https://jandan.net/feed

綜上，通過(guò)Serverless函數(shù)計(jì)算FC我們只需要依靠feedparser庫(kù)相應(yīng)的五行代碼就完成了這個(gè)小實(shí)踐。

總結(jié)

我們可以真切的感受到，使用Serverless函數(shù)計(jì)算開(kāi)發(fā)網(wǎng)站與傳統(tǒng)架構(gòu)開(kāi)發(fā)有大不同，它撇去了傳統(tǒng)開(kāi)發(fā)中那些冗雜但是又不經(jīng)常會(huì)去修改的配置和流程，讓開(kāi)發(fā)者專注于業(yè)務(wù)邏輯的開(kāi)發(fā)。并且我們可以不用考慮服務(wù)器的選型，它做到了真正的彈性和靈活。

未來(lái)，我想我會(huì)再認(rèn)真研究一下云原生思想和Serverless函數(shù)計(jì)算，乘著這股新風(fēng)實(shí)現(xiàn)更加靈活和更復(fù)雜的業(yè)務(wù)應(yīng)用。

更多

feedparser官網(wǎng) —— https://pypi.org/project/feedparser/

feedparser文檔 ——https://feedparser.readthedocs.io/en/latest/

原文鏈接

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