Руководство по доставке ваших веб-приложений Flutter из любой серверной среды.
На каждом вашем неверном шаге будут охотиться жуки, так что не игнорируйте литературу.
Обслуживание веб-приложений Flutter на частных серверах требует некоторых усилий. Проблема в том, что когда вы запускаете популярный файл index.html веб-сборки на флаттере, флаттер отображает ваш пользовательский интерфейс, запуская код в файлах main.dart.js и flutter_service_worker.js — эти файлы находятся где-то в вашем файловом дереве.
Flutter также требует данных из других файлов активов (изображений, шрифтов, манифестов и т. д.) для правильной визуализации вашего приложения, и они находятся где-то еще в дереве файлов. Задача состоит в том, чтобы предоставлять эти файлы Flutter всякий раз, когда они запрашиваются по HTTP в процессе рендеринга Flutter.
Только что указанная причина заключается в том, что обычно ничего не происходит, когда вы запускаете файл index.html веб-сборки Flutter в браузере — нет API для обслуживания необходимых файлов.
Теперь мы будем создавать проект Flask, который обслуживает веб-приложение Flutter с необходимыми файлами по мере их запроса Flutter.
В этой статье предполагается, что вы знакомы с веб-приложениями Flask и Flutter. Вы должны быть в состоянии следовать, даже если вы только немного знакомы.
Мы будем следовать этим 4 шагам.
- Создайте веб-приложение Flutter.
- Измените файлы сборки для Flask API.
- Создайте и настройте приложение Flask.
- Код REST API для обслуживания приложений Flutter.
В любом случае убедитесь, что ваше приложение Flask соответствует требованиям шагов 2 и 4.
1. Создание веб-приложения Flutter
Не стесняйтесь пропустить этот шаг, если вы можете создать и найти файлы веб-сборки Flutter.
Мой любимый редактор — блестящая студия Android. Конечно, вы также можете использовать VSCode. Мы создадим приложение Flutter, поэтому создайте его и назовите flask_ui_app (или как хотите — вы знаете, как это делается). Не забудьте включить веб-поддержку, если используете андроид-студию.
Если вы создаете проект без веб-поддержки, вы можете добавить его через терминал, введя следующую команду.
> flutter create .Где каталог терминала установлен в корень вашего текущего проекта Flutter.
Теперь вы должны увидеть веб-папку в дереве проекта.
Теперь запустите веб-приложение Flutter, чтобы убедиться, что оно безопасно загружает приложение счетчика по умолчанию.
И теперь мы можем приступить к сборке наших файлов релиза.
Установив корневую папку командного терминала в папку текущего проекта Flutter, создайте веб-приложение, введя следующую команду.
> flutter build web --release -v
После сборки вы можете найти файлы веб-релиза в папке path[project_root]/build/web/. Нам понадобятся все файлы в этой папке.
2. Изменить файлы сборки для Flask
Как указал @sbilkoloft, этот шаг можно пропустить, просто создав приложение для флаттера (шаг 1) с помощью следующей команды терминала.
> flutter build web --release --base-href=/web/
Для этого шага требуется только изменить файл index.html в папке веб-сборки, заменив строку:
<base href="/">
с
<base href="/web/">
Вскоре вы увидите, что «сеть» можно заменить другим термином, например «приложением», если они соответствуют маршрутам API.
3. Создайте и настройте приложение Flask.
Если вы уже работаете с приложением Flask или знаете, как создать простое приложение Flask, вы можете открыть свой проект Flask и пропустить этот шаг.
Здесь мы можем просто сгенерировать приложение Flask, используя pip. Чтобы выполнить этот шаг, в вашей системе должны быть установлены Python, pip и virtualenv. Вы можете следовать этим руководствам, если они у вас не установлены.
- Установка Python руководство.
- Установка пипа руководство.
- Установка Virtualenv руководство.
Теперь создайте пустую папку проекта и дайте ей имя — у меня flask_flutter_app. Перейдите в каталог папки в командном терминале.
> cd [path to new project]
Во-первых, мы создадим в этой папке виртуальную среду, как это рекомендуется для проектов Python. Вы можете сделать это, выполнив следующую команду в окне командного терминала.
> python -m venv env
Затем мы активируем виртуальную среду Python, выполнив следующую команду в терминале для пользователей Linux/mac.
> source env/bin/activate
Если в системе Windows, вам придется запустить это вместо этого.
> .\env\Scripts\activate
Окно вашего терминала теперь должно указывать, что ваша виртуальная среда активна.
(env)>
Далее мы установим Flask в виртуальной среде, выполнив следующую команду.
(env)> pip install flask
К кодированию. Мы будем использовать файл Python с именем app.py, поэтому создайте его в корневой папке проекта, откройте этот файл в своем любимом редакторе кода и вставьте следующий код установки.
from flask import Flask
app = Flask(__name__)
@app.route('/')
def say_hello():
return ('Hello world')
if __name__ == '__main__':
app.run()
Фрагмент кода должен выглядеть знакомо, и это действительно очень простое приложение Flask.
Мы можем протестировать приложение, выполнив следующую команду в терминале.
> flask run
На этом этапе результат должен содержать что-то вроде этого.
* Debug mode: off * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
И если при запуске URL-адреса http://127.0.0.1:5000/ в вашем браузере отображается текст «привет, мир», значит, все готово.
4. Код REST API для обслуживания приложений Flutter
Теперь начинается самое интересное. Первое, что нужно сделать, это скопировать все файлы из каталога веб-сборки Flutter с шага 1 в новый каталог, который мы назовем «templates». Теперь дерево файлов вашего проекта Flask должно выглядеть так:
Flask уделяет особое внимание файлам в каталоге templates. Этот каталог будет искать Flask, когда API запрашивает веб-страницу из приложения Flask, используя встроенный метод Flask render_template.
Однако каталог шаблонов по умолчанию можно изменить при создании экземпляра приложения Flask, как показано в следующем фрагменте кода.
# Optional - not for this step app = Flask(__name__, template_folder='web')
Все, что нам теперь нужно сделать, это написать функции API, которые будут возвращать файлы документов в папку веб-сборки Flutter, используя встроенный метод Flask send_from_directory.
Сначала добавьте следующие операторы импорта в начало файла app.py.
from flask import Flask from flask import send_from_directory from flask import render_template
Затем скопируйте и вставьте этот код в свое приложение Flask.
Вы заметите, что функция render_page_web подключена к маршруту web, поэтому при следующем запуске приложения Flask вы сможете запустить приложение Flutter с URL-адреса [local_host]/web.
Я сделал еще один простой шаг в своем приложении и заменил домашний маршрут тем же кодом рендеринга — теперь приложение Flutter является домашней страницей моего приложения Flask.
@app.route('/')
def render_page():
return render_template('/index.html')
Если вы запустите приложение Flask на этом этапе, вы увидите документы, запрошенные Flutter после запуска страницы index.html с использованием URL-адреса [local_host]/web и шаблона URL-адреса для этих запросов.
Вы заметите, что путь к запрошенным файлам в каталоге шаблонов встроен в URL-адрес запроса. Следовательно, функция return_flutter_doc извлекает путь к запрошенным файлам из URL-адреса запроса и обслуживает файлы из папки templates по протоколу HTTP.
Найдите весь код в этом репозитории GitHub.
Если вы понимаете логику, вы сможете удобно обслуживать свои веб-приложения Flutter с любой знакомой вам серверной структурой.
