顺德网站建设找顺的,代理网站系统,无法分享到微信wordpress,大型app定制开发我将向你介绍如何将一个网站部署到公网#xff0c;包含完整流程。
前端静态网站
静态网站文件
首先需要准备一个简单的网页文件用于展示页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta name包含完整流程。
前端静态网站
静态网站文件
首先需要准备一个简单的网页文件用于展示页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title一个很简单的静态页面/title
/head
body stylemax-width: 1600px; text-align: center; margin: 40px auto; border: 1px solid black; border-radius: 30px;h1 stylefont-size: 128px;各位大佬/h1p stylefont-size: 96px;给个三连吧/p
/body
/html效果如下
服务器购买、
接下来我们需要购买一个云服务器对于学生和新用户来说有很便宜的选项。
学生特惠10.14元/月 新用户免费试用数十款产品
我这边因为是教学所以就选个按量付费可以随时退订服务器。 接下来进入控制台修改密码找到公网IP链接到服务器。
服务部署
接下来上传静态资源文件夹到服务器
# 在服务器执行
# 在服务器创建一个文件夹用于存放网页静态文件
mkdir -p /var/www/html/bitforest# 在本地的终端上执行
# 将本地的文件上传到服务器
scp ./Desktop/bitforest/index.html root47.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(bpong\n)def run_server(port):server_address (0.0.0.0, port)httpd HTTPServer(server_address, RequestHandler)print(fStarting 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title一个很简单的静态页面/title
/head
body stylemax-width: 1600px; text-align: center; margin: 40px auto; border: 1px solid black; border-radius: 30px;h1 stylefont-size: 128px;各位大佬/h1p stylefont-size: 96px;给个三连吧/pp idresult获取服务器状态.../p
/body
script
fetch(/api/ping).then(resp resp.text()).then(resp {const resultElement document.getElementById(result);resultElement.textContent resp;})
/script
/html至此一个完整的前后端服务都已经部署完毕
