如何部署Python Flask并实现远程访问本地搭建web站点【内网穿透】

慈云数据 1年前 (2024-03-15) 技术支持 58 0

文章目录

    • 前言
    • 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的文件,

      
      
          
          Say Hello
          
微信扫一扫加客服

微信扫一扫加客服