有一个公网IP服务器的情况下，如何写一个前端web页面并实现公网访问

百试可乐

已于 2023-11-21 03:49:14 修改

阅读量247

点赞数

文章标签：前端 html 网络

于 2023-11-21 03:48:19 首次发布

本文链接：https://blog.csdn.net/qq_40107062/article/details/134521754

版权

文章描述了一个使用Python的Flask框架创建一个基本Web应用的过程，包括设置路由、渲染HTML、提供下载功能，并通过Nginx进行静态资源代理。作者还提供了在CentOS7.9服务器上的部署步骤。

摘要由CSDN通过智能技术生成

这个不是教学，只是作为记录，体现技术进步

我现在想实现有简单的功能的web：打开浏览器在浏览器上直接输入公网IP就可以进入我编写的网页，这个网页需要有标题，图片，跳转连接，还可以返回首页，有一个下载项，点击后自动跳出下载模块。

我是用的是python自带的flask模块，如果没有的话需要下载

pip3 install Flask
# 或者
pip install Flask

Flask默认是去项目文件下的templates目录下找html文件的，所以直接创建一个templates目录，然后创建home目录，在home目录下创建两个html文件，分别是a.html和b.html，下载目录为downlaod目录，图片目录为static目录，所以整体框架如下

首先编写前端代码，web.py文件范文（具体什么作用看# 注释）

# 首先导包
from flask import Flask,render_template,redirect,url_for,send_file
# 然后定义个实例
app = Flask(__name__)
# 定义这个方法就可以不需要输入后缀直接根据IP就可以进入首页
# 比如我把a.html定义为首页
@app.route("/")
def houme_redirect():
    return redirect(url_for("home_a"))
# 使用Flask包内的帽子给a.html文件定义路径
@app.route("/home/a")
# 定义方法
def home_a():
    # 使用Flask带的小工具打开home目录下的a.html并返回给方法home_a
    return render_template("home/a.html")
# b和a一样
@app.route("/home/b")
def home_b():
    # 使用Flask带的小工具打开home目录下的b.html并返回给方法home_b
    return render_template("home/b.html")
# 设置路径，这个必须带后缀，不然会显示找不到文件
@app.route("/download/授权书.docx")
# 定义下载方法，使用使用send_file工具
def download_file():
    # 定义路径，必须绝对路径，不然找不到文件
    file_path = "D:\webtest\download\授权书.docx"
    # 定义文件格式，必须带后缀，不然下载后没有后缀
    file_name = "授权书.docx"
    # 使用send_file获取到文件信息后返回给方法
    return send_file(
        file_path,
        # 这个是给浏览器信息，不然不让下载
        as_attachment=True,
        downlaod_name=file_name
    )

if __name__ == "__main__":
    # 实现实例，host接受所有请求，port端口设置8000，端口设置多少都行，具体看你那个端口空闲
    app.run(host="0.0.0.0", port=8000)

然后编写a.html（具体作用看# 注释）

<!DOCTYPE html>
<html lang="en">
<!--头-->
<head>
    <!--设置中文编译，不然出来的全是乱码-->
    <meta charset="UTF-8">
    <!--抬头-->
    <title>中国联通</title>
</head>
<!--体-->
<body>
    <!--设置标题，并设置超链接，如果点标题就进入百度-->
    <h1><a href="https://www.baidu.com">中国联通</a></h1>
    <div>
        <!--字体设置成红色-->
        <span style="color:red">时间：</span>
        <span >2023年11月21日：</span> 
    </div>
    <div>
        中国联合网络通信集团有限公司（简称“中国联通”）于2009年1月6日由原中国网通和原中国联通合并重组而成
    </div>
    <!--设置一张图片，宽800像素，高500像素，如果只设置一个是按照比例缩放-->   
    <img src="/static/fm.png" width="800" height="500">
    <br>
    <h1><a href="https://www.baidu.com">北京联通</a></h1>
    <div>
        <!--字体设置成红色-->
        <span style="color:red">时间：</span>
        <span >2023年11月21日：</span> 
    </div>
    <div>
        中国联合网络通信有限公司于经国务院批准正式，北京分公司作为中国联通设在北京的分支机构，主要负责北京地区通信网络的建设和运营。
    </div>
    <br>
    <!--跳转到下载页，也就是b.html-->
    <a href="/home/b">点此跳转下载页</a>
</body>
</html>

可以运行一下代码看看效果了（记得把b.html文件也新建一下，不然会报错，不然就把b.html代码注释了，回头再取消注释），运行后在终端应该是这么显示的

点击第一个127.0.0.1:8000就会自动打开浏览器

a.html已经实现了标题，内容文字，跳转界面，超链接，图片加载，剩余一个下载，这边放到b.html编写，（具体作用看）

<!DOCTYPE html>
<!--老规矩，设置头和体-->
<haed>
    <!--日常编译-->
    <meta charset="UTF-8">
    <!--设置抬头-->
    <title>下载页</title>
</haed>

<body>
    <div>跳转成功</div>
    <br>
    <!--设置一个要下载啥的图片-->
    <img src="/static/授权书.png">
    <br>
    <!--下载链接-->
    <a href="/download/授权书.docx" download>点击下载</a>
    <br>
    <br>
    <!--返回上页-->
    <a href="/home/a">点击返回上一页</a>
</body>
</html>

可以运行一下代码看看效果了

下载选项也可以正常运行了，接下来就把代码传入服务器，进行运行，让公网IP可以使用它

我使用的是Centos7.9服务器，没有服务器的小伙伴可以在阿里云申请一个，首次开通3个月免费哦

首先需要把这个项目打个zip包，如果直接目录scp传入的话会报错

如果你是Windows系统可以使用cmd终端然后使用SCP命令传入服务器，具体命令为

# 我直接在/目录下创建一个web目录，项目传入web目录下
scp D:/webtest.zip root@你的公网IP:/web

然后输入密码，核对后就会自动传输，可以使用工具连接linux，也可以直接使用cmd终端使用ssh命令连接linux

ssh root@你的公网IP

进入当前目录后解压

需要先安装一下python和Flask服务，我这里选择的是最新的python3.11.4

# 先安装一下python3，然后再安装一下Flask服务，不然运行不了
# 安装必要的依赖项
yum install -y gcc openssl-devel bzip2-devel libffi-devel zlib-devel wget
# 下载Python 3.11.4源代码包
wget https://mirrors.tuna.tsinghua.edu.cn/python/3.11.4/Python-3.11.4.tgz
# 解压源代码包并进入目录
tar -zxvf Python-3.11.4.tgz
cd Python-3.11.4
# 配置并编译源代码
./configure --enable-optimizations
make -j8
# 安装Python 3.11.4
make altinstall
# 验证Python 3.11.4是否安装成功
python3.11 --version

静态网页咱们也不用搞啥前后端交互啊啥的，直接使用nginx和Gunicorn进行代理，也可以单独用Gunicorn，但是必须一直开着，不方便，还是nginx方便，直接下载nginx和Gunicorn

yum install nginx
pip install gunicorn
pip
# 然后直接开启（最后这个app是你实例的名称，你实例是啥就填啥）
gunicorn -b 127.0.0.1:8000 web:app
# 设置nginx，找到nginx.conf文件，进行配置，一般这个文件就在下载的目录里
# 如果不知道nginx目录在哪就find / | grep nginx，查找一下
# 找到目录后打开nginx/conf/nginx.conf文件，找到service列进行配置
server
    {
        listen 80;
        server_name 你的公网ip;

            root /etc/web/webtest;
            index index.html index.htm index.php;

        location / {
                proxy_pass http://127.0.0.1:8000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        location ~ /tmp/ {
            return 403;
            }
# wq保存，然后重启一下nginx，输入命令nginx -t可以进行验证你配置的对不对
systemctl restart nginx
# 如果报错就看一下报错信息，具体问题具体分析
# 如果是nginx未启动就kill -9 杀一下nginx
# 查看nginx状态
systemctl status nginx
# 启动nginx
systemctl start nginx
# 如果nginx正常启动了，需要使用python启动你编写的py文件
python3 /etc/web/webtest/web.py
# 这样就可以在web输入你的公网IP进行连接了

OK，完事

百试可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有一个公网IP服务器的情况下，如何写一个前端web页面并实现公网访问

Flask默认是去项目文件下的templates目录下找html文件的，所以直接创建一个templates目录，然后创建home目录，在home目录下创建两个html文件，分别是a.html和b.html，下载目录为downlaod目录，图片目录为static目录，所以整体框架如下。我现在想实现有简单的功能的web：打开浏览器在浏览器上直接输入公网IP就可以进入我编写的网页，这个网页需要有标题，图片，跳转连接，还可以返回首页，有一个下载项，点击后自动跳出下载模块。这个不是教学，只是作为记录，体现技术进步。
复制链接

扫一扫