在弹性服务建立服务摘要文章转发【玩转华为云】
1 简介
本文示例展示了如何从0开始在华为云 ECS 上部署一个抓取服务，该服务可以接受网页 URL 并返回其元数据（标题、描述、图片）。
然后在微信小程序中实现类似的功能，即从用户输入的链接中提取标题、描述和图片，可以通过以下步骤完成。微信小程序不能直接访问外部网页的 HTML 内容，因此你需要使用云函数或后端服务来完成爬取和解析网页内容的任务。
2 实现思路
用户输入链接：用户在小程序前端输入一个网页链接。
调用云函数或后端服务：小程序调用云函数或后端接口，传递该链接。
解析网页内容：有两个方案，调用ECS服务封装的API接口的后端服务中，使用类似于 Golang 或 Python语言实现的爬取与解析逻辑，不过这需要购买域名服务；或者直接在微信云函数，从网页中提取标题、描述和图片。
返回解析结果：将解析到的标题、描述和图片URL返回给小程序。
展示结果：小程序接收这些数据，并将它们显示在页面中。
3 在云端实现一个抓取服务的接口
在华为云上提供一个 Go 服务接口，实现从网页抓取元数据（如标题、描述和图片）并返回给客户端，可以使用华为云的 API Gateway 和 FunctionGraph，也可以部署一个独立的 Go 服务并通过华为云的弹性云服务器（ECS）或容器服务（CCI）来运行。
这里首先展示使用 华为云 ECS 来部署 Go 服务，并实现该功能的步骤。
部署 Go 服务：在华为云 ECS 上运行一个 Go HTTP 服务，用于处理网页抓取请求。
解析网页元数据：使用 net/http 和 goquery 库在服务端爬取网页并解析标题、描述和图片。
提供 RESTful API：Go 服务通过 RESTful API 接口接收用户提交的链接，返回解析结果。
-
- 配置华为云 ECS
首先，你需要在华为云中创建并配置一个 ECS 实例：
- 配置华为云 ECS
登录华为云管理控制台，进入“弹性云服务器（ECS）”服务。
创建一个新的 ECS 实例，选择合适的区域、镜像（可以选择 Ubuntu 或 CentOS）、实例规格等。
为该 ECS 实例分配一个公网 IP，并配置安全组，确保开放 HTTP (80) 和 SSH (22) 端口。
如果不知道在哪里配置，从这里进入。
如果没有ECS弹性服务，从这里获取。
https://console.huaweicloud.com/ecm/?region=cn-east-3#/ecs/create/custom
当然你需要知道操作系统，网络，以及基本的内存虚拟机等等概念。
完成后，就可以实现本文的独立云服务。
-
- 在 ECS 实例中配置 Go 环境
SSH 登录到你的 ECS 实例，然后安装 Go 语言开发环境：
安装 Golang
wget https://golang.org/dl/go1.18.1.linux-amd64.tar.gz
sudo tar -C /usr/local -xzf go1.18.1.linux-amd64.tar.gz
** 设置 Go 环境变量**
echo "export PATH=\$PATH:/usr/local/go/bin" >> ~/.profile
source ~/.profile
** 验证安装**
go version
-
- 编写 Go 服务代码
在你的本地开发环境或直接在 ECS 上编写 Go 服务代码。我们将使用 net/http 提供 HTTP 接口，使用 goquery 解析网页的元数据。
- 编写 Go 服务代码
安装 goquery 和 gorilla/mux 路由库：
go get github.com/PuerkitoBio/goquery
go get github.com/gorilla/mux
实现Go 抓取服务代码 (main.go)：
package main
import (
"encoding/json"
"fmt"
"log"
"net/http"
"github.com/PuerkitoBio/goquery"
"github.com/gorilla/mux"
)
// Metadata represents the web page metadata
type Metadata struct {
Title string `json:"title"`
Description string `json:"description"`
Image string `json:"image"`
}
// FetchMetadata handles the metadata fetching
func FetchMetadata(w http.ResponseWriter, r *http.Request) {
url := r.URL.Query().Get("url")
if url == "" {
http.Error(w, "URL is required", http.StatusBadRequest)
return
}
// Fetch and parse the webpage
res, err := http.Get(url)
if err != nil {
http.Error(w, "Failed to fetch webpage", http.StatusInternalServerError)
return
}
defer res.Body.Close()
if res.StatusCode != 200 {
http.Error(w, "Failed to fetch webpage", http.StatusInternalServerError)
return
}
// Load the HTML document
doc, err := goquery.NewDocumentFromReader(res.Body)
if err != nil {
http.Error(w, "Failed to parse webpage", http.StatusInternalServerError)
return
}
// Extract metadata
title := doc.Find("title").Text()
description, _ := doc.Find("meta[name='description']").Attr("content")
if description == "" {
description, _ = doc.Find("meta[property='og:description']").Attr("content")
}
image, _ := doc.Find("meta[property='og:image']").Attr("content")
// Return metadata as JSON
metadata := Metadata{
Title: title,
Description: description,
Image: image,
}
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(metadata)
}
func main() {
// Create a new router
r := mux.NewRouter()
r.HandleFunc("/fetchMetadata", FetchMetadata).Methods("GET")
// Start the server
fmt.Println("Starting server on port 8080...")
log.Fatal(http.ListenAndServe(":8080", r))
}
4. 运行和测试服务
在你的 ECS 实例中，构建并运行 Go 服务：
bash
go build -o fetch_metadata main.go
./fetch_metadata
这将启动一个在端口 8080 上运行的 HTTP 服务，监听 /fetchMetadata 路径。
- 配置安全组和防火墙
确保 ECS 实例的安全组和防火墙允许外部访问 HTTP 服务端口（8080）。你可以通过控制台修改安全组规则，添加入方向规则，允许 8080 端口的公网访问。
-
测试接口
测试接口是否正常工作：需要注意的是如果在微信端调用接口需要域名服务。bash curl "http://<ECS_PUBLIC_IP>:8080/fetchMetadata?url=https://example.com"
你将收到类似这样的响应：
json
{
"title": "Example Domain",
"description": "This domain is for use in illustrative examples in documents.",
"image": "https://dits.com/og_image.jpg"
}
5 微信小程序实现步骤
-
- 云函数 (Node.js) 实现网页解析
在微信云开发中，可以使用云函数来执行网页内容抓取和解析。
云函数代码 (Node.js)：
javascript
const cloud = require('wx-server-sdk')
const axios = require('axios')
const cheerio = require('cheerio')
cloud.init()
exports.main = async (event, context) => {
const { url } = event
try {
// 1. 获取网页内容
const response = await axios.get(url)
const html = response.data
// 2. 使用 cheerio 解析 HTML
const $ = cheerio.load(html)
// 3. 提取标题
const title = $('title').text()
// 4. 提取描述
const description = $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content')
// 5. 提取图片
const image = $('meta[property="og:image"]').attr('content')
// 6. 返回数据
return {
title,
description,
image
}
} catch (error) {
return {
error: 'Failed to fetch metadata',
details: error.message
}
}
}
-
- 小程序前端页面代码
前端页面 (WXML + JS)：
WXML 文件：用于展示解析后的数据。
xml
<view class="container">
<input class="input" placeholder="请输入网址" bindinput="onInputChange" />
<button bindtap="fetchMetadata">获取网页信息</button>
<view class="result">
<text>标题: {{metadata.title}}</text>
<text>描述: {{metadata.description}}</text>
<image wx:if="{{metadata.image}}" src="{{metadata.image}}" />
</view>
</view>
JS 文件：用于处理用户输入和调用云函数。
javascript
Copy code
Page({
data: {
url: '',
metadata: {
title: '',
description: '',
image: ''
}
},
// 处理用户输入
onInputChange(event) {
this.setData({
url: event.detail.value
})
},
// 调用云函数获取网页元数据
async fetchMetadata() {
const { url } = this.data
if (!url) {
wx.showToast({
title: '请输入网址',
icon: 'none'
})
return
}
try {
const res = await wx.cloud.callFunction({
name: 'fetchMetadata', // 云函数名称
data: {
url
}
})
this.setData({
metadata: res.result
})
} catch (error) {
console.error('云函数调用失败:', error)
wx.showToast({
title: '获取信息失败',
icon: 'none'
})
}
}
})
-
- 配置与部署
云函数部署：在微信小程序开发工具中创建云函数并部署。
云开发初始化：确保在 app.js 中调用 wx.cloud.init()，以便小程序可以访问云函数。
javascript
App({
onLaunch() {
wx.cloud.init({
env: 'your-cloud-env-id', // 替换为你自己的云环境 ID
traceUser: true
})
}
})
-
- 展示效果
当用户输入一个 URL 并点击“获取网页信息”按钮后，小程序会调用云函数进行网页解析，然后展示提取到的网页标题、描述和图片信息。
6 总结
本文示例展示了如何从0开始在华为云 ECS 上部署一个抓取服务，该服务可以接受网页 URL 并返回其元数据（标题、描述、图片）。你可以进一步扩展这个服务，增加缓存、错误处理等功能。
在微信群内生成文章链接预览的背后，涉及从链接识别、网页抓取、内容解析到生成预览卡片的一系列步骤。这一过程中，微信通过自动化的网页内容分析和智能缓存机制，提供了便捷的分享体验。
微信小程序不能直接从客户端访问外部网站的 HTML 数据，因此需要借助微信云函数或者自建后端服务来完成网页抓取与解析。云函数通过发送 HTTP 请求获取网页内容，然后使用 cheerio 来解析网页，从中提取标题、描述和图片等信息。
如果希望利用华为云的其他服务，如容器服务（CCI），你可以将这个 Go 服务打包成 Docker 容器，然后通过华为云的容器服务进行管理和部署。
- 点赞
- 收藏
- 关注作者
评论（0）