Deploy Web App to Heroku "เริ่ม Deploy App"

ในการทดสอบในครั้งนี้ผมได้ใช้ Wordbank App ในการ Deploy น่ะครับสามารถดูได้ที่

 https://bitbucket.org/staticsuriya/assignment-wordbank

หรือ

 $ git clone https://staticsuriya@bitbucket.org/staticsuriya/assignment-wordbank.git

เข้าไปใน Directory ที่เราต้องการ Deploy ในที่นี้คือ assignment-wordbank น่ะครับ

จากนั้นให้สร้าง virtual environment สำหรับ project

$ virtualenv venv

สร้างเสร็จจะมี folder ชื่อ venv ขึ้นมาใหม่

จากนั้นก็ทำการ activate virtualenv ให้ทำงาน

$ source venv/bin/activate

ถ้าไม่มีปัญหาจะมี (venv) อยู่ข้างหน้าหมายถึง virtualenv activate แล้ว (ถ้าปิดเปิด terminal ใหม่แล้วต้องการมาทำ project ต้อง activate ใหม่ทุกครั้ง) ตั้งแต่ step นี้ไปจะต้อง activate เอาไว้

สร้างไฟล์ requirements.txt เพื่อบอกให้ heroku รู้ว่า project ของเราต้องลงโปรแกรมอะไรบ้างในการจะ run project ในที่นี้ผมใช้

          dj-database-url==0.4.0
          Django==1.9.2
          gunicorn==19.4.5
          psycopg2==2.6.1
          whitenoise==2.0.6
          pdfkit==0.5.0
          Pillow==2.7.0

สร้างไฟล์ Procfile ขึ้นมา(ไม่มีนามสกุล) เพื่อเป็นการบอกให้ heroku รู้ว่าจะต้องรัน app ตัวไหน

ภายในให้เขียนตามนี้ เพื่อบอกให้ run wsgi ของ project " web: gunicorn ชื่อของproject.wsgi --log-file - " ในที่นี้ project ชื่อ assignment_one ก็จะต้องใส่เป็น
web: gunicorn assignment_one.wsgi --log-file - น่ะครับ

ให้ virtuallenv ทำการ ติดตั้งไฟล์ทั้งหมดที่จะเป็นในการรัน จาก list โปรแกรมใน requirements.txt (เพื่อจะนำมาลอง run แบบ local ในเครื่องก่อน deploy ) ครับ

$ sudo pip3 install -r requirements.txt

แต่จะมีปัญหากับ app psycopg2 เพราะ จะต้องทำการลง code python เสริมก่อนด้วยคำสั่ง

$ sudo apt-get install libpq-dev && sudo apt-get install python3-dev

แล้วลอง run ใหม่ ก็จะ install ผ่านไม่ติดตัวแดง

$ sudo pip3 install -r requirements.txt

เริ่มทดลอง run code จริง แบบ local ก่อน จะ deploy ลง heroku เพื่อทดสอบการทำงานครั้งสุดท้าย
```
$ heroku local web
```

แล้วลอง เข้า browser localhost:5000 (heroku จะใช้ port 5000 เป็นส่วนใหญ่) วิธีปิด heroku local web ให้กด ctrl+c

สามารถทำงานได้ตาม ปกติเเต่ไม่สามารถที่จะเเสดง CSS ได้

วิธีการที่จะทำให้สามารถที่จะโหลด css ได้นั้นให้เข้าไปใน directory ของ project เปิดไฟล์ setting.py แล้วเพิ่ม code ตามนี้

import dj_database_url
# ไว้ด้านบนของไฟล์

PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/

STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
# Extra places for collectstatic to find static files.

STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, 'static'),
)
# Simplified static file serving.
# https://warehouse.python.org/project/whitenoise/

STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
# ไว้ด้านล่างสุดของไฟล์ เดิมๆจะมี static_url ='/static/' อยู่แล้วให้ ลบตัวเก่าไป แล้วcode ด้านบนใส่ลงให้หมด

ใน directory เดิม ให้สร้าง folder static ขึ้นมา และมีสร้างไฟล์อะไรก็ได้สักอันขึ้นมา เพราะ git จะไม่สนใจ folder เปล่าเวลา add

ในตัวอย่างนี้สร้างไฟล์ ชื่อ human.txt เอาไว้ ข้างในไม่ต้องพิมพ์อะไร เมื่อทำเสร็จทั้งหมดให้พิมพ์คำสั่ง (อย่าลืมว่าต้อง activate virtual venv ไว้ตลอด)

$ python manage.py collectstatic

ตอบ ' yes '

คำสั่งนี้จะจัดการเอาไฟล์ static ทั้งหมดทุก app ที่เรามีรวมถึงรูปด้วยมาเก็บไว้ ใน folder ชื่อ staticfiles อยู่ใน folder projectหลังจากนั้นเปิด wsgi.py ไฟล์ ที่อยู่ใน folder project
แล้วเพิ่ม code ด้านล่าง

from whitenoise.django import DjangoWhiteNoise

application = DjangoWhiteNoise(application)

ส่วนนี้คือให้โปรแกรม whitenoise จัดการ serve static file ให้กับ project ของเราไปแสดงผล เสร็จทั้งหมดนี้ก็ทดลองรัน heroku แบบ local

$ heroku local web

ก็จะเห็นได้ว่าสามารถที่จะโหลด CSS ได้เเล้ว ^^

เริ่มเอา app ไป deploy จริง ต้อง commit git ก่อน deploy แต่เพื่อป้องกันไฟล์ที่ไม่เกี่ยวข้องให้เเก้ไขไฟล์ .gitignore ก่อน เข้าไปใน project ย้อนกับมาในหน้าที่มี manage.py