STACKPYTHON

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

บทความนี้จะมาสอนใช้งานการ deploy Python web ไปที่ Heroku กันครับ โดยเริ่มตั้งแต่ต้นกันเลย เข้าใจง่าย มือใหม่ก็ทำได้สบายครับ

โดย Sonnyอัปเดต 24 เมษายน 2564
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

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

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

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 ด้วยขั้นตอนง่าย ๆ เพียงแค่ไม่กี่ขั้นตอนดังต่อไปนี้

ลงทะเบียน

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

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

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

จะเข้าสู่หน้าเว็บของ 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

ติดตั้ง Flask

(venv) pip install flask

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

from flask import Flask, jsonify

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

ส่วน 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

โดย

.gitignore

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

.gitignore

venv/
__pycache__/

สร้าง Git New Repository

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

สร้าง New repository

ตั้งชื่อ Repo (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 stackpython2019@gmail.com

จากนั้นรันคำสั่งดังต่อไปนี้ โดย 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 ที่แนะนำ (จัดเต็ม)

ทดสอบใช้งาน 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

https://www.youtube.com/c/stackpython/videos

| 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