前端静态网站

静态网站文件

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

<!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;  # 填服务器的IP
    location / {
      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, HTTPServer

class 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>