• 用flask静态服务器运行angular


    之所以用这种方案,主要是比nodejs express静态服务器还简单,而且打包成exe更方便,node+pkg打包成1个exe文件,不利于更新angular工程,而flask+cx_freeze打包,文件夹结构还在,直接更新angular工程代码就好。

    一、支持angular的flask静态服务器

    参考 https://stackoverflow.com/questions/54147782/how-to-use-angular-build-assets-inside-python-flask-static

    假定angularbuild之后的dist文件夹(build之后 indexl.html所在的目录)是package.nw,放在flask工程根目录static里

    一个app.py就可以搞定:

    from flask import Flask, render_template
    from flask_cors import CORS
    
    app = Flask(__name__, static_url_path = '',  static_folder= 'static/package.nw', template_folder='static/package.nw')
    app.config['SECRET_KEY'] = 'secret!'
    app.config['JSON_AS_ASCII'] = False
    
    CORS(app, supports_credentials=True)
    
    @app.route('/')
    def index():
        return render_template('index.html')
    
    if __name__ == '__main__':
        print('package.nw静态服务器')
        app.run(host='0.0.0.0', port=5000)

    3个参数,但其实是从2方面配置:

    1  flask从什么文件夹读取静态文件

    2  flask用什么url发布静态文件

    1 static_url_path = '' 必须有。

    这是描述静态文件在url里http://host:port/之后的访问路径。index.html里如何通过url访问到静态文件

    如果没有这句,打开index.html后,会跟着出现请求其他静态js ico文件时 flask报404错误。

    flask默认静态资源都是有前缀的:形如host/static/XXX.js,html模板里也得这么写。  但angular打包的index.html引用时资源,都是没有/static的:比如各个<script>

    <!DOCTYPE html><html lang="en"><head>
      <meta charset="utf-8">
      <title>DiagramProcess</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{margin:0;font-family:Roboto,"Helvetica Neue",sans-serif}</style><link rel="stylesheet" href="styles.7102c3ae8982f88d.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.7102c3ae8982f88d.css"></noscript></head>
    <body>
      <app-root></app-root>
    <script src="runtime.f3dc222631b3db13.js" type="module"></script><script src="polyfills.aa384a5550a3a5bf.js" type="module"></script><script src="main.8b7ecd42023898d2.js" type="module"></script>
    
    </body></html>

    static_folder和template_folder 。

    因为flask的风格是html模板 和静态资源js css 分开的。所以得用 2个参数分别描述;又因为angular的build是把index.html和js assets打包在一起的,所以取值一样。都是static/package.nw

    2 static_folder 是js css这些静态文件实际存储路径。这是为了省事,输入的是相对路径,但仅限于当前工程根目录内部。如果引用位置是当前工程之外,就要输入绝对路径的话,那就要区分打包前和打包后,略过。

    3 template_folder 是描述index.html所在位置。

    二、cx_freeze打包exe,瘦身

    因为只是最简单的静态web服务器(且只是调试开发用),所以可以大幅度精简exe体积

    setup.py

    '''
    python setup.py build
    python setup.py bdist_msi
    
    '''
    
    import sys
    from cx_Freeze import setup, Executable
    import os
    import shutil
    
    import sys
    #base = 'WIN32GUI' if sys.platform == "win32" else None
    #控制台
    base = None
    
    
    # Dependencies are automatically detected, but it might need fine tuning.
    options = {'includes': [], #子模块XX.xxx
                'include_files': ['static', 'README.md'],
                "packages": ['jinja2.ext'], # 'fcntl'手工创建
                "excludes": ['PIL', 'PyQt5', 'matplotlib', 'scipy', 'numba', 'Cython', 'GDAL', 'tkinter', 'pytz', 'numpy', 'zmq', 'tornado', 'greenlet', 'IPython', 'jupyter_client', 'notebook', 'nose', 'OpenSSL', 'distutils', 'test', 'win32com',
                 'asyncio', 'pydoc_data', 'unittest',
                'cryptography', 'pkg_resources', #flask依赖,但这个项目不依赖
                 ],
                "build_exe": '../build/static_server_nw',
                #"build_exe": 'D:/dev/ne/seim-frontend-mobile/client/backend',
                }
    
    
    setup(  name = "静态web服务器测试nw",
            version = "0.1",
            description = "静态web服务器测试nw",
            options = {"build_exe": options},
            executables = [Executable("app.py", base=base)])

    cx_freeze并不能很好处理包依赖,一不留神就把大量根本用不到的包打进来,一个是打包变慢,一个是体积巨大,比如pyqt5,只要出现,直接几百M起。

    手工指定exclude的思路如下:

    1.明显没用到的 如matplotlib, pyqt5

    2 去build\static_server_nw\lib 下自己看文件夹体积,把体积大(几百K以上)的都排除了

    3 然后观察打包过程是否报错,打包后的exe能否运行。缺什么就再添回来

    最后,再去build\static_server_nw\lib 下删除libcrypto-1_1.dll(OpenSSL的,实际不需要),

    最终打包后的体积在20M之下。比之前好几百M小很多了。

  • 相关阅读:
    弹出新窗口
    网页布局之二 二列和三列
    JavaScript prototype
    window和linux开启动顺序
    ASP.net和javascript结合产生乱码的问题
    网页布局之一:XHTML CSS基础知识
    Study Android Chapter 1 Reading
    C++文件的读取
    心智模式
    各种排序算法的稳定性和时间复杂度小结
  • 原文地址:https://www.cnblogs.com/xuanmanstein/p/15838082.html
Copyright © 2020-2023  润新知