当前位置: 首页 > news >正文

如何使用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

相关文章:

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问?

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…...

【C语言】【力扣】刷题小白的疑问

一、力扣做题时的答案&#xff0c;没有完整的框架 疑问&#xff1a; 在学习C语言的初始&#xff0c;就知道C语言程序离不开下面这个框架&#xff0c;为什么力扣题的解答往往没有这个框架&#xff1f; #include <stdio.h>int main() {return 0; } 解答&#xff1a; 力扣平…...

【Python】03快速上手爬虫案例三:搞定药师帮

文章目录 前言1、破解验证码2、获取数据 前言 提示&#xff1a;通过用户名、密码、搞定验证码&#xff0c;登录进药师帮网站&#xff0c;然后抓取想要的数据。 爬取数据&#xff0c;最终效果图&#xff1a; 1、破解验证码 使用药师帮测试系统&#xff1a;https://dianrc.ysb…...

C++异步编程

thread std::thread 类代表一个单独的执行线程。在创建与线程对象相关联时&#xff0c;线程会立即开始执行&#xff08;在等待操作系统调度的延迟之后&#xff09;&#xff0c;从构造函数参数中提供的顶层函数开始执行。顶层函数的返回值被忽略&#xff0c;如果它通过抛出异常…...

dfs专题(记忆化搜索)P1141 01迷宫——洛谷(题解)

题目描述 有一个仅由数字 00 与 11 组成的 &#xfffd;&#xfffd;nn 格迷宫。若你位于一格 00 上&#xff0c;那么你可以移动到相邻 44 格中的某一格 11 上&#xff0c;同样若你位于一格 11 上&#xff0c;那么你可以移动到相邻 44 格中的某一格 00 上。 你的任务是&#…...

pip 安装出现报错 SSLError(SSLError(“bad handshake

即使设置了清华源&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simplepip 安装包不能配置清华源&#xff0c;出现报错: Retrying (Retry(total2, connectNone, readNone, redirectNone, statusNone)) after connection broken by ‘SSLE…...

新概念英语第二册(46)

【New words and expressions】生词和短语&#xff08;12&#xff09; unload v. 卸&#xff08;货&#xff09; wooden adj. 木制的 extremely adv. 非常&#xff0c;极其 occur …...

动态规划入门题目

动态规划&#xff08;记忆化搜索&#xff09;&#xff1a; 将给定问题划分成若干子问题&#xff0c;直到子问题可以被直接解决。然后把子问题的答保存下来以免重复计算&#xff0c;然后根据子问题反推出原问题解的方法 动态规划也称为递推&#xff08;暴力深搜记忆中间状态结果…...

探索云性能测试的各项功能有哪些?

云性能测试作为现代软件开发和部署过程中不可或缺的一环&#xff0c;为确保系统在各种条件下的高效运行提供了关键支持。本文将介绍云性能测试的各项功能&#xff0c;帮助您更好地了解其在软件开发生命周期中的重要性。 1. 负载测试 云性能测试的首要功能之一是负载测试。通过模…...

(大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量

今天&#xff0c;面试了一家公司&#xff0c;什么也不说先来三道面试题做做&#xff0c;第一题。 那么&#xff0c;我们就开始做题吧&#xff0c;谁叫我们是打工人呢。 题目是这样的&#xff1a; 统计除豪车外&#xff0c;销售最差的车 车辆按批销售&#xff0c;每次销售若干…...

Git安装,Git镜像,Git已安装但无法使用解决经验

git下载地址&#xff1a; Git - 下载 (git-scm.com) <-git官方资源 Git for Windows (github.com) <-github资源 CNPM Binaries Mirror (npmmirror.com) <-阿里镜像&#xff08;推荐&#xff0c;镜…...

Python与CAD系列高级篇(二十五)分类提取坐标到excel(补充圆半径、线长度、圆弧)

目录 0 简述1 分类提取坐标到excel2 结果展示0 简述 上一篇中介绍了:对点、直线、多段线、圆、样条曲线分类读取坐标并提取到excel。考虑到进一步提取图形信息,此篇补充对圆半径、线长度以及圆弧几何信息的提取。 1 分类提取坐标到excel 代码实现: import math import nump…...

Linux安装Influxdb

Linux安装Influxdb 1、安装步骤1.1、安装Influxdb步骤1.2、Influxdb默认安装路径1.3、命令行操作Influxdb&#xff0c;建库&#xff0c;建用户1.3.1 进入influxdb命令行1.3.2 创建用户1.3.2 库查询和创建 1、安装步骤 1.1、安装Influxdb步骤 yum install -y wget #下载安装包…...

Flutter CustomPainter 属性介绍与使用

Flutter 中的 CustomPainter 是一个强大的工具&#xff0c;允许开发者通过自定义绘制来创建各种复杂的图形和动画。本文将介绍 CustomPainter 的一些重要属性以及如何使用它们来实现自定义绘制。 1. CustomPainter 简介 CustomPainter 是一个抽象类&#xff0c;用于自定义绘制…...

基于Javaweb开发的二手图书零售系统详细设计【附源码】

基于Javaweb开发的二手图书零售系统详细设计【附源码】 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统…...

【JaveWeb教程】(35)SpringBootWeb案例之《智能学习辅助系统》登录功能的详细实现步骤与代码示例(8)

目录 案例-登录和认证1. 登录功能1.1 需求1.2 接口文档1.3 思路分析1.4 功能开发1.5 测试 案例-登录和认证 在前面的课程中&#xff0c;我们已经实现了部门管理、员工管理的基本功能&#xff0c;但是大家会发现&#xff0c;我们并没有登录&#xff0c;就直接访问到了Tlias智能…...

6.1 内存模式概述

Bruce Powel Douglass大师介绍-CSDN博客 嵌入式软件开发从小工到专家-CSDN博客 C嵌入式编程设计模式源码-CSDN博客 “内存管理模式”介绍了几种内存管理的模式&#xff0c;每种模式都针对特定的系统需求和约束设计。 6.2 静态分配模式&#xff08;Static Allocation Patter…...

Python中容器类型的数据

目录 序列 序列的索引操作 加和乘操作 切片操作 成员测试 列表 创建列表 追加元素 插入元素 替换元素 删除元素 元组 创建元组 元组拆包 集合 创建集合 修改集合 字典 创建字典 修改字典 访问字典视图 遍历字典 若我们想将多个数据打包并且统一管理&…...

虚拟机安装Centos8.5

记得看目录哦&#xff01; 附件1. 新建虚拟机2. 安装Centos8.5 附件 安装包自行下载 https://mirrors.aliyun.com/centos/8/isos/x86_64/ 1. 新建虚拟机 2. 安装Centos8.5 启动虚拟机–选择第一个install Centos8.5 记得接收许可证...

ENVI下基于知识决策树提取地表覆盖信息

基于知识的决策树分类是基于遥感影像数据及其他空间数据,通过专家经验总结、简单的数学统计和归纳方法等,获得分类规则并进行遥感分类。分类规则易于理解,分类过程也符合人的认知过程,最大的特点是利用的多源数据。 决策树分类主要的工作是获取规则,本文介绍使用CART算法…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...