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

这篇具有很好参考价值的文章主要介绍了使用Python Flask搭建一个简单的Web站点并发布到公网上访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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, flash

app = 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

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

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

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

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

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

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

这样我们使用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 管理界面配置即可

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

配置到隧道中

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

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

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

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

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

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

使用Python Flask搭建一个简单的Web站点并发布到公网上访问,python,flask,前端文章来源地址https://www.toymoban.com/news/detail-761256.html

到了这里,关于使用Python Flask搭建一个简单的Web站点并发布到公网上访问的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 创建一个简单的区块链,并使用 Flask 框架提供一个简单的 Web 接口来与区块链交互。

    目录 前言 一、代码展示 二、代码注释 1.简单的区块链模拟实现,这段代码定义了一个简单的区块链类,可以创建一个新的区块链,并能够添加新的区块到链上,同时获取最新的区块信息。这个模拟的区块链可以用于教学或演示区块链的基本概念。 2.这段代码是一个简单的工

    2024年04月14日
    浏览(36)
  • 在树莓派上搭建web站点并发布互联网上线【无需公网IP】

    这非常适合设置您的第一个网站,不仅可以学习管理 wordpress 站点,还可以学习 Linux。您将需要一个树莓派(Raspberry Pi)、几个小时和一台计算机来下载映像。 树莓派(RPI) 是学习这些东西的完美设备。 还可以查看 RaspberryPi 的官方项目站点 来源: https://projects.raspberrypi.org/en/proje

    2024年01月17日
    浏览(36)
  • 使用Flask Web创建一个调用ChatGPT API的网页--简单示例(Windows环境下)

    前提:你应该要有一个能正常使用chatGPT的openAI账号;即你已经成功注册了chatGPT,并能正常使用。 要使用Flask Web创建一个调用ChatGPT API的网页,你需要以下几个主要组成部分: ChatGPT API:一个可以处理用户输入并生成回复的ChatGPT模型的API。你可以使用OpenAI提供的GPT-3.5 Playgro

    2024年02月12日
    浏览(38)
  • 使用Flask Web创建一个调用ChatGPT API的网页--简单示例(linux环境下)

    前提:你应该要有一个能正常使用chatGPT的openAI账号;即你已经成功注册了chatGPT,并能正常使用。 下面是一个使用Flask Web框架创建调用ChatGPT API的网页的示例代码和工程结构: 具体的工程,你可以选择自己创建,也可以直接下载我创建好的工程,链接如下: https://download.csd

    2024年02月13日
    浏览(27)
  • 使用Python + Flask搭建web服务

    示例脚本 运行脚本 在浏览器上校验 在浏览器地址栏输入URL和定义的路径,回车请求,校验响应数据是否正确。 也可使用Python-requests库请求回调测试 运行脚本

    2024年02月14日
    浏览(32)
  • 一个简单的Web程序(详解创建一个Flask项目后自带的一个简单的Web程序)

    程序代码截图如下:  在创建 Flask 程序时,通常需要先创建一个应用实例进行应用初始化。 上述代码中,使用 Flask 类创建了一个应用实例 app。 __name__ 参数用于获取当前代码文件的文件名,作为应用实例的名称。 if __name__ == \\\'__main__\\\': app.run(debug=True) 用于启动服务器并运行应

    2024年01月20日
    浏览(34)
  • 使用node.js 搭建一个简单的HelloWorld Web项目

    文档结构 config.ini one.js 使用方法 启动内网穿透 在控制台启动js文件 访问网页 修改为8081 登录natapp官网 成功访问

    2024年02月14日
    浏览(35)
  • 【毕设必备】手把手带你用Python搭建一个简单的后端服务- API的创建,前后端交互的数据传递,GET,POST,JSON,FLASK

    Python是一种 流行 的高级编程语言,具有易于学习和使用的特性,被广泛应用于各种领域。 简单易学 :Python的语法清晰简洁,易于理解和学习。与其他编程语言相比,Python的语法设计非常直观,使得编程新手也能快速上手。 强大的标准库和丰富的第三方库 :Python拥有一个庞

    2024年02月04日
    浏览(38)
  • 【IIS搭建网站】如何使用本地电脑做服务器搭建web站点并公网访问

    目录 前言 Windows网页设置 Windows IIS功能设置 IIS网页访问测试 Cpolar内网穿透 下载安装Cpolar Cpolar云端设置 3.3 Cpolar本地设置 公网访问测试 结语 在网上各种教程和介绍中,搭建网页都会借助各种软件的帮助,比如网页运行的Apache和Nginx、数据库软件MySQL和MSSQL之类,为方便用户使

    2023年04月14日
    浏览(61)
  • python创建一个简单的flask应用

    下面用python在本地和服务器上分别创建一个简单的flask应用: 1.在pc本地 1)pip flask后创建一个简单的脚本flask_demo.py win+R进入命令行,切换到flask_demo.py的路径,执行 启动应用 如果显示启动失败,可能的原因是: 设置FLASK_APP环境变量:在命令行中输入以下命令,将FLASK_APP环境

    2024年02月05日
    浏览(26)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包