Как развернуть Dash приложение на хостинге
По умолчанию Dash запускает свой веб-сервер на localhost - то есть на вашем компьютере локально. Для того, что бы ваше приложение могли использовать другие люди, Dash приложение нужно установить на хостинг, а чтобы оно заработало, нужно обеспечить взаимодействие Dash приложения с веб-сервером через WSGI.
Dash состоит из клиентской части, написанной на react.js и работающей в браузере и серверной части, которая написана на Python и работает на веб-сервере. Это дает нам возможность подгрузки данных динамически, что позволяет многостраничному приложению работать в одном окне без перезагрузки всей страницы. Для того, что бы установить Dash на наш хостинг необходимо сделать следующие шаги:
1. При создании нового сайта укажите его имя и в конфигурации выберите “Python WSGI” + нужный тип базы данных:
2. Подключаемся к хостингу через Терминал, после создания сайта
3. Установка Dash
3.1) В консоли устанавливаем dash со всеми зависимостями командой pip install dash
3.2) Заходим в файл-менеджер, cоздаем файлы app.py и index.py:
import dash
app = dash.Dash(
__name__,
url_base_pathname='/',
suppress_callback_exceptions=True
)
server = app.server
index.py используется для запуска приложений, поэтому нужно прописать после from app import app строку server = app.server
import dash
from dash import dcc, html, Input, Output
from app import app
from apps import app1, app2
server = app.server # Если не добавить эту строку, то не заработает.
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname in ['/', '/apps/app1']:
return app1.layout
elif pathname == '/apps/app2':
return app2.layout
else:
return '404'
if __name__ == '__main__':
app.run_server(debug=True)
3.3) Создаем дирректорию apps и в ней располагаем наши приложения app1.py и app2.py:
from dash import dcc, html, Input, Output
from app import app
layout = html.Div([
html.H3('App 1'),
dcc.Dropdown(
id='app-1-dropdown',
options=[
{'label': 'App 1 - {}'.format(i), 'value': i} for i in [
'NYC', 'MTL', 'LA'
]
]
),
html.Div(id='app-1-display-value'),
dcc.Link('Go to App 2', href='/apps/app2')
])
@app.callback(
Output('app-1-display-value', 'children'),
[Input('app-1-dropdown', 'value')])
def display_value(value):
return 'You have selected "{}"'.format(value)
from dash import dcc, html, Input, Output
from app import app
layout = html.Div([
html.H3('App 2'),
dcc.Dropdown(
id='app-2-dropdown',
options=[
{'label': 'App 2 - {}'.format(i), 'value': i} for i in [
'MSK', 'SPB', 'EKB'
]
]
),
html.Div(id='app-2-display-value'),
dcc.Link('Go to App 1', href='/apps/app1')
])
@app.callback(
Output('app-2-display-value', 'children'),
[Input('app-2-dropdown', 'value')])
def display_value(value):
return 'You have selected "{}"'.format(value)
В итоге у нас должна получится файловая структура:
- app.py
- index.py
- apps
|-- __init__.py
|-- app1.py
|-- app2.py
4. Завершение установки
Откройте раздел “Python WSGI” на странице сайта в личном кабинете.
В переменной APP_PATH удалите строку wsgi.py и замените её на index.py.
В переменной APPLICATION замените application на server.
server - имя той самой переменной из index.py, которое мы прописали ранее.
В результате должны получится следующие настройки
Перезапустите процесс Python, для этого нажмите сверху на кнопку “Перезапустить Python WSGI”
И все готово
Нам доверяют тысячи компаний и разработчиков
