前端静态网站

静态网站文件

首先需要准备一个简单的网页文件用于展示页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>一个很简单的静态页面</title>
</head>
<body style="max-width: 1600px; text-align: center; margin: 40px auto; border: 1px solid black; border-radius: 30px;"><h1 style="font-size: 128px;">各位大佬</h1><p style="font-size: 96px;">给个三连吧😁</p>
</body>
</html>

效果如下：在这里插入图片描述

服务器购买、

接下来我们需要购买一个云服务器，对于学生和新用户来说有很便宜的选项。

学生特惠10.14元/月
新用户免费试用数十款产品

我这边因为是教学所以就选个按量付费，可以随时退订服务器。
接下来进入控制台修改密码，找到公网IP，链接到服务器。

服务部署

接下来上传静态资源文件夹到服务器

# 在服务器执行！！
# 在服务器创建一个文件夹用于存放网页静态文件
mkdir -p /var/www/html/bitforest# 在本地的终端上执行！！
# 将本地的文件上传到服务器
scp ./Desktop/bitforest/index.html root@47.100.83.142:/var/www/html/bitforest/

安装nginx

apt update
apt install nginx

这一步在浏览器打开对应IP的内容如果能看到下面这个页面说明nginx配置没问题，如果看不到可能是端口没开放或者安装nginx失败了。
更改nginx配置文件

nano /etc/nginx/nginx.conf

需要创建一个新的server用于这个静态网站

http {# ...server {listen 80;server_name 47.100.83.142;  # 填服务器的IPlocation / {root /var/www/html/bitforest;index index.html;}}
}

然后更新下nginx的配置文件

nginx -s reload

重新打开47.100.83.142，即可看到网站

后端动态数据

用python实现一个简单的ping服务器

使用 nano server.py 新建下面这个文件，并执行 python3 server.py 即可启动一个简单的服务

from http.server import BaseHTTPRequestHandler, HTTPServerclass RequestHandler(BaseHTTPRequestHandler):def do_GET(self):if self.path == '/api/ping':self.send_response(200)self.send_header('Content-type', 'text/plain')self.end_headers()self.wfile.write(b'pong\n')def run_server(port):server_address = ('0.0.0.0', port)httpd = HTTPServer(server_address, RequestHandler)print(f'Starting server on port {port}...')httpd.serve_forever()if __name__ == '__main__':run_server(8000)

另外启动一个服务器的终端执行检测，看到端口是否是通的，返回了pong

curl localhost:8000/ping
pong  # 这个是返回的结果

接下来需要让服务在后端运行，这里直接选择运行命令

nohup python3 server.py &

对公网提供服务

现在还是没有办法访问到的，有2种办法可以解决这个问题，第一种是打开服务器的8000端口，另一种办法是使用nginx反向代理。

打开8000端口是最方便的，但是也将服务器整个暴露在了公网，也需要服务器有公网IP。
而使用nginx会有比较多的优势：
- 服务器不需要暴露，也不需要公网IP地址，可以处于完全私有的内网环境中
- 后续https配置方便，可以在同一的nginx网关入口配置，不需要介入到项目的开发中
- 可以实现简单的负载均衡

nginx配置

server {listen 80;server_name 47.100.83.142;location /api {proxy_pass localhost:8000;}location / {root /var/www/html/bitforest;index index.html;}
}

前端获取服务端数据

编辑一下前端的文件，并重新上传

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>一个很简单的静态页面</title>
</head>
<body style="max-width: 1600px; text-align: center; margin: 40px auto; border: 1px solid black; border-radius: 30px;"><h1 style="font-size: 128px;">各位大佬</h1><p style="font-size: 96px;">给个三连吧😁</p><p id="result">获取服务器状态...</p>
</body>
<script>
fetch('/api/ping').then(resp => resp.text()).then(resp => {const resultElement = document.getElementById('result');resultElement.textContent = resp;})
</script>
</html>