一首歌的时间,手把手搭建基于FC的网站

本文涉及的产品
云解析 DNS,旗舰版 1个月
函数计算FC,每月15万CU 3个月
全局流量管理 GTM,标准版 1个月
简介: 不是杰伦的那一首歌啦~

部署网站 说好不哭


在接触serverless架构之前,我们如果想实现上线一个Web网站,就要在开发前期经过操作很多冗杂但又必须的步骤,不少小白可谓是快速的从入门到退坑。


编写代码,部署应用,部署数据库,申请域名,申请SSL证书,域名备案,到最终上线起码要几天时间。(在阿里云上申请自助备案,快的管局可能需要一到两周完成全部备案流程)


即使是使用容器化大幅减少运维和编排工作,那也会面临不兼容和不稳定的情况。


如下图,一个你以为很“稳定“的容器,可能会有出乎意料的环境错误

(ps:我这次使用语雀编辑器上传动图gif报错了,所以只能嵌入HTML代码使用外部图床了)

normal video.gif


而且,在技术之外,你会发现服务器、域名、证书加起来就是一笔不菲的开销(快来参加阿里云新用户飞天会员活动!),在有了建个人站的打算之后也可能被价格劝退。

 

Serverless(server + -less),顾名思义——“无服务器”。但它不是真正的不用服务器设施,更贴切的是无传统服务器架构的那些烦恼。我以个人站长的视角,带大家简单的体验下使用阿里云Serverless产品——函数计算FC来开发网站的具体流程。看看通过实操来感受Serverless架构的真实使用体验。


我是如此相信 Serverless


根据主流释义,Serverless不是表示没有服务器,而表示当您在使用 Serverless 时,您无需关心底层资源,也无需登录服务器和优化服务器,只需关注最核心的代码片段,即可跳过复杂的、繁琐的基本工作。核心的代码片段完全由事件或者请求触发,平台根据请求自动平行调整服务资源。Serverless 拥有近乎无限的扩容能力,空闲时,不运行任何资源。代码运行无状态,可以轻易实现快速迭代、极速部署。

它的大致执行流程如下图:

image.png

图片来源:https://help.aliyun.com/document_detail/52895.html


所以,Serverless其实是对传统云上架构的革新,开发者只需要编写最核心的代码,比如一个请求过来如何处理和返回对应的数据。其他的软硬件服务器部署相关的事情,都交给云服务商。这节省了大量资源,仅有服务被使用时(比如网站被访问),才会计算资源消耗,大幅度降低了成本。并且具有无限无感扩容的能力,再也不用担心访问量过大服务器宕机。


也许你只是想搭建一个博客,以前可能需要买一年的服务器,起码一年开销几百元。使用阿里云函数计算FC,如果你的网站访问量并不是很高,可能一年只要花费十几块钱,甚至在每个月的免费额度的加持之下你可以几乎不花钱!


部署网站 简单点


我们打开阿里云函数计算FC控制台页面,初次使用你需要开通服务并完成RAM授权,这不用担心,跟着流程下一步即可:https://fcnext.console.aliyun.com/overview


这是使用FC使用的流程图,你可以清晰的看到上线一个Web服务有那些步骤:

image.png


首先,我们点击左侧导航栏,进入应用子页面:

image.png

选择Flask应用模板案例:

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 。Flask使用 BSD 授权。

image.png


应用部署建议使用仓库部署,使用这种方式将会Push 代码到您指定的代码仓库中,然后触发流水线部署;后期更新项目时,可以直接将代码Push 到远程仓库进行安全发布,总体更加灵活可控。

 

使用这种方式需要绑定仓库账户信息。

image.png


除了仓库授权,在这里你还可以设置一些有关部署的基本信息,也可以直接下一步,我就是这样做的。

image.png


大概等待15秒,一个Serverless服务就创建部署完成了:

image.png


此时,你可以直接在基本信息中访问函数计算提供的域名来访问默认站点:

image.png

到这里其实就已经实现了一个网站上线了。


不过先别急,在应用详情页面的最下方,你可以看到这个应用所使用的函数资源并在其中编写函数代码。

image.png

代码空间默认有了一个最基本的Flask框架模板,你可以在此基础上进行开发。

 image.png

如上所述,访问FC提供的域名你会发现,一个基础的Web服务器就在公网环境下部署成功了。不需要买域名和SSL证书,不需要SSH登录服务器部署环境和软件,甚至不需要手动PUSH代码 。

 

名副其实,无标题党,一分钟部署一个网站。

 (别的应用有相似的上线逻辑,在应用中心提供了一些完整的小应用,你可以直接使用)


小实践


学习阿里云函数计算FC使用的相关知识之后,这首歌剩下的时间可以完成个小实践。


实践目标:

实现RSS阅读功能的Web站点


实现步骤:

  • 安装解析工具
  • 写入装饰器和调用函数
  • 写入HTML页面


背景知识:


RSS(Really Simple Syndication,简易信息聚合)

这是一种描述和同步网站内容的格式你可以认为是一种定制个性化推送信息的服务。它能够解决你漫无目的的浏览网页的问题。它不会过时,信息越是过剩,它的意义也越加彰显。让自己关注的信息主动来找自己,且这些信息都是用户自己所需要的,这就是RSS的意义。


feedparser

这是一个Python的Feed解析库,可以处理RSS ,CDF,Atom 。使用它我们可从任何 RSS 或 Atom 订阅源得到标题、链接和文章的条目。


简要过程:

  1. 安装解析工具

这里使用的解析工具是feedparser它的feedparser.parse()函数提供了解析RSS URL的功能,它可以将RSS连接解析为一个字典feed 对应一个字典,每个entry包含一个文章的标题,作者,链接等内容。

使用pip3 install feedparser(或pip install feedparser)安装feedparser:

image.png

  1. 根据feedparser文档说明写入必要的装饰器和调用函数,示例文件:


其中,render_template()函数是flask函数,它从模版文件夹templates中呈现给定的模板上下文。我们html文件就要放在模版文件夹templates中,本例html文件为../templates/rss.html

from flask import Flask, render_template
import feedparser

app = 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)

1658492511901_5A6F378E-D363-4d18-A88D-EF9C5CA882D1.png

  1. 写入HTML页面

根据解析出来的内容编写简单的HTML前端页面,示例文件:../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">
                <!--导航栏-->
                <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="#">首页</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>
                <!--内容列表-->
                <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>

文件创建完成后点击保存和部署,在应用详情页找到并访问FC给我们分配的域名。

image.png

效果:

image.png

使用方法:

我们使用GET请求方式​​request.args.get('rssurl')​获取参数,因此在URL后面传入需要解析的RSS订阅地址参数就可以解析源并渲染成相应的阅读样式。

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

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


综上,通过Serverless函数计算FC我们只需要依靠feedparser库相应的五行代码就完成了这个小实践。


总结

我们可以真切的感受到,使用Serverless函数计算开发网站与传统架构开发有大不同,它撇去了传统开发中那些冗杂但是又不经常会去修改的配置和流程,让开发者专注于业务逻辑的开发。并且我们可以不用考虑服务器的选型,它做到了真正的弹性和灵活


未来,我想我会再认真研究一下云原生思想和Serverless函数计算,乘着这股新风实现更加灵活和更复杂的业务应用。


更多

feedparser官网 —— https://pypi.org/project/feedparser/

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


相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
4月前
|
存储 弹性计算 Serverless
函数计算产品使用问题之使用的是自定义域名并且已备案,出现“无法访问此网站”,是什么原因
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5月前
|
运维 监控 Serverless
Serverless 应用引擎产品使用之在使用阿里云函数计算部署网站时,网站打开不稳定如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
665 1
|
5月前
|
存储 Serverless 网络安全
Serverless 应用引擎产品使用之阿里云函数计算中的Web云函数可以抵抗网站对DDoS攻击如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
运维 Serverless 数据库
【Serverless实战】B站每日自动签到&&传统单节点网站的Serverless上云
Serverless好哇!这里将针对个人与生产两个应用方向的测评 使用Serverless实现自动获取每日B站的经验值,让你更快冲到LV6! 你的业务站点还是一台服务器All in One吗?基于Serverless与阿里云产品的农产品电商网站上云!
37912 6
【Serverless实战】B站每日自动签到&&传统单节点网站的Serverless上云
|
运维 监控 安全
基于阿里云Severless函数计算搭建按量付费的WordPress网站
基于阿里云Severless函数计算搭建按量付费的WordPress网站
630 0
基于阿里云Severless函数计算搭建按量付费的WordPress网站
|
域名解析 弹性计算 监控
基于阿里云 Serverless 函数计算搭建按量付费的 WordPress 网站
Serverless 经过几年的发展,已经和传统服务器一样好用了。我最初接触 Serverless 是在 2020 年的云开发校园合伙人创造营上,当时我基于阿里云云开发平台部署了一个在线工具箱。
基于阿里云 Serverless 函数计算搭建按量付费的 WordPress 网站
|
运维 NoSQL 前端开发
一文搞懂传统单节点网站的 Serverless 上云
阿里云函数计算 FC 是事件驱动的全托管计算服务,真正的无需去考虑服务器的运维管理,只需要完成开发的代码进行上传,函数计算会通过角色策略去规划计算资源,弹性的方式执行函数,最后高效的执行部署。优雅!
一文搞懂传统单节点网站的 Serverless 上云
|
人工智能 开发框架 文字识别
1分钟 Serverless 极速搭建真网站--体验场景 领取10元猫超卡!
6月20日-7月1日工作日期间,只要完成1个场景体验,即可抢10元天猫超市卡!
337 0
1分钟 Serverless 极速搭建真网站--体验场景 领取10元猫超卡!
|
运维 JavaScript 网络协议
Serverless实践-静态网站托管
本文旨在帮助不懂运维/网络/服务器知识的小白,在不租用云服务器的情况下,实现Web站点的上线部署 适合边看文章边跟着动手做 包含使用Github Action实现持续集成的步骤,绑定自定义域名等等 该手把手Serverless实践系列预计会出几篇包含静态站点,云函数,后端服务等等 如有表述不清,内容错误等还请评论区斧正
|
域名解析 缓存 监控
如何使用阿里云 CDN 对部署在函数计算上的静态网站进行缓存
如何使用 CDN 对部署在函数计算上的静态网站进行缓存?

热门文章

最新文章