用flask静态服务器运行angular

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

参考 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 ><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小很多了。