阿里云免费服务器搭建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指令,对下位机进行控制和实时显示下位机上报的数据。
至此教程结束。