如何在本地安装Flask并将其web界面发布到公网上远程访问协同开发

清疚 2024-02-05 17:43 9阅读 0赞

**目录**

前言

1. 安装部署Flask

2. 安装Cpolar内网穿透

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

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

--------------------

### 前言 ###

本篇文章讲解如何在本地安装Flask，以及如何将其web界面发布到公网上并进行远程访问。

Flask是目前十分流行的web框架，采用Python编程语言来实现相关功能。较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发，开发人员分工合作，小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。

另外，Flask还有很强的定制性，用户可以根据自己的需求来添加相应的功能，在保持核心功能简单的同时实现功能的丰富与扩展，其强大的插件库可以让用户实现个性化的网站定制，开发出功能强大的网站。

### 1. 安装部署Flask ###

本篇文章代码使用 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

在VS Code里 FLASK下新建一个文件，名字为 `app.py`

粘贴下面命令，并保存

# save this as app.py
    from flask import Flask
    
    app = Flask(__name__)
    
    @app.route("/")
    def hello():
        return "Hello, World!"

![44ca448df10ba06fddd5f33d3a7c983d.png][]

在下方TERMINAL里输入`ls`查看目录位置

![2d2537eba3df0efca3368f11e6cf5244.png][]

打开一个新的命令

输入cd空格加上刚才vs code的目录，例如

cd C:\Users\wang\dev\python\flask

输入`ls`查看目录

![a8232e0e02ff6244cb10fda65e02875f.png][]

启动Flask

flask run

打开一个新的浏览器，输入[http://127.0.0.1:5000/][http_127.0.0.1_5000]，进入到 HelloWorld的web界面。

![2d65f3a454894b4793d569e0561adfe1.png][]

### 2. 安装Cpolar内网穿透 ###

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

> cpolar官网地址: [https://www.cpolar.com][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 管理界面配置即可

![405a06578afd6988a52aa4bca3e15795.png][]

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

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

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

![2403546d8d5cc2a1c51ce945f5164c3a.png][]

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

![86b518e8923c1f346edeee75e63a129b.png][]

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

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

![1e04bf04c1ccde806baa38436032c2c8.png][]

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

我一般会使用固定二级子域名，因为我希望将网址发送给开发人员分工合作，小型团队在短时间内就可以使用固定的公网地址完成功能丰富的中小型网站或Web服务的实现。它是一个固定、易记的公网地址（例如：Flask.cpolar.cn）因此我们可以为其配置二级子域名，该地址为固定地址，不会随机变化【ps：cpolar.cn已备案】

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

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

![af40a1eaff9b1bcf0ef327acb28727e4.png][]

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

![f9515d86b8871fa52d052e1e62951481.png][]

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

![618b3ea8d3ca6d779a8c3892f5f07a01.png][]

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

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

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

![f828de157dec11f8261330e6c574ac10.png][]

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

![04dcc8f20aa2e54399ffe384e369f9d5.png][]

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

[44ca448df10ba06fddd5f33d3a7c983d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a77b384fcb314141a299ea79b9b874fa.png
[2d2537eba3df0efca3368f11e6cf5244.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a76f5958b1de4142a07dcdfbd4e7054b.png
[a8232e0e02ff6244cb10fda65e02875f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1bd66d034e5f4c2c8e95b8e18a7e9ccb.png
[http_127.0.0.1_5000]: http://127.0.0.1:5000/
[2d65f3a454894b4793d569e0561adfe1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/fb72421fd25740c8b11c8ccaf35b8113.png
[https_www.cpolar.com]: https://www.cpolar.com/
[405a06578afd6988a52aa4bca3e15795.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a5ecaaba1b0d4a13b424e87f5924beb0.png
[2403546d8d5cc2a1c51ce945f5164c3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d70e2d342d104bb7b4d58a74f5139fc5.png
[86b518e8923c1f346edeee75e63a129b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4906a2fcc0b1471d8c0928bfcefec249.png
[1e04bf04c1ccde806baa38436032c2c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b3ab92c58ac64bb8bd85988c8cf94fc1.png
[cpolar]: https://dashboard.cpolar.com/
[af40a1eaff9b1bcf0ef327acb28727e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a4172dfeefb9422d9eecb35aaee0e0f0.png
[f9515d86b8871fa52d052e1e62951481.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/5be11ef0ee4140588d1c168d1f194a9f.png
[618b3ea8d3ca6d779a8c3892f5f07a01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/a010e62750094c489afb6e124da52bfc.png
[f828de157dec11f8261330e6c574ac10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/7a4d180e7a814166a2364bcd85bdbe1c.png
[04dcc8f20aa2e54399ffe384e369f9d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c457865c9d18483c8a1745d56d67a7f6.png