使用 App Engine 和 Flask 提供常见静态文件

Question

我正在编写一个带有 2 个蓝图（身份验证和业务）的服务，每个蓝图都位于自己的包中，我需要在蓝图中共享一些图像、脚本和样式。

将

flash.js

和

favicon.png

放入根静态文件夹中的相应文件夹（样式、图像或脚本）时，部署到 GCP 时不会获取，而在本地运行应用程序时，文件将被路由正确地。

部署到 GAE 时，跨蓝图共享公共静态文件的适当方法是什么？

蓝图定义如下：

auth_bp = Blueprint(
    'auth',
    __name__,
    template_folder='templates',
    static_folder='static',
    static_url_path='/auth/static/'
)
business_bp = Blueprint(
    'business',
    __name__,
    template_folder='templates',
    static_folder='static',
    static_url_path='/business/static/'
)

封装结构：

├── app
│   ├── __init__.py
│   ├── auth
│   │   ├── __init__.py
│   │   ├── blueprint.py
│   │   ├── constants.py
│   │   ├── forms.py
│   │   ├── static
│   │   │   ├── images
│   │   │   │   └── favicon.png
│   │   │   ├── scripts
│   │   │   │   ├── captcha.js
│   │   │   │   ├── login.js
│   │   │   │   └── reset-password.js
│   │   │   └── styles
│   │   │       └── main.css
│   │   ├── templates
│   │   │   ├── base-auth.html
│   │   │   ├── login.html
│   │   │   ├── reset-password.html
│   │   │   └── reset-request.html
│   │   └── utilities.py
│   ├── business
│   │   ├── __init__.py
│   │   ├── blueprint.py
│   │   ├── static
│   │   └── templates
│   ├── classes
│   │   ├── __init__.py
│   │   └── system_user.py
│   ├── config.py
│   ├── static
│   │   ├── images
│   │   ├── scripts
│   │   │   └── flash.js
│   │   └── styles
│   ├── templates
│   │   └── _macros.html
│   └── utilities
│       ├── __init__.py
│       └── utilities.py
├── app.yaml
├── deployer.sh
├── main.py
└── requirements.txt

app.yaml：

runtime: python311
default_expiration: "2h"

handlers:
  - url: /static
    static_dir: static
  - url: /.*
    script: auto
    secure: always

这将是我想如何使用共享文件的示例：

<head>
  ...
  <link rel="apple-touch-icon" href="{{ url_for('static', filename = 'images/favicon.png') }}" />
  <link rel="icon" sizes="192x192" href="{{ url_for('static', filename = 'images/favicon.png') }}" type="image/png" />
  <script src="{{ url_for('auth.static', filename = 'scripts/captcha.js') }}" defer></script>
  <script src="{{ url_for('static', filename = 'scripts/flash.js') }}" defer></script>
  ...
</head>

favicon.png

我想在整个应用程序中使用它，以及

flash.js

，而

captcha.js

，我只想在

auth

蓝图上使用它。

在本地，此设置工作正常，但当我部署到 GAE 时，它不再按预期工作（shared静态文件返回 404 并且未创建端点），所以我的猜测是我的

app.yaml

需要微调，但找不到资源来引导我走向正确的方向。

更新我

我从

static

中删除了

app.yaml

声明，至少脚本

flash.js

在部署时按预期工作。

但是，我测试了

auth

蓝图和

current_app

static_folder

和

static_url_path

在部署时在

static

文件上使用和不使用

app.yaml

声明，并且在两种情况下都是相同的，但是当部署时资源丢失声明位于 de yaml 文件中。

在这两种情况下，Chrome 中开发者控制台上的

auth/static

下仅提供

sources

。

app.yaml

带有

static

声明

app.yaml

没有

static

声明

要继续，请删除文件并将它们托管在存储桶上。

更新二

检查渲染网页中的源时，

url_for

创建的路径对于脚本来说似乎是正确的

static/scripts/flash.js

，对于图像来说

static/images/favicon.png

似乎是正确的，但是找不到favicon（404），而脚本仅在以下情况下可用我从

static

中删除了

app.yaml

声明。

Answer 1

我创建了一个虚拟项目来尝试重现您的问题。

下面是项目文件夹结构（项目名为
```
common_static_files
```
，我有 2 个子应用程序，分别称为
```
app_1
```
和
```
app_2
```

app_1

中的蓝图定义

app_1_handlers = Blueprint("app_1_handlers", __name__, 
    template_folder="templates",
    static_folder='static',
    static_url_path='/app_1/static/')

app.yaml

文件的内容

# This handles static files under the app_2 folder
- url: /app_2/static
  static_dir: common_static_files/app_2/static

# This handles static files under the app_1 folder
- url: /app_1/static
  static_dir: common_static_files/app_1/static

# This handles static files in the common static folder (in the root of the project)
- url: /static
  static_dir: common_static_files/static/

app_1.htm

文件夹

中templates文件夹下

app_1

的内容

注意如何将包名称用于app_1的静态处理程序


<head>
    <link href="{{ url_for('app_1_handlers.static', filename = 'css/app_1.css') }}" rel="stylesheet">
</head>

<body >

    <div style="font-size: 3em; margin-top: 20px;">{{message}} </div>
    <div style="margin-top:20px;">
        <img src="{{ url_for('static', filename = 'images/question.png') }}" />
    </div>

</body>

页面加载时的输出

a) 黑色背景和白色文本颜色的 css 文件位于
```
app_1 > static > css > app_1.css
```
下
b）图像（stackoverflow问题的屏幕截图）位于公共静态文件夹中

使用 App Engine 和 Flask 提供常见静态文件

问题描述投票：0回答：1

1个回答

最新问题

使用 App Engine 和 Flask 提供常见静态文件

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1