Deploy Dash-Cytoscape app for demo

หลังจากใช้ library dash-cytoscape มาสักพัก เมื่อวานก็มีโอกาสได้ลองไป demo ให้ลูกค้าดูจริงๆ ก็เลยต้องหาทาง deploy ขึ้นไปให้พี่บีมและคุณแป้งสามารถเข้าไปกดเล่นได้

ตามแผนจริงๆ ก็จะ pack code ขึ้นไปเป็น docker container และรันบน ecs แต่ด้วยความรู้ docker ของเราตอนนี้คงไม่สามารถทำเสร็จให้พี่บีม demo พรุ่งนี้ได้ เลยต้องหาทางอื่นที่จะ deploy ได้เร็วที่สุด

ขอบคุณ blog นี้ที่ช่วยชี้ทางสว่าง
https://towardsdatascience.com/the-easiest-way-to-deploy-your-dash-app-for-free-f92c575bb69e

สร้าง simple python web app

1. สมัคร pythonanywhere.com เป็นแบบ Beginner Account (ฟรี)
2. ตรงขวาบนไปที่ tab Web -> Add a new web app
3. Next
4. เลือก Flask (Dash สร้าง on top Flask)
5. เลือก python version
6. Next

เราจะได้หน้าเว็บและ url มาแล้ว เข้าและ share ให้คนอื่นได้จาก url ตรงนี้

ตอนนี้จะเป็นหน้าเว็บของ default Flask อยู่ ต่อไปเราจะเอา app ของเราขึ้นละ

Upload code

1. ด้านขวาบน ไปที่ tab Flies
2. ไปที่ directory mysite จะเจอ flask_app.py เป็น default หน้าเว็บที่เราเห็นเมื่อกี้ ลบทิ้งได้เลย
3. Upload code กรณีนี้คือ app.py และไฟล์ data เป็น csv

4. แก้ path ในการ reference ถึง csv files ใน app.py (กด edit บนเว็บได้เลย)

Install libraries

ในโค้ด app.py ของเรา ต้องใช้ lib ที่ต้องลงเพิ่ม 3 ตัวคือ pandas, dash และ dash-cytoscape เพราะฉะนั้นเราต้องมา pip install กัน

ขวาบนไปที่ tab Consoles เลือก Start Bash console

1. เช็ค version ของ pip และ python ของ console ก่อน pip --version
2. pip install pandas
3. pip install dash
4. dash-cytoscape จะพิเศษหน่อยตรงที่เราอยากจะใช้ layout ‘fcose’ ซึ่งไม่อยู่ใน version ล่าสุดของ dash-cytoscape แต่อยู่ใน code master branch เรียบร้อยแล้ว (ยังไม่ได้ publish) เราเลยจะ install ผ่าน git แทน public pypi
   pip install git+https://github.com/plotly/dash-cytoscape

Config ให้เว็บมาใช้ไฟล์ app.py

1. ขวาบนไปที่ tab Web
2. ตรง section Code เราจะ edit WSGI configuration file

3. ลบ

from flask_app import app as application

เปลี่ยนเป็น

from app import app
application = app.server

from app import app คือหา variable app ในไฟล์ app.py และให้ app.server คือ application ของ web

ใน app.py มี variable app อยู่ ให้ใช้สิ่งนี้เป็น server

Note: ปกติเวลารัน dash บน local จะใช้ app.run_server พอมา deploy เป็น web app จริงก็ไม่ต้องสั่ง run_server แล้ว แค่ส่ง server ให้ไปรัน

Done กราฟขึ้นอย่างสวยงาม

ถ้า Error หรือหน้าเว็บไม่ขึ้น

ไปดูที่ Error Log และ Server Log ที่ tab Web ใต้ section Log files (ต้องใช้ไปหลายสิบรอบอยู่เหมือนกัน)

Reference:

• https://dash.plotly.com/introduction
• https://dash.plotly.com/cytoscape
• https://towardsdatascience.com/the-easiest-way-to-deploy-your-dash-app-for-free-f92c575bb69e