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

news2024/12/21 17:45:20

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

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;
    }
}