基于华为云服务器的网页部署

  这仅仅是对自己使用过程中部分记录。后续有时间我会把从服务器租用到网页部署的全过程都整理下。

1. 华为云服务器的租用

  可以前往华为云租弹性云服务器,具体配置可以看自己的需求,链接在这,我这边选择了ubuntu18.04版本的系统。
在这里插入图片描述
  租用成功后可以使用Xshell等软件进行服务器的登录,这个就不介绍了,登陆成功的界面如下:
在这里插入图片描述

2. 在华为云服务器上部署 Flask 应用

  在华为云服务器上创建一个 Flask 应用,可以用于接收和展示来自 IoT 平台的数据。首先的就是安装 Flask 和 Gunicorn,其中可以选择安装Nginx作为Web服务器来处理客户端的请求
  a. 安装 Flask 和 Gunicorn
    1.在服务器上安装 Flask 和 Gunicorn:pip3 install flask gunicorn

pip3 install flask gunicorn

    2.创建一个 Flask 应用,接收 IoT 数据并展示。
  b. Flask 应用代码示例

from flask import Flask, request, jsonify
import threading
import time

app = Flask(__name__)

iot_data = []  # 用于存储来自 IoT 设备的数据

# 接收来自华为云 IoT 平台的数据
@app.route('/data', methods=['POST'])
def receive_data():
    data = request.get_json()  # 获取 JSON 格式的请求数据
    if data:
        iot_data.append(data)  # 将数据存储在全局变量中
        if len(iot_data) > 10:  # 保留最近 10 条数据
            iot_data.pop(0)
        print(f"Received data: {data}")
        return jsonify({"message": "Data received"}), 200
    else:
        return jsonify({"message": "No data received"}), 400

# 通过网页查看 IoT 数据
@app.route('/view', methods=['GET'])
def view_data():
    return jsonify(iot_data)

# 显示主页面
@app.route('/')
def index():
    return "<h1>Welcome to IoT Data Viewer</h1><p>Go to <a href='/view'>/view</a> to see the IoT data.</p>"

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8000)

  c. 运行 Flask 应用
使用 Gunicorn 在后台运行 Flask 应用:

gunicorn --workers 3 app:app -b 0.0.0.0:8000 --daemon

这样 Flask 应用会监听服务器的 8000 端口,用于接收来自华为云 IoT 平台的数据,并通过 /view 路径显示数据。
下面是用来关闭的命令

sudo pkill gunicorn  
sudo nano /etc/nginx/sites-available/default
sudo systemctl restart nginx

3. 配置 Nginx 反向代理

为了确保通过标准的 HTTP 端口访问 Flask 应用,我们可以使用 Nginx 作为反向代理,将 HTTP 请求从 80 端口转发到 8000 端口。
a. 安装 Nginx

sudo apt update
sudo apt install nginx

b. 配置 Nginx
编辑 Nginx 的默认配置文件:

sudo nano /etc/nginx/sites-available/default

将 Nginx 的配置修改为以下内容:

server {
    listen 80;
    server_name your_server_ip;

    location / {
        proxy_pass http://127.0.0.1:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

重启 Nginx 以使配置生效:

sudo systemctl restart nginx

4. 测试数据流转和展示

现在,你的华为云 IoT 设备应该能够将数据通过 HTTP POST 发送到你的华为云服务器,服务器可以使用 Flask 来处理并展示这些数据。
测试步骤:
在 华为云 IoT 平台 中,确保设备成功上报数据,并通过规则引擎将数据转发到你的服务器。
在浏览器中访问你的服务器的 IP 地址:

http://“自己的ip”

你应该能够看到从 IoT 设备上报的数据以 JSON 格式显示在网页上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值