如何使用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.rhkb.cn/news/248150.html

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

相关文章

HTML以及CSS相关知识总结(一)

近日就开始回顾html和css相关知识啦&#xff0c;并且会学习html5和css3的新知识&#xff0c;以下是我对记忆不太深刻的地方以及新知识点的总结&#xff1a; Web标准&#xff1a; 结构&#xff1a;用于对网页元素进行整理和分类&#xff0c;即HTML 表现&#xff1a;用于设置网页…

Spring Boot如何统计一个Bean中方法的调用次数

目录 实现思路 前置条件 实现步骤 首先我们先自定义一个注解 接下来定义一个切面 需要统计方法上使用该注解 测试 实现思路 通过AOP即可实现&#xff0c;通过AOP对Bean进行代理&#xff0c;在每次执行方法前或者后进行几次计数统计。这个主要就是考虑好如何避免并发情况…

Spring cloud智慧工地信息平台管理系统源码

目录 报警统计 实时报警列表 工程进度 劳务信息 隐患信息 施工安全管理 人员证书管理 专项安全方案 安全方案审批 隐患排查管理 安全检查统计 危险源Top10 整改超时预警 检查问题数量统计 安全隐患趋势 安全日志管理 视频监控查看 视频回放 AI危险源识别 AI应用总览 AI设备 机械…

海外动态IP代理如何帮助批量注册TikTok账户?

Tik Tok作为全球最火爆的短视频社交平台&#xff0c;无论是商业推广还是个人使用&#xff0c;都有着巨大的吸引力。商业推广中经常需要批量注册Tik Tok账号&#xff0c;以便进行市场营销或者数据分析。那么&#xff0c;如何批量注册Tik Tok账号呢&#xff1f;这篇文章将为大家详…

路由、组件目录存放

文章目录 单页应用程序&#xff1a;SPA- Single Page Application路由的介绍VuePouter的介绍VueRouted 的使用 组件目录存放问题&#xff08;组件分类&#xff09; 单页应用程序&#xff1a;SPA- Single Page Application 单页应用&#xff08;SPA&#xff09;:所有功能在一个…

粒子群算法求解港口泊位调度问题(MATLAB代码)

粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;是一种基于群体智能的优化算法&#xff0c;它通过模拟鸟群或鱼群的行为来寻找最优解。在泊位调度问题中&#xff0c;目标是最小化所有船只在港时间的总和&#xff0c;而PSO算法可以帮助我们找到一…

GitLab 中国发行版如何设置镜像拉取策略?

最近在用极狐GitLab&#xff08;极狐GitLab 可以理解为 GitLab 在中国的发行版&#xff09; CI/CD 的时候遇到一个问题&#xff1a;CI/CD 中有一个 stage 需要拉取 dockerhub 上的镜像&#xff0c;但是由于 dockerhub 在国内的访问不是很顺畅&#xff0c;经常发生 timeout 的情…

Spring Boot + security + jwt 测试安全策略

一、测试概述 主要目的是测试security的用法。因测试搭建mysql和redis比较麻烦&#xff0c;所以我这里将自定义的jwt和用户信息缓存到程序的内存中。 本人测试的项目比较混乱&#xff0c;Spring Boot父类只标出有用的依赖。其子类用的版本为jdk11。后续会继续深入oauth2&#x…

【Linux 基础】常用基础指令(上)

文章目录 一、 创建新用户并设置密码二、ls指令ls指令基本概念ls指令的简写操作 三、pwd指令四、cd指令五、touch指令六、rm指令七、mkdir指令八、rmdir 指令 一、 创建新用户并设置密码 ls /home —— 查看存在多少用户 whoami —— 查看当前用户名 adduser 用户名 —— 创建新…

公司宣传电子画册的制作方法

​制作公司宣传电子画册是一种非常有效的方式&#xff0c;可以展示公司的形象和产品&#xff0c;同时也可以吸引更多的潜在客户。不仅低碳环保&#xff0c;还省了不少人力和财力&#xff0c;只要一个二维码、一个链接就能随时随地访问公司的宣传画册。以下是一些制作电子画册的…

(2024,双流编码器,文本引导的风格迁移,调制,FFT 和低频滤波)FreeStyle:使用扩散模型进行文本引导风格迁移

FreeStyle: Free Lunch for Text-guided Style Transfer using Diffusion Models 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 方法 3.1 LDM 3.2 FreeStyle 的模型结构…

springBoot配置文件加密

很多项目的配置文件里&#xff0c;包括数据库密码、缓存密码、还有一些第三方服务的Key都是直接配在里面&#xff0c;没有做任何加密处理&#xff01; 本次我用SpringBoot 集成 Jasypt 对数据库加密以及踩坑经验 1.集成依赖&#xff0c;我用的是目前最新的版本3.0.4版本 <…

常用芯片学习——AMS1117芯片

AMS1117 1A 低压差线性稳压器 使用说明 AMS1117 是一款低压差线性稳压电路&#xff0c;该电路输出电流能力为1A。该系列电路包含固定输出电压版本和可调输出电压版本&#xff0c;其输出电压精度为士1.5%。为了保证芯片和电源系统的稳定性&#xff0c;XBLWAMS1117 内置热保护和…

语音生成、写作增强、论文辅助、英文学习,AI原生应用精彩推荐一箩筐!

崭新的2024年已然降临&#xff0c;飞桨星河社区再次涌现出诸多精彩纷呈的AI原生应用&#xff0c;快来一同探索&#xff0c;发现这些应用带来的无限惊喜与可能吧&#xff01; 语音生成&#xff1a;10音色自由选择 应用介绍 本应用基于ERNIE SDK和语音合成工具&#xff0c;可以…

树--二叉树(C语言纯手凹)

目录 目录 1.什么是树&#xff1f;&#xff08;不深入&#xff0c;仅做了解&#xff09; 2.树的表示方式 2.1孩子兄弟表示法&#xff08;左孩子右兄弟&#xff09; 2.2孩子表示法 2.3双亲表示法 3.什么是二叉树 4.二叉树分类 4.1满二叉树 4.2完全二叉树 4.3二叉搜索树…

获取鼠标点击图片时候的坐标,以及利用html 中的useMap 和area 实现图片固定位置的点击事件

一 编写原因 应项目要求&#xff0c;需要对图片的固定几个位置分别做一个点击事件&#xff0c;响应不同的操作&#xff0c;如下图&#xff0c;需要点击红色区域&#xff0c;弹出不同的提示框&#xff1a; 二 获取点击图片时候的坐标 1. 说明 实现这以上功能的前提是需要确定需…

for循坏

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录 前言一、循坏的四要素二、for循环的格式三、for循坏的小练习1、打印1-100以内的偶数&#xff0c;并求和2、输出所有的水仙花数3、求两个数的最大公约数和最小公倍数3.1最大公约数3.2最小公倍数 4、双层for循坏打印九九…

linux安装python3.11

yum install gcc-c zlib-devel bzip2-devel openssl* ncurses-devel sqlite* readline-devel tk-devel gdbm-devel libpcap* xz-devel libffi-devel -y 下载地址 https://www.python.org/ftp/python/3.11.7/Python-3.11.7.tar.xz 上传python文件&#xff0c;解压&#xff…

kubernetes-快速部署一套k8s集群

1、前置知识点 1.1 生产环境可部署Kubernetes集群的两种方式 目前生产部署Kubernetes集群主要有两种方式&#xff1a; kubeadm Kubeadm是一个K8s部署工具&#xff0c;提供kubeadm init和kubeadm join&#xff0c;用于快速部署Kubernetes集群。 二进制包 从github下载发行…

进程的执行过程

文章目录 前言一、进程的执行过程二、进程的示例2.1 示例1所有进程必须有限或者与时钟相关2.2 示例2多进程共享变量2.3 示例3仿真在0时刻结束2.4 示例4仿真变量保持不变 总结 前言 本文主要记录一下进程的执行过程&#xff0c;并通过一些例子&#xff0c;帮助进一步理解这个过…