IvanKao的部落格

Python Django 學習紀錄(九) 部屬網站到 Heroku

架設好自己的網站後

就是要部屬到網路上，讓其他人也能夠看到我的架設的網站

Heroku 有提供免費的方案，最適合一般使用者利用

一、部屬網站的環境建置 

分為三個部分：

1. 建立 Heroku 應用程式
2. 安裝 Heroku CLI
3. 建置空白虛擬環境與安裝套件

1.建立 Heroku 應用程式： 

首先到 Heroku 官網 註冊帳號

接收驗證信後登入 Heroku ，點選 Create New App 建立新的應用程式

接著命名這個應用程式，然後點選 Create app 來完成建立應用程式

 2.安裝 Heroku CLI： 

Heroku 使用 Git 版本管理軟體進行網站部屬，官方寫了 Heroku CLI 方便使用者利用 Git 將檔案與 Heroku 伺服器同步

接續上方創建 app 後，將網頁向下捲到  安裝 CLI 的地方點選紅圈處的連結就會進入下載頁面

選擇好版本後，開始下載 Heroku CLI 這套軟體

 3.建置空白虛擬環境與安裝套件： 

建立一個虛擬環境來部屬網站，來達到最佳的部屬狀態

這裡以 專案 - 遊戲資料庫系統(少女前線爬蟲資料庫網站) 為範例( 名為game專案)：

為了取得切換 game專案所有的安裝套件

切換到該專案中，在cmd中執行以下命令，並建立 requirements.txt 檔： 

pip freeze > ./requirements.txt

再來將整個專案複製到 新建立的 heroenv 資料夾，將目錄名稱改為 gamehero

切換到該目錄中並輸入以下命令來匯入套件： 

pip install -r requirements.txt

二、部屬網站 

分為四個部分：

1. 使用現有資料庫的網站結構
2. 部屬網站到 Heroku
3. 使用空白資料庫的網站結構
4. 部屬後修改網站內容

1.使用現有資料庫的網站結構： 

(1)安裝套件 

首先安裝在 Heroku 伺服器執行 Django 網站要用到的套件，再命令提示字元執行以下命令： 

pip install dj-database-url dj-static gunicorn psycopg2

(2)修改 DEBUG 方式 

開發網站時會在 <setting.py> 設定 「DEBUG = True」方便除錯

部屬在伺服器時須改為「DEBUG = False」，否則會造成安全上的漏洞

(3)建立 <requirements.txt> 

 Heroku 藉由網站根目錄的 <requirements.txt> 檔中所列的套件名稱及版本 來安裝套件

而 <requirements.txt> 檔在之前已經建立過了，

但由於這邊有新安裝了一些套件，所以必須要再重新創建一次

(4)建立 <Procfile> 

 網站根目錄中的 <Procfile> 檔 是告訴 Heroku 啟動網站的方式

在 <gamehero> 目錄中新增一個 <Procfile> 檔，並輸入以下內容： 

web: gunicorn 專案名稱.wsgi

(5)建立 <runtime.txt> 

網站根目錄中的 <runtime.txt> 檔 是告訴 Heroku 使用得 Python 版本

Python 版本可以使用以下語法查詢： 

python --version

在 <gamehero> 目錄中新增一個 <runtime.txt> 檔，並輸入以下內容： 

python-3.6.5

(6)建立 <prod_settings.py> 

在 Heroku 中使用的設定會與本機執行的設定有些不同，因此另外建立一個 Heroku 用的設定檔是最好的方式

建議將<prod_settings.py>與<settings.py>放在相同的資料夾

先將原 <settings.py> 的所有內容導入，接著再寫入一些 Heroku 的特有設定，內容如下： 

from .settings import *

STATIC_ROOT = 'staticfiles'
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
ALLOWED_HOSTS = ['*']
DEBUG = False

(7)建立 <.gitignore.py> 

為避免浪費 Heroku 的空間，一些不必要的檔案可以不上傳到 Heroku

在 <gamehero> 目錄中新增一個 <.gitignore> 檔(無法創建的話在最後加上一個「.」號即可創建)，

<.gitignore> 檔內列出的檔案及資料夾，部屬時將不會上傳，內容如下： 

*.pyc
__pycache__
staticfiles

※如果有python執行檔要一起上傳，就不要加入 " *.pyc"，以免之後找不到py執行檔

(8)修改 <wsgi.py>  

Heroku 處理靜態檔案的方式與本機不相同

修改 <wsgi.py> 檔，使其符合　Heroku 靜態檔案處理方式： 

import os

from django.core.wsgi import get_wsgi_application
from dj_static import Cling

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "專案名稱.settings")

application = Cling(get_wsgi_application())

2.部屬網站到 Heroku： 

在命令提示字元 視窗切換到網站檔案資料夾gamehero) 輸入下列指令： 

heroku login

輸入 Heroku 帳號密碼即可登入 Heroku 伺服器管理應用程式

接著再本機新建一個 Git 倉庫來存放檔案： 

git init

再將此 Git 倉庫 與 Heroku 伺服器的 girlfrontlineinfo 應用程式建立連結： 

heroku git:remote -a girlfrontlineinfo

設定 Heroku 使用 <game> 資料夾的 <prod_settings.py>檔案內容做為網站的設定值： 

heroku config:set DJANGO_SETTINGS_MODULE=game.prod_settings

將所有檔案加入 Git 追蹤： 

git add .

將所有追蹤的檔案加入 Git 倉庫： 

git commit -am  "init commit"

接著就能將檔案上傳到 Heroku 了： 

git push heroku master

Heroku 會根據 <requirements.txt> 安裝套件，接著上傳 Git 倉庫中的檔案(排除<.gitignore>)，一段時間後又會完成網站的部屬。

最後讓 Heroku 運行網站： 

heroku ps:scale web=1

測試網站是否正常運作，可以用下列指令啟動瀏覽器並開啟網站首頁： 

heroku open

3.使用空白資料庫的網站結構： 

這邊接續現有資料庫結構，做文件上的修改

(1)修改 <.gitignore.py> 

為避免浪費 Heroku 的空間，一些不必要的檔案可以不上傳到 Heroku

在 <gamehero> 目錄中新增一個 <.gitignore> 檔(無法創建的話在最後加上一個「.」號即可創建)，

<.gitignore> 檔內列出的檔案及資料夾，部屬時將不會上傳，內容如下： 

*.pyc
__pycache__
db.sqlite3
staticfiles

(2)修改 <prod_settiongs.py> 

在 Heroku 中使用的設定會與本機執行的設定有些不同，因此另外建立一個 Heroku 用的設定檔是最好的方式

建議將<prod_settiongs.py>與<settings.py>放在相同的資料夾

先將原 <settings.py> 的所有內容導入，接著再寫入一些 Heroku 的特有設定，內容如下： 

from .settings import *

import dj_database_url
DATABASES = {
    'default': dj_database_url.config()
}
STATIC_ROOT = 'staticfiles'
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
ALLOWED_HOSTS = ['*']
DEBUG = False

(3)創建超級使用者帳號

由於沒有之前的資料庫，所以這裡要創建新的超級使用者，請在命令提示字元 視窗切換到網站檔案資料夾gamehero)輸入下列指令：  

heroku run python manage.py migrate
heroku run python manage.py createsuperuser

建立好後運行網站即開啟網站：
heroku ps:scale web=1
heroku open

4.部屬後修改網站內容： 

假設修改了"detail.html"檔案

在命令提示字元視窗啟動 herokuenv 虛擬環境，並切換到網站檔案資料夾(gamehero)

登入 heroku 伺服器 並進行所有檔案追蹤： 

heroku login
git add .

將檔案加入 Git 倉庫，並將此次便更命名為「modify detail.html」： 

get commit -am "modify detail.html"

接著就能將檔案上傳到 Heroku 了： 

git push heroku master

最後讓 Heroku 運行網站： 

heroku ps:scale web=1

測試網站是否正常運作，可以用下列指令啟動瀏覽器並開啟網站首頁： 

heroku open