阿里云搭建web界面教程

海豚有海czr

于 2024-04-28 10:42:42 发布

阅读量1.1k

点赞数 25

分类专栏：云服务器文章标签：阿里云前端云计算

本文链接：https://blog.csdn.net/m0_52749295/article/details/138268483

版权

云服务器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阿里云免费服务器搭建web界面教程

一、白嫖阿里云服务器

1.获取免费三个月服务器

登录到阿里云官网，选择ECS云服务器免费试用，如果找不到，点击立即跳转即可跳转。
在这里插入图片描述
点击立即试用，即可获得一个免费3个月的ECS云服务器。

2.云服务器选配

点击试用后，会跳出一个选配界面，根据需要进行选择，一般选择如下：
在这里插入图片描述
这边的系统选择的是ubuntu18.04，因为18.04的系统兼容性比较好。

3.重置密码远程登陆

前面步骤都完成后，进入到云服务器管理控制台，如图所示：
在这里插入图片描述
点击远程连接，会跳转到远程连接界面，此时需要重置一下密码，使用一个强壮的密码，如下图所示：

这里的重置可以在线完成，不需要重启设备，重置完成后如下图所示：

到这里就可以远程登陆到服务器了。登陆成功后，先去开放一下web的端口，后续就可以通过公网ip地址访问。

4.配置端口安全组

到阿里云管理界面，点击安全组，再点击管理规则，进入后对入口端口进行手动添加，如下图所示：
在这里插入图片描述
进入管理规则后，完成如下图的五步即可允许80和8080端口访问了。

二、安装apache服务器

回到刚刚远程登陆的界面，在里面依次输入以下5个命令来安装并启动apache服务器。

sudo apt update
sudo apt upgrade
sudo apt install apache2
sudo systemctl restart apache2.service
sudo systemctl enbale apache2.service
安装完成后，使用sudo systemctl status apache2.service命令来查看运行情况。看到显示actice(running)即表示成功。如图所示：

公网IP在管理控制台界面即可获取：

此时就可以在浏览器输入你的云服务器的公网IP，就会看到运行在你云服务器上的apache界面了。如图所示：
在这里插入图片描述
至此，云服务器的web界面就搭建完成了，现在只需要修改界面显示的html文件，就可以通过公网IP访问你自己的web界面了。

三、修改web文件

apache的默认html文件在/var/www/html/index.html里面，只需要在这个文件里面，书写html代码。随后就可以通过公网IP访问这个web内容。例如完成如下的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网Web界面</title>
</head>
<body>
    <h1>物联网Web界面示例</h1>

    <h2>示例参数</h2>
    <p>温度：<span id="temperature">25°C</span></p>
    <p>湿度：<span id="humidity">50%</span></p>
    <p>光照强度：<span id="light">800 lux</span></p>

    <h2>示例按钮</h2>
    <button onclick="toggleLight()">控制灯光</button>
    <button onclick="sendCommand('turnOn')">打开设备</button>
    <button onclick="sendCommand('turnOff')">关闭设备</button>

    <script>
        // 模拟函数，用于切换灯光状态
        function toggleLight() {
            const lightElement = document.getElementById('light');
            if (lightElement.textContent === '800 lux') {
                lightElement.textContent = '0 lux';
            } else {
                lightElement.textContent = '800 lux';
            }
        }

        // 模拟函数，用于发送设备控制命令
        function sendCommand(command) {
            alert('发送命令：' + command);
        }
    </script>
</body>
</html>

把上述代码，替换到apache的默认html文件中，随后通过公网IP访问，即可看在对应的web界面，如下图示：
在这里插入图片描述
在这个web界面中，可以显示数据，可以通过按钮发送指令。代码中如果接入MQTT后，就可以通过web下发MQTT指令，对下位机进行控制和实时显示下位机上报的数据。
至此教程结束。