之所以用这种方案,主要是比nodejs express静态服务器还简单,而且打包成exe更方便,node+pkg打包成1个exe文件,不利于更新angular工程,而flask+cx_freeze打包,文件夹结构还在,直接更新angular工程代码就好。
一、支持angular的flask静态服务器
假定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小很多了。