使用Python Flask搭建一个简单的Web站点并发布到公网上访问

文章目录

    • 前言
    • 1. 安装部署Flask并制作SayHello问答界面
    • 2. 安装Cpolar内网穿透
    • 3. 配置Flask的问答界面公网访问地址
    • 4. 公网远程访问Flask的问答界面

前言

Flask是一个Python编写的Web微框架,让我们可以使用Python语言快速实现一个网站或Web服务,本期教程我们使用Python Flask搭建一个web问答应用程序框架,并结合cpolar内网穿透工具将我们的应用程序发布到公共网络上,实现可多人远程进入到该web应用程序访问。

在操作上我们将使用HTML来创建网页的结构,然后使用css设计这个结构并且使其看起来更漂亮,此外还会利用Javascript与页面上的不同元素进行交互,最后使用python与web服务器(也成为后端)进行连接。

1. 安装部署Flask并制作SayHello问答界面

本篇文章代码使用 Python3 运行

安装环境:需要在电脑上安装 Python3 和 pip3。建议安装最新版本

检查是否有安装了pip的可用Python,查看Python和pip版本:

C:> py --version
Python 3.N.N
C:> py -m pip --version
pip X.Y.Z from ... (python 3.N.N)

使用pip安装和更新:

$ pip install -U Flask

创建环境:

conda create -n SAYHELLO python=3.10

激活环境:

conda activate SAYHELLO

创建项目目录:

mkdir SAYHELLO

进入到创建的目录:

cd SAYHELLO

在当前目录启动VS Code:

code .

SAYHELLO文件夹下新建两个附加文件夹,一个名为templates储存html文件的位置,

另一个名为static文件夹,下面新建一个名为css的文件夹。

css文件夹下新建一个名为main.css的文件,

body {text-align: center;background-color: SlateGrey;
}
p {color: white;font-family: Shanti;font-size: 1.2em;display: inline-block;margin:  20px;
}
img {margin: 60px 0 30px 0;width: 250px;
}
input {width: 300px;margin: 20px 20px;height: 50px;border: none;border-radius: 10px;font-family: Shanti;font-size: 1.3em;text-align: center;
}input:focus {outline: none;border: solid 5px #00FFCE;
}#greet {background-color: PaleVioletRed;border:  none;width:  200px;color: white;
}#greet:hover {background-color: MediumVioletRed;
}

templates文件夹里新建一个名为index.html的文件,

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Say Hello</title><link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body><img src="https://images.cpolar.com/img/202311271456089.png"><br><form action="greet" method="post">{% for message in get_flashed_messages() %}<p>{{ message }}</p>{% endfor %}<br><input type="text" name="name_input"><br><input type="submit" value="GREET" id="greet"></form>
</body>
</html>

SAYHELLO文件下新建一个名为Procfile的文件,

web: gunicorn app:app

SAYHELLO文件下新建一个名为app.py的文件,

from flask import Flask, render_template, request, flashapp = Flask(__name__)
app.secret_key = "manbearpig_MUDMAN888"@app.route("/")
def index():flash("what's your name?")return render_template("index.html")@app.route("/greet", methods=['POST', 'GET'])
def greeter():flash("Hi " + str(request.form['name_input']) + ", great to see you!")return render_template("index.html")

SAYHELLO文件下新建一个名为requirements.txt的文件,

certifi==2021.5.30
click==7.1.2
Flask==1.1.2
gunicorn==20.0.4
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==2.0.1
Werkzeug==1.0.1
wincertstore==0.2

在TERMINAL里启动Flask

flask run

image-20231127155003195

打开一个新的浏览器,输入http://127.0.0.1:5000,进入到刚才制作的SAY Hello的打招呼界面。

可以看到刚才创建的问题回答:what’s your name?

image-20231127155252049

点击GREET后,弹出:HI wang,greet to see you!

image-20231127155443924

这样我们使用Flask搭建的一个基本的带有问答形式的界面就搭建完成了,接下来我们要把这个问答界面发布到公网,分享给别人并且在web进行前端与后端的互动。

2. 安装Cpolar内网穿透

上面在本地成功部署了Flask,并局域网访问成功,下面我们安装Cpolar内网穿透工具,通过cpolar 转发本地端口映射的http公网地址,我们可以很容易实现远程访问,而无需自己注册域名购买云服务器.下面是安装步骤:

cpolar官网地址: https://www.cpolar.com

  • 使用一键脚本安装命令
curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash
  • 向系统添加服务
sudo systemctl enable cpolar
  • 启动cpolar服务
sudo systemctl start cpolar

cpolar安装成功后,在外部浏览器上访问9200端口 即:【http://局域网ip:9200】,使用cpolar账号登录(如没有账号,可以点击下面免费注册),登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可

image-20230831171159175

3. 配置Flask的问答界面公网访问地址

点击左侧仪表盘的隧道管理——创建隧道,创建一个Flask的cpolar公网地址隧道:

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:5000 (局域网访问的端口)
  • 域名类型:免费选择随机域名
  • 地区:选择China Top
  • 点击创建

image-20231127160128962

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http 和https

image-20231127160236923

4. 公网远程访问Flask的问答界面

使用上面的cpolar https公网地址在任意设备的浏览器访问,即可成功看到Flask的web界面,这样一个公网地址且可以远程访问就创建好了,无需自己购买云服务器,即可发布到公网访问。

image-20231127160540688

由于以上使用cpolar所创建的隧道使用的是随机公网地址,24小时内会随机变化,不利于长期远程访问。

我一般会使用固定二级子域名,因为我希望将网址发送给别人进行问卷调查时候,就可以直接使用固定的公网地址进行填写了。它是一个固定、易记的公网地址(例如:SayHello.cpolar.cn)因此我们可以为其配置二级子域名,该地址为固定地址,不会随机变化【ps:cpolar.cn已备案】

注意需要将cpolar套餐升级至基础套餐或以上,且每个套餐对应的带宽不一样。【cpolar.cn已备案】

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。

image-20231127160930144

保留成功后复制保留成功的二级子域名的名称

image-20231127160950732

返回登录cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

image-20231127161016574

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20231127161143781

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

image-20231127161212877

最后,我们使用固定的公网地址访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了。

配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

最后,我们使用固定的公网地址访问,可以看到访问成功,这样一个固定且永久不变的公网地址就设置好了。

image-20231127161237988

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 56 合并区间

题意理解&#xff1a; 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。 合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组。 该数组需恰好覆盖输入中的所有区间 。 目标&#xff1a;合并…

k8s集群etcd备份与恢复

一、前言 k8s集群使用etcd集群存储数据&#xff0c;如果etcd集群崩溃了&#xff0c;k8s集群的数据就会全部丢失&#xff0c;所以需要日常进行etcd集群数据的备份&#xff0c;预防etcd集群崩溃后可以使用数据备份进行恢复&#xff0c;也可用于重建k8s集群进行数据恢复 二、备份…

gin框架使用系列之六——自定义中间件

系列目录 《gin框架使用系列之一——快速启动和url分组》《gin框架使用系列之二——uri占位符和占位符变量的获取》《gin框架使用系列之三——获取表单数据》《gin框架使用系列之四——json和protobuf的渲染》《gin框架使用系列之五——表单校验》 一、gin中间件概述 gin中将…

2024年中职“网络安全“—数字调查取证(attack817.pcapng)

目录 ​1.通过分析数据包找出恶意用户最初访问HTTP服务的包号&#xff0c;将该值作为Flag值提交, Flag格式为flag{xxx}&#xff1b; 2.继续查看数据包文件分析出恶意用户扫描了哪些端口&#xff0c;将全部的端口号按照一定顺序作为Flag值&#xff0c;提示&#xff1a;注意端口…

编译原理手写版笔记

编译原理手写版笔记 来自smile 一个学期主要学习了词法分析、文法分析、语法分析、语义分析。 按照教学脉络&#xff0c;整理了一份期末笔记。用于复习整个学期的知识点 并且把所有的数据结构以及算法 整理出来。可以用于考试手写完成题目。 当然拿高分需要多练习&#xff0…

理解 Go Mod Init

初始化Go模块和管理依赖的全面指南 go mod init 是Go编程语言&#xff08;通常称为Golang&#xff09;中用于初始化新Go模块的命令。在Go中&#xff0c;一个模块是一组相关的Go包&#xff0c;它们作为一个单元一起进行版本控制。通常&#xff0c;在项目目录的根目录下使用 go m…

【算法】运用滑动窗口方法解决算法题(C++)

文章目录 1. 滑动窗口 介绍2. 滑动窗口算法引入209.长度最小的子数组 3. 使用滑动窗口解决算法题3.无重复字符的最长子串1004.最大连续1的个数III1658.将x减到0的最小操作数904.水果成篮LCR015.找到字符串中所有字母异位词30.串联所有单词的子串76.最小覆盖子串 1. 滑动窗口 介…

数据分析-23--糖尿病预测(线性回归模型)(包含数据代码)

文章目录 0. 数据代码下载1. 项目介绍2. 数据处理1. 导入数据2. 处理数据 3. 建立模型4. 考察单个特征 0. 数据代码下载 关注公众号&#xff1a;『AI学习星球』 回复&#xff1a;糖尿病预测 即可获取数据下载。 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或➕v&am…

“双十一、二” 业务高峰如何扛住?韵达快递选择 TDengine

小 T 导读&#xff1a; 为了有效处理每日亿级的数据量&#xff0c;早在 2021 年&#xff0c;韵达就选择用 TDengine 替代了 MySQL&#xff0c;并在三台服务器上成功部署和上线了 TDengine 2.0 集群。如今&#xff0c;随着 TDengine 3.0 版本的逐渐成熟&#xff0c;韵达决定将现…

android实战之添加图标到项目中

引言 阿里云矢量库有很多图标&#xff0c;注册账号&#xff0c;下载下载选择的图标&#xff0c;下载时选择svg格式。 实现 1. androidstudio &#xff0c;drawable右键---new ----->vector asset&#xff0c;选择本地下载的资源。 点击next。完成

libssh 服务端权限认证绕过(CVE-2018-10933)

漏洞描述&#xff1a; libssh 是一个提供 SSH 相关接口的开源库&#xff0c;包含服务端、客户端等。其服务端代码中存在一处逻辑错误&#xff0c;攻击者可以在认证成功前发送MSG_USERAUTH_SUCCESS消息&#xff0c;绕过认证过程&#xff0c;未授权访问目标 SSH 服务器。 复现过…

传统船检已经过时?AR智慧船检来助力!!

想象一下&#xff0c;在茫茫大海中&#xff0c;一艘巨型货轮正缓缓驶过。船上的工程师戴着一副先进的AR眼镜&#xff0c;他们不再需要反复翻阅厚重的手册&#xff0c;一切所需信息都实时显示在眼前。这不是科幻电影的场景&#xff0c;而是智慧船检技术带来的现实变革。那么问题…

[Linux]Ubuntu noVNC使用

又到了逛大型程序员交友 网站的时间了&#xff0c;今天你准备好了吗。 今天要推荐的一个有趣的项目是noVNC setup好以后是这个样子的&#xff0c;可以在浏览器登陆vnc&#xff0c;不需要再安装一个vnc client. setup的过程比较简单&#xff0c;分为以下几步&#xff1a; 1. v…

Linux操作系统——进程(六) 进程地址空间

进程地址空间 C/C程序员一般将我们所写的程序看成如下这种结构&#xff1a; 我们所写的程序通过编译编译之后就可以以这样的方式进行分布. 我们先通过编写一段C语言代码来进行验证&#xff1a; 运行结果&#xff1a; 我们可以看出来上述地址遵循的就是我们上面画的一种结构。…

059:vue中使用 AJAX来读取来自XML文件的信息

第059个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

mac 生成 本地.ssh

输入下面命令行 ssh-keygen 默认回车得到下面的 Generating public/private rsa key pair. Enter file in which to save the key (/Users/{用户名}/.ssh/id_rsa): Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has be…

Azure 学习总结

文章目录 1. Azure Function1.1 Azure Function 概念1.2 Azure Function 实现原理1.3 Azure Function 本地调试1.4 Azure Function 云部署 2. Azure API Managment 概念 以及使用2.1 Azure API 概念2.2 Azure API 基本使用 3. Service Bus 应用场景及相关特性3.1 Service Bus 基…

京东商家数据工具讲解(一):竞品数据如何监控与分析

京东平台的店铺众多&#xff0c;同行数不胜数。作为商家&#xff0c;如果连自己竞争对手的情况都不知道的话&#xff0c;很难在这个平台存活下去。那么&#xff0c;这次鲸参谋就来重点说一下“竞品分析”。 竞品分析&#xff0c;主要是对京东店铺运营期间竞争对手的市场经营状…

【docker实战】02 用docker安装mysql

本示例采用bitnami的镜像进行安装MySQL 一、镜像搜索 先搜索一下mysql有哪些镜像 [rootlocalhost ~]# docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql …

Android : 画布的使用 简单应用

示例图&#xff1a; MyView.java&#xff1a; package com.example.demo;import android.content.Context; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.view.Vi…