华为云云耀云服务器L实例评测｜用Python的Flask框架加Nginx实现一个通用的爬虫项目

素颜马尾好姑娘i 2024-04-20 14:05 8阅读 0赞

![在这里插入图片描述][eacff7e438ca4a698078a2a0be27e8a8.gif_pic_center]

> 🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年6月CSDN上海赛道top4。  
> 🏆数年电商行业从业经验，`AWS/阿里云资深使用用户`，历任核心研发工程师，项目技术负责人。  
> 🎉欢迎 👍点赞✍评论⭐收藏

#### 文章目录 ####

*  🚀一、前言-关于Flask框架
 *  🚀二、功能描述
 *  🚀三、功能开发实现
 *   *  🔎3.1 搭建后端服务
     *   *  🍁3.1.1 安装Flask
         *  🍁3.1.2 创建后端服务代码
         *  🍁3.1.3 测试5000端口访问
         *  🍁3.1.4 规范化启动服务(restart.sh)
         *  🍁3.1.5 Nginx代理5000端口
         *  🍁3.1.6 修改本机host访问Api
     *  🔎3.2 编写前端页面
     *   *  🍁3.2.1 创建HTML文件
         *  🍁3.2.2 部署前端页面
 *  🚀四、测试功能
 *   *  4.1 测试标题抓取
     *  4.2 测试图片抓取
 *  🚀五、结语

--------------------

*随着云计算时代的进一步深入，越来越多的中小企业企业与开发者需要一款简单易用、高能高效的云计算基础设施产品来支撑自身业务运营和创新开发。基于这种需求，华为云焕新推出华为云云服务器实例新品。*

前面通过 [华为云云耀云服务器L实例评测｜从服务器购买到一站式搭建Presta Shop跨境商城完整教学][L_Presta Shop] 这一篇，已经完整实现了服务器的购买到初步的使用。**`这边文章由我带大家再进一步的进行实战内容扩充，本篇主要讲述用Python的Flask框架加Nginx实现一个通用的爬虫项目实践。在评测服务器使用的同时，供大家学习使用参考。`**

如果想了解华为云云耀云服务器L实例评测，可以[点击这里直接进入][Link 1]。

![在这里插入图片描述][55d553a6884045729b4a7b8cc646fed6.png]

## 🚀一、前言-关于Flask框架 ##

Flask是一个基于Python的微框架，用于构建Web应用程序。它是一个轻量的并且被广泛应用的框架，具有简单易懂的设计和灵活的扩展能力。

![在这里插入图片描述][5296821b34de4ad582229859683d3c61.png]

以下是关于Flask的一些重要特点和概念：

**路由**：Flask使用装饰器来定义URL路由，将不同的URL路径映射到相应的函数上。例如，可以使用`@app.route('/hello')`装饰器将函数`hello()`与路径`/hello`绑定。

**视图函数（View function）**：视图函数是Flask应用程序处理URL请求的函数。每当用户访问指定路径时，与该路径绑定的视图函数将被调用，并返回相应的内容。

**模板引擎**：Flask使用Jinja2模板引擎来实现页面的动态生成。模板引擎允许开发人员将静态模板与动态数据结合，生成最终的HTML页面发送给客户端。

**请求-响应循环**：当用户发送HTTP请求时，Flask使用请求-响应循环来处理请求并返回响应。请求-响应循环由Flask框架自动处理，开发人员只需要关注如何处理请求和生成响应。

**扩展性**：Flask拥有丰富的第三方扩展，可以轻松地集成其他功能，如数据库访问、用户认证、表单验证等。

**开发简便**：Flask提供了简洁的API和清晰的文档，使开发人员能够快速构建Web应用程序。它的学习曲线相对较低，适合初学者入门。

## 🚀二、功能描述 ##

今天本文主要在`华为云云耀云服务器L实例`上面，通过`Flask`框架做服务，前端开发主要通过`Html+JQuery`来实现。写一个爬虫功能，前端有一个`Input`用来输入网页地址，然后还有一个下拉框Select，里面可以选择标题，图片，视频等。还有一个提交按钮，提交给了`Python`后端，比如提交了`https://www.baidu.com`这个网页地址，然后`Select`选择了图片，就抓去这个地址的所有图片url返回给前端。

![在这里插入图片描述][5f5d5d412d834e0fbebb37f0997717e0.png]

话不多说，下面直接进入正题。

## 🚀三、功能开发实现 ##

### 🔎3.1 搭建后端服务 ###

使用`Flask`搭建一个简单的后端服务来处理前端的请求。可以看到L实例上面已经预装`Python3`的环境。

![在这里插入图片描述][92b9673e610e457d8427d749cc9c22a1.png]

#### 🍁3.1.1 安装Flask ####

打开命令行终端，执行以下命令安装Flask，这里还是加一个源，不然默认的太慢了：

pip3 install flask -i https://pypi.tuna.tsinghua.edu.cn/simple

下面是实际执行的效果，很快就安装好了。

![在这里插入图片描述][92eee54e324d4f8b8ab4d437bf84186b.png]

#### 🍁3.1.2 创建后端服务代码 ####

创建一个名为`server.py`的`Python`文件，添加以下内容：

from flask import Flask, request, jsonify
    import requests
    from bs4 import BeautifulSoup
    
    app = Flask(__name__)
    
    @app.route('/', methods=['POST'])
    def crawl():
        url = request.form.get('url')
        mode = request.form.get('mode')
    
        response = requests.get(url)
        soup = BeautifulSoup(response.text, 'html.parser')
    
        result = []
        if mode == 'title':
            title = soup.title.string
            result.append(title)
        elif mode == 'image':
            images = soup.find_all('img')
            for img in images:
                result.append(img['src'])
        elif mode == 'video':
            videos = soup.find_all('video')
            for video in videos:
                result.append(video['src'])
    
        return jsonify(result)
    
    if __name__ == '__main__':
        app.run()

然后我把我这个文件放到了/var/web目录下面，然后我来尝试运行一下，看看效果。

![在这里插入图片描述][1c7b3a2e02c8451c96b8758bcb92bcf2.png]  
报错了，我的扩展少装了，继续执行一下下面的操作

pip3 install beautifulsoup4 -i https://pypi.tuna.tsinghua.edu.cn/simple

然后继续`python3 server.py`。发现成功了，一个简单的web服务就这么启动了，太舒服了。

![在这里插入图片描述][31a192be0eb441c3b4ec416c20773001.png]

#### 🍁3.1.3 测试5000端口访问 ####

现在服务启动起来了，我们先不要停止，现在没有开发5000安全组，来试一下浏览器能不能访问。直接输入`http://124.70.177.136:5000/`，这是我真实的服务器地址。浏览器转了半天事实证明没有反应，访问不可触达。

![在这里插入图片描述][c5b1826cd84544e2bda63d63be9add3e.png]

现在我们去安全组开一把5000端口试试。

![在这里插入图片描述][3b7dfcfefe60490e8a3622b2c91afb6d.png]

开了安全组后发现还是不行，后面经过排查，把上面代码里面的最后一句改为`app.run(host='0.0.0.0')`即可。下面是浏览器通畅后的效果。

![在这里插入图片描述][fd5e141d7016420bba7eeea0b9fe3d44.png]

然后访问后，服务器控制台也给出了请求的反馈。

![在这里插入图片描述][de091761f9504ec6ba2f9b32560df191.png]

#### 🍁3.1.4 规范化启动服务(restart.sh) ####

上面这种直接在控制台输出肯定不行，这样太粗糙了，一点都不优雅，终端断了还可能导致服务中断，直接上一个sh脚本控制日志输出并且让服务后台运行才是最佳实践，玩的就是一个项目实战。这方面知识欠缺的可以去看我的Linux命令大全专栏。

#!/bin/bash
    echo "结束进程"
    kill ` lsof -i:5000 | awk '{NR==2 ;print $2}' ` #杀死运行中的server服务进程
    echo "启动进程"
    nohup python3 server.py >> server.log 2>&1 & #后台启动服务将日志写入server.log文件
    ps -aux | grep 5000

直接`bash restart.sh`就可以重启服务，服务后台运行，日志直接查看`server.log`，是不是舒服多了。见下图。

![在这里插入图片描述][c1372793ab2642d0a44117dde6ced664.png]

#### 🍁3.1.5 Nginx代理5000端口 ####

如果你以为直接访问`5000`端口可行，那也是粗糙\*2，不够优雅，玩的就是一个细节，下面继续用`Nginx`来代理上`5000`端口。这里我们通过`sites-enabled`目录来新建虚拟域名代理，这样显得更加隔离一些。

cd /etc/nginx/
    mkdir sites-enabled

然后在sites-enabled下面建一个`reptile.conf`放入下面的内容：

server {
        
        listen 80;
        server_name reptile.heiye.net;
        set $back_port "5000";
        
        location ~* ^/api {
        
            proxy_pass "http://127.0.0.1:$back_port";
        }
    }

然后在主要文件里面要引入`sites-enabled`下面的所有文件，使得这些配置生效。`vim /etc/nginx/conf.d/default.conf` 头部放入如下内容。注意不同的环境配置效果可能不一样，我这里是这样去配置。  
![在这里插入图片描述][baa31a87b95741c4bf6b220db730bf3f.png]  
然后`nginx -t`通过后`nginx -s reload`。养成先测试的好习惯。

![在这里插入图片描述][bfdcd9e0fb1d4fcda61e9c8836415218.png]

#### 🍁3.1.6 修改本机host访问Api ####

上面`Nginx`配置里面提到了`reptile.heiye.net`这个域名，实际上这个域名不是真实存在的，要访问到需要配置一下，我是Mac，在`/etc/hosts`中修改，`Windows`在`C:\Windows\System32\drivers\etc`这个目录下面的`host`文件，放入下面这一行。

124.70.177.136 reptile.heiye.net

现在我们一起用浏览器访问一下`reptile.heiye.net`就能够直达上面开启的server服务了，完美，后端服务基本上就部署完成了。

![在这里插入图片描述][6607840a4ad34bc2b17cff0f441c14ef.png]

### 🔎3.2 编写前端页面 ###

使用HTML和jQuery编写一个简单的前端页面。

#### 🍁3.2.1 创建HTML文件 ####

创建一个名为`index.html`的HTML文件，添加以下内容：

<!DOCTYPE html>
    <html>
    <head>
        <title>爬虫功能示例</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <h1>爬虫功能示例</h1>
        <form id="crawl-form">
            <label for="url">网页地址:</label>
            <input type="text" id="url" name="url" required><br><br>
            
            <label for="mode">抓取内容:</label>
            <select id="mode" name="mode" required>
                <option value="title">标题</option>
                <option value="image">图片</option>
                <option value="video">视频</option>
            </select><br><br>
            
            <input type="submit" value="提交">
        </form>
    
        <div id="result"></div>
    
        <script>
            $(document).ready(function() {
          
                $('#crawl-form').on('submit', function(event) {
          
                    event.preventDefault();
                    var url = $('#url').val();
                    var mode = $('#mode').val();
    
                    $.ajax({
          
                        url: '/',
                        method: 'POST',
                        data: {
          
                            url: url,
                            mode: mode
                        },
                        success: function(response) {
          
                            var resultHtml = '';
                            if (response.length > 0) {
          
                                for (var i = 0; i < response.length; i++) {
          
                                    resultHtml += '<p>' + response[i] + '</p>';
                                }
                            } else {
          
                                resultHtml = '<p>没有找到相关内容。</p>';
                            }
    
                            $('#result').html(resultHtml);
                        },
                        error: function() {
          
                            alert('请求失败，请检查输入的网页地址。');
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

#### 🍁3.2.2 部署前端页面 ####

前端页面实际上也要放到服务器下面去，具体的文件放置于`/var/web/front/reptile/index.html`。同样的Nginx也配置一下，对于请求到底是到页面还是到后端服务需要进行分流。在`reptile.conf`中添加如下代码。在`location /`这个位置的前面。

location ~* ^/reptile {
        
        root /var/web/front/;
    }

然后`nginx -s reload`，然后尝试访问一下页面`http://reptile.heiye.net/reptile/index.html`，成功出现。

![在这里插入图片描述][24fbac895a494432a8ae89437d17af8b.png]

## 🚀四、测试功能 ##

在浏览器中访问`http://reptile.heiye.net/reptile/index.html`，即可看到前端页面。

### 4.1 测试标题抓取 ###

这里通过`https://www.runoob.com/linux/linux-command-manual.html`这个网址作为我们的测试用例。抓取内容为标题，点击提交，就成功获取了。  
![在这里插入图片描述][a523f8e5e2904c5ab950176a553ae2c8.png]

### 4.2 测试图片抓取 ###

抓取内容选择图片，可以看到页面上两张图片地址被分析出来了。  
![在这里插入图片描述][931c6f9d17094a3687e4754a89d68e96.png]

## 🚀五、结语 ##

本篇文章通过华为云云耀云服务器L实例进行支持开发，实现了一个五脏俱全的前后端一起的完整爬虫小项目。所有的代码都在文章中给出了展示，您也可以根据具体的自己的使用情况进行扩展，实际项目中会遇到非常丰富以及复杂的情况，不过通过不断努力总是可以把问题解决了的。

**`由于是真实的流程演示，项目也实际部署到了线上，大家可以看文章绑定一下host，然后通过http://reptile.heiye.net/reptile/index.html进行访问。感谢华为云的支持。整体在L实例上面的测试流程还是比较顺畅，没有遇到多大问题，就是pip默认安装源有点慢，另外之前我安装的Presta Shop跨境商城经过一段时间的运行，还是比较稳定，没有出现过服务中断的情况，因为我这个上面部署的服务也不少了。`**

**希望华为云越来越好，希望中国的云事业更上一层楼，我作为一个普通开发者，也将不断参与与见证这一伟大的技术探索与变革。**

![在这里插入图片描述][af319f63210047d190b5b066c10017ae.png]

**`今天的内容就到这里，我们下期再会。`**

[eacff7e438ca4a698078a2a0be27e8a8.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e9b76cf39f384beda8ae1a0e8fff712f.gif
[L_Presta Shop]: https://weiwang.blog.csdn.net/article/details/132700041
[Link 1]: https://www.huaweicloud.com/product/hecs-light.html
[55d553a6884045729b4a7b8cc646fed6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/150f208622784eba8f611d8569637af4.png
[5296821b34de4ad582229859683d3c61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1588c00288d040968e0a08c8643100a6.png
[5f5d5d412d834e0fbebb37f0997717e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/638e2b8d28c24934be87eda1ed3d869e.png
[92b9673e610e457d8427d749cc9c22a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/cb7a603ae8834538bcfe8aec6e0552a0.png
[92eee54e324d4f8b8ab4d437bf84186b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/623b2923674044a59f7819f732a7cd03.png
[1c7b3a2e02c8451c96b8758bcb92bcf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/396526f806094e1da58735970b90af6d.png
[31a192be0eb441c3b4ec416c20773001.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e1581ed4d81545dab1168002109d8e1f.png
[c5b1826cd84544e2bda63d63be9add3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/91dbc36a2fbc4b1db3e748db9bf0f3d9.png
[3b7dfcfefe60490e8a3622b2c91afb6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5a0e16e6f29b4cd59c5e43cf01057c80.png
[fd5e141d7016420bba7eeea0b9fe3d44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/eaa7be2c5f0f4863814b438f3f9e84b9.png
[de091761f9504ec6ba2f9b32560df191.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/54168d79b2e6430181e7ff24bfaa21cb.png
[c1372793ab2642d0a44117dde6ced664.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/6e86a2a2890e4b859be738a46aa24006.png
[baa31a87b95741c4bf6b220db730bf3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/22a28b4cdad14e3294c27c608e33584f.png
[bfdcd9e0fb1d4fcda61e9c8836415218.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a12633c3003b4a51975dc14c317cb925.png
[6607840a4ad34bc2b17cff0f441c14ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/085400fb7d934e389334cf447b5c3560.png
[24fbac895a494432a8ae89437d17af8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/409f7f759da54b98b63d5f4e8311f29f.png
[a523f8e5e2904c5ab950176a553ae2c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/004b1aea918943d4af49254a371c8d69.png
[931c6f9d17094a3687e4754a89d68e96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ee383bde246a44009dfeca29618394c5.png
[af319f63210047d190b5b066c10017ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/40e006919fd04c6db545fef57c194094.png