Flask Heroku Deploy - นำ Python เว็บขึ้นคลาวด์สำหรับมือใหม่

บทความนี้จะเป็นการสอนใช้งาน Flask ร่วมกับ Heroku เพื่อนำ (Deploy) Python Web ที่สร้างไว้ ขึ้นสู่แพลตฟอร์มยอดนิยมและฟรีอย่าง Heroku โดยจะมาลุยตั้งแต่เริ่มแรก คือการสมัครใช้งาน Heroku ไปจนถึงการเรียนเขียนเว็บด้วย Flask อย่างง่าย ๆ 

จุดประสงค์

1. สมัครใช้งาน Heroku พร้อมมี Account เป็นของตัวเอง
2. สามารถ Deploy Flask แอพไปที่ Heroku ได้
3. เข้าใจและอธิบายเกี่ยวกับ Procfile ได้
4. เข้าใจและใช้งาน Heroku CLI ได้
5. สามารถทดสอบ API เพื่อ GET ข้อมูลบน Postman ในเบื้องต้นได้

Software & Tools

• Python version 3 +
• Flask 
• Heroku (Cloud Platform)
• GitHub (Version Control Systems) 
• Postman

Note: ต้องสมัครหรือมีบัญชี  GitHub เรียบร้อยแล้ว ถ้ายังไม่มี สามารถสมัครได้เลยในลิ้งค์ สมัครใช้งาน GitHub

บทความ Flask แนะนำ

• ใช้งาน Flask ร่วมกับ SQLAlchemy เพื่อเชื่อมต่อฐานข้อมูล SQLite
  
• ประยุกต์ใช้งาน Flask ร่วมกับ Chart.js 
• รวมบทความ Flask ใน Medium ของ stackpython

Heroku คืออะไร ? 

Heroku คือ แพลตฟอร์มที่ให้บริการด้านคลาวด์ ซึ่งจะเป็นรูปแบบ PaaS (Platform as a Service) โดย Heroku เรียกได้ว่าเป็น Cloud Platform เจ้าแรก ๆ กันเลยทีเดียว โดยรองรับหลากหลายภาษา ไม่ว่าจะเป็น Ruby(ภาษาแรกในยุคบุกเบิก) , Python,  PHP,  Java,  Node, Go, Scala  และ Clojure เป็นต้น  ที่สำคัญเลยคือ Heroku เป็นเพียง Cloud ไม่กี่เจ้าที่ฟรี ซึ่งทำให้เราสามารถที่จะทดสอบ Python Web App กันได้เป็นอย่างดี และถ้าเว็บมีทราฟฟิกเยอะ ก็สามารถที่จะสเกลได้อย่างง่ายดาย ปรับให้ยืดหยุ่นตามการใช้งานและทราฟฟิก

สมัครใช้งาน Heroku

ทำการสมัครใช้งาน Heroku ด้วยขั้นตอนง่าย ๆ เพียงแค่ไม่กี่ขั้นตอนดังต่อไปนี้

• Sign up อันดับแรกสุดคือการลงทะเบียนเข้าใช้งาน โดยเข้าไปที่ลิ้งค์ สมัครใช้งาน Heroku จากนั้นทำการกรอกแบบฟอร์มให้ครบทุกช่อง

ลงทะเบียน

จากนั้น Heroku จะทำการส่งลิ้งค์ให้เราเพื่อ Activate Account ใน E-mail ทำการ Activate ให้เรียบร้อย

ยืนยันการสมัครใน E-mail

• Set Password เสร็จแล้วทำการกำหนดรหัสผ่านที่ต้องการ โดยจะต้องไม่ต่ำกว่า 8 ตัวอักษร

กำหนดรหัสผ่าน

• Log In จากนั้นจะเข้าสู่หน้าล็อกอิน ก็ทำการล็อกอินให้เรียบร้อย

จะเข้าสู่หน้าเว็บของ Heroku ให้ทำการกด Accept

กดยอมรับเงื่อนไขการใช้งาน

ให้ทำการเลือกแบบ Personal โดยคลิ๊ก  Create new app  ได้เลย  

Create new app

ทำการตั้งชื่อแอพ โดยในบทความนี้ใช้ชื่อว่า  stackpython-flask-heroku  ส่วน location นั้นเลือก   United States 

Create heroku app

จะเสร็จขั้นตอนการสมัครใช้งาน Heroku และตั้งค่าแอพในเบื้องต้น

สร้าง Python App (Flask)

ขั้นตอนต่อมาจะเป็นการสร้าง Flask App แบบง่าย ๆ  แสดงผลข้อความง่าย ๆ และมีการทำ API แบบ GET บ้างเล็กน้อย โดยจะไม่ได้เน้นที่ Flask สำหรับบทความนี้ จะเน้นการ Deploy เป็นหลัก

บทความแนะนำสำหรับ Flask

• ทำ API ด้วยไพธอนง่ายนิดเดียว ทีเหลือยากหมด 
• Flask Ep.1 เริ่มเรียน Flask Framework พร้อมทั้งเริ่มต้นสร้างโปรเจคท์

ติดตั้ง Flask

(venv) pip install flask

ทำการอิมพอร์ต   Flask  และ   jsonify   

from flask import Flask, jsonify

ในแอพนี้จะมี 2 ฟังก์ชันคือ 

•  hello()    แสดงผลคำว่า Hello Flask-Heroku
•  get_api()    สร้าง API แบบ   GET  คือมีการดึงข้อมูลมาแสดงผลเพียงเท่านั้น ไม่มีการทำอะไรให้รีซอร์ส (ข้อมูล) เกิดการเปลี่ยนแปลง

ส่วน   data  คือข้อมูลที่ทดสอบสร้างขึ้นมาอย่างง่าย ๆ ซึ่งจะเก็บในรูปแบบของ list ซึ่งมี dict ซ้อนอยู่ข้างใน

จากนั้นเรียกใช้ฟังก์ชัน   jsonify(data)  เพื่อทำการ Serialize หรือแปลงข้อมูลที่เก็บอยู่ในตัวแปร  data  ที่เป็น Python Data Type และ response แบบ  ออกไปให้เป็นในรูปแบบของ JSON ฟอร์แมต  ซึ่งเป็นรูปแบบมาตรฐานในการแลกเปลี่ยนข้อมูลที่ได้รับความนิยมสูงสุด อีกทั้งฟังก์ชันเดียว ครบจบ ไม่ต้องทำการกำหนด headers ต่าง ๆ ฟังก์ชันนี้รีเทิร์น  application/json   mimitype ต่าง ๆ ให้เรียบร้อยเสร็จสรรพ 

app.py

from flask import Flask, jsonify

app = Flask(__name__)

data = [
        {
            "id": 1,
            "library": "Pandas",
            "language": "Python"
        },
        {
            "id": 2,
            "library": "requests",
            "language": "Python"
        },
        {
            "id": 3,
            "library": "NumPy",
            "language": "Python"
        }
    ]

@app.route('/')
def hello():
    return "Hello Flask-Heroku"


@app.route('/api', methods=['GET'])
def get_api():
    return jsonify(data)

if __name__ == "__main__":
    app.run(debug=False)

สร้างไฟล์ requirements.txt 

requirements.txt เป็น text file ที่ใช้สำหรับบอกว่า ตัวโปรเจคท์ของเรานั้นใช้เฟรมเวิร์ค แพ็คเกจ หรือไลบรารี่ เวอร์ชั่นไหนบ้างในการรันโปรเจคท์ โดยไฟล์นี้จะอยู่ที่ root directory

ทำการเรียกใช้งานคำสั่ง

$ pip freeze > requirements.txt

จะได้ไฟล์  requirements.txt  พร้อมแพ็คเกจและไลบรารี่ต่าง ๆ ในไฟล์ดังนี้

requirements.txt

click==7.1.2
Flask==1.1.2
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==1.1.1
Werkzeug==1.0.1
gunicorn==20.0.4

Procfile 

Procfile คืออะไร ? หลาย ๆ คนอาจจะสงสัยว่ามันคืออะไรสำหรับไฟล์นี้  ซึ่งจริงแล้ว Procfile ก็คือไฟล์ที่เราสามารถกำหนด command ต่าง ๆ เพื่อให้แอพของเรารัน โดย Procfile จะไม่มีนามสกุลหรือ extention ใด ๆ เช่น Procfile.txt แบบนี้คือไม่ใช่ โดยสามารถกำหนดเป็น  Procfile  ได้แบบตรง ๆ และไฟล์นี้ก็จะอยู่ใน root directory ของโปรเจคท์เราครับ

ทำการสร้าง Procfile ขึ้นมาดังนี้

web: gunicorn app:app

โดย

•     web  คือ web server ที่จะใช้สำหรับรันโปรเจคท์สำหรับ Heroku ในเบื้องต้นจะใช้ Gunicorn (Green Unicorn) ซึ่งเป็น WSGI (Web Server Gateway Interface) ของภาษาไพธอนที่ได้รับความนิยมสูงสุด
•     app  คือ แอพของเรานั่นเอง โดยตั้งชื่อให้เหมือนกันกับชื่อไฟล์ โดยไฟล์ไพธอนของ Flask ตั้งชื่อว่า   app.py   แต่เราจะใช้แค่  app   โดยวิธีการมองให้มองในรูปแบบของตัวแปร คือตัวแรกจะเป็นตัวแปร ส่วนตัวที่สองจะเป็นค่าของตัวแปร ทำนองนี้
  

.gitignore

.gitignore คือไฟล์ที่เราใช้บอก Git ว่าห้ามนำโฟลเดอร์หรือไฟล์บางไฟล์ในโปรเจคท์ไปที่ Git Repository ซึ่งก็ค่อนข้างสื่อความหมายและตรงตัวกับชื่อ ignore ถ้าแปลเป็นไทยก็ได้ความหมายว่า "เพิกเฉย" โดยทำการสร้างไฟล์นี้ขึ้นมาได้เลยพร้อมทำการเพิ่มไฟล์ 2 ไฟล์ เข้าไปในไฟล์นี้ คือ   venv/   และ   __pycache__/  โดย 2 โฟลเดอร์นี้เราจะไม่นำขึ้น GitHub นั่นเองครับ

.gitignore

venv/
__pycache__/

สร้าง Git New Repository

ทำการสร้าง Repository หรือที่เก็บไฟล์ต่าง ๆ ของโปรเจคท์ของเราขึ้นมาใหม่ใน GitHub

สร้าง New repository

ตั้งชื่อ Repo (Repository) และกำหนดค่าต่าง ๆ ดังนี้ 

• ชื่อ repository คือ   flask-heroku 
• จากนั้นคลิ๊ก   Create Repository ได้เลย

Create repository

(venv) git init
(venv) git add .
(venv) git commit -m "Add flask-Heroku project to GitHub remote"
(venv) git remote add origin https://github.com/stackpython/flask-heroku.git
(venv) git push -u origin master

ไฟล์โปรเจคท์ต่าง ๆ บน GitHub

โปรเจคท์นี้ใชั PyCharm เป็น IDE ในการเขียนโปรแกรม

Heroku CLI (Command Line Interface)

Heroku CLI (Heroku Command Line Interface) จะช่วยให้เราสามารถจัดการ Heroku แอพได้อย่างสะดวก รวดเร็วและง่ายดาย ผ่านทาง Terminal หรือ Shell ให้ทำการดาวน์โหลด Heroku CLI ตามระบบปฏิบัติการที่ใช้งานได้เลยครับ ไม่ว่าจะเป็น macOS, Windows, Linux (Ubuntu) โดยในบทความนี้ใช้ Windows

ดาวน์โหลด Heroku CLI

Login ผ่าน Terminal

พิมพ์คำสั่งเพื่อล็อกอิน โดยใช้คำสั่ง   heroku login 

(venv) heroku login

จะได้หน้า UI แสดงผลขึ้นมาให้ล็อกอิน แล้วทำการกด Log In ได้เลย

คลิ๊ก Log In ได้เลย

ล็อกอินสำเร็จ

Logging in... done
Logged in as [email protected]

จากนั้นรันคำสั่งดังต่อไปนี้ โดย  heroku git:remote -a  ตามด้วยชื่อแอพที่ได้สร้างไว้ใน Heroku  stackpython-flask-heroku   

(venv) heroku git:remote -a stackpython-flask-heroku

จะได้

»   Warning: heroku update available from 7.42.6 to 7.47.6.
set git remote heroku to https://git.heroku.com/stackpython-flask-heroku.git

git push heroku master - ส่งเว็บขึ้น Heroku 

รันคำสั่งสุดท้าย เพื่อส่งเว็บของเราขึ้นไปบน Heroku เซิร์ฟเวอร์ด้วยคำสั่ง  git push heroku master   

(venv) git push heroku master

จะได้

Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (13/13), done.
Writing objects: 100% (16/16), 2.12 KiB | 722.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Python app detected
remote: -----> Installing python-3.6.12
remote: -----> Installing pip 20.1.1, setuptools 47.1.1 and wheel 0.34.2
remote: -----> Installing SQLite3
remote: -----> Installing requirements with pip
remote:        Collecting click==7.1.2
remote:          Downloading click-7.1.2-py2.py3-none-any.whl (82 kB)
remote:        Collecting Flask==1.1.2
remote:          Downloading Flask-1.1.2-py2.py3-none-any.whl (94 kB)
remote:        Collecting itsdangerous==1.1.0
remote:          Downloading itsdangerous-1.1.0-py2.py3-none-any.whl (16 kB)
remote:        Collecting Jinja2==2.11.2
remote:          Downloading Jinja2-2.11.2-py2.py3-none-any.whl (125 kB)
remote:        Collecting MarkupSafe==1.1.1
remote:          Downloading MarkupSafe-1.1.1-cp36-cp36m-manylinux1_x86_64.whl (27 kB)
remote:        Collecting Werkzeug==1.0.1
remote:          Downloading Werkzeug-1.0.1-py2.py3-none-any.whl (298 kB)
remote:        Installing collected packages: click, MarkupSafe, Jinja2, itsdangerous, Werkzeug, Flask
remote:        Successfully installed Flask-1.1.2 Jinja2-2.11.2 MarkupSafe-1.1.1 Werkzeug-1.0.1 click-7.1.2 itsdangerous-1.1.0
remote: -----> Discovering process types
remote:        Procfile declares types -> (none)
remote:
remote: -----> Compressing...
remote:        Done: 45.1M
remote: -----> Launching...
remote:        Released v3
remote:        https://stackpython-flask-heroku.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/stackpython-flask-heroku.git
 * [new branch]      master -> master

ซึ่งสามารถเข้าดูหน้าเว็บได้ในลิ้งค์

https://stackpython-flask-heroku.herokuapp.com/

stackpython-flask-heroku.herokuapp.com



จะได้หน้าเว็บแบบ simple สุด ๆ ดังภาพด้านล่าง

ในบทความนี้เป็นการ Deploy หน้าเว็บที่สุดแสนธรรมดา แสดงผลแค่ Hello Flask-Heroku แต่สามารถใช้คอนเซ็ปต์เดียวกันในการ Deploy หน้าเว็บที่ซับซ้อนขึ้นและมีหลายหน้าได้เช่นเดียวกัน

คอร์สเรียน Flask ที่แนะนำ (จัดเต็ม)

• Python Web Development with Flask - STACKPYTHON

ทดสอบใช้งาน API บน Postman

ใช้ Postman Desktop เพื่อทดสอบดึงข้อมูลจาก API แบบ  GET  ที่ได้สร้างไว้ใน Flask App  ใน  route  ของ API คือ   /api 

[
    {
        "id": 1,
        "language": "Python",
        "library": "Pandas"
    },
    {
        "id": 2,
        "language": "Python",
        "library": "requests"
    },
    {
        "id": 3,
        "language": "Python",
        "library": "NumPy"
    },
    {
        "id": 4,
        "language": "Python",
        "library": "TensorFlow"
    }
]

Mission complete...  ถึงตอนนี้หวังว่าทุกคนที่อ่านบทความนี้จบจะสามารถนำแนวคิดหรือขั้นตอนวิธีการเหล่านี้ เพื่อนำไปใช้ deploy เว็บของเราในเบื้องต้นกันแล้วนะครับ ซึ่งขั้นตอนการ deploy เว็บนั้น ไม่ได้มีเพียงเท่านี้ ยังมีในระดับที่ซับซ้อนขึ้นไปอีก ตามแต่ละสเกล แต่ละระดับของเว็บนั้น ๆ แต่ก็เชื่อว่า สำหรับผู้ที่เริ่มต้น บทความนี้คงเป็นเหมือนเทียนไข ที่ช่วยส่องทางให้นะครับ :) 

ถ้าชอบก็ช่วยกดไลก์ แชร์ หรือมีข้อแนะนำ อยากแสดงความคิดเห็นก็คอมเมนต์เข้ามาได้เลยนะครับ พบกันกับบทความถัดไปครับ 

Follow us on

Medium: STACKPYTHON

Youtube: STACKPYTHON

| Like | Comment | Share | >> STACKPYTHON 

>> 📒Python WebDevelopment with Flask (Course) 

References 

[ Heroku ] - Getting started on  Heroku with Python

[ Heroku ] - Procfile

[ Stackabuse ] - Deploy a Flask Application to Heroku

[ Flask ] - jsonify