本週練習目標:
讓我們自己的網站可以從全世界用 https:// 連過去;
|
這是為了之後要寫 LINE BOT 聊天機器人做準備 ! 因為 LINE / FB 臉書等的機器人都規定Web接口必須是 https 的網站!
|
說明:
就是把你第四週做過的網站 w4.py 複製為 w5.py, 然後增加一個網頁 /week05
內容你自己決定, 例如簡單點就直接 return 那個在第四週投影片內的陶淵明歸去來辭 的網頁(投影片內p.23), Python 程式類似如下: |
@app.route("/week05")
def webWeek005( ): # 這是函數名稱, 名稱不重要, 但不可以與其他函數同名
return '''
整個網頁塞這裡(不管有多少行), 最好在網頁內適當處加入你的學號與姓名
''' # 注意是整個網頁用前後都是三個連續單引號夾住 ! (或改用都是連續三個雙引號也可)
|
然後, 把你的網頁部署(Deploy)到 HeroKu 網站; 這不難, 只是步驟比較多一些,
看一些別人的教學文就會了。我先摘要如下:
1.) 要到 Heroku.com 註冊, 使用有效的 E-mail 註冊
要到你信箱點確認的連結, 點了會開新的窗, 這時要輸入你要的密碼(兩次);
注意密碼要有字母、數字、以及至少一個字母和數字以外的符號 !
(靠餐ㄟ, 害我才過兩天就忘了密碼, 忘了用哪個符號:-)
2.) 自己電腦要有 git (沒有用過則需要先安裝 git, 現在Heroku在 3.)那步驟安裝 Heroku CLI 時已經沒有 Git 選項可勾選了)
參考
Git 在Windows安裝使用教學 https://progressbar.tw/posts/1
3.) 登入 Heroku.com 之後, 建立一個 app (名稱就是會用來當作你網站的名稱的起頭);
它會提醒你抓 Heroku CLI 命令解譯程式回來安裝以便有 heroku 命令可以用, 以及該做哪些準備工作;
就是會到這 https://devcenter.heroku.com/articles/heroku-cli
Heroko CLI是一個用來管理、創建、提交等命令的工具。
4.) 使用 git 把 Python 專案弄成 git 的檔案配置方式;
或是用 git clone 把官方的 Python 範例複製(clone)抓回自己電腦來修改;
或是用 git clone 把教學文作者提供的範例抓回來改
5.) 執行 heroku login 登入 Heroku 後台
6.) 執行 heroku create 建立一個在 Heroku 的虛擬機器
7.) 依據 Heroku 的規定把相關檔案準備好, 包括執行環境
8.) 可以先在自己電腦跑起來測試以確定沒問題: heroku local
9.) 確定正確了再用 git push 把專案推到 Heroku
10.) 執行一些 heroku 命令
11.) 測試你的 Heroku 專案 https://你建立的app名稱.herokuapp.com
12.) 之後有修改只要做 git push heroku master 就可把改好的推上去 Heroku
Heroku免費帳號的限制
Heroku 免費帳號當然有些限制(要錢的至少每月七元美金ㄟ):
- 30分鐘沒有使用會進入睡眠狀態，之後要開啟需要等待一些時間才能運作。
- 512MB RAM記憶體，這對開發一些小專案(就是程式碼不能很大)來說已經夠用了。
- 1個Dyno。Dyno是Heroku分配給你的一個虛擬機器(虛擬電腦)，可用來執行你的網站。
|
因為 Heroku 雖然號稱很簡單, 但是步驟很多, 而且還要使用到 git 做程式碼管理:
Git 在Windows安裝使用教學 https://progressbar.tw/posts/1
所以,
如果你試著弄過一次沒弄成功, 在練習過程中抓三至五個畫面, 並寫一些心得放入你的 Weebly,
然後改做:
把網站跑在自己電腦, 利用 ngrok 讓你的網站變成全世界看得見的 https 網站, 抓下兩個或三個畫面也放入你的Weebly網站即可。
這 ngrok 的使用超級簡單, 在第四週的加分題內說明得很清楚。
|
＊注意:
當然, 練習過程記得要螢幕截圖, 放到你的 WeeBLY 這週對應的網頁; 還有, 最好是每張圖可以加減放一些文字說明或是心得 ! (不用寫太多：-)
網頁
網頁
網頁 . . .
關於網頁常用的Tag標籤, 請點最右邊圖片看以前講義 -->
|
可用滑鼠右鍵點選檢視網頁原始碼看這網頁怎麼寫的
|
|
如何把自己網站變成全世界都可用的 https:// 網站呢?
這通常有三種做法:
(1)自己的機器(或雲端VPS) + 自己買的SSL憑證 : 這項我們暫時不考慮!
(2)把網站佈署(Deploy)在自己的普通電腦(PC/WindowsMac OS),
然後利用挖地道(Tunnel)服務把網頁開放出去!
* 最有名的是 ngrok.com 的服務 (選免費即可, 但要註冊並先認證, 否則網站最多只能八小時)
* 想知道有哪些類似的可替代服務, 問以下這alternativeto網站就對了:
https://alternativeto.net/software/ngrok/
進入該網頁第一個就是 ServeO.net(完全免費),
這 ngrok 和 ServeO 的用法我們在上週的習題說明 iottalk.vip/604/ 加分題有講過!
* 課堂上我們會把上週投影片(在課程綱要網頁點 4. 右邊"HTML")內 陶淵明歸去來辭 的網頁(p.23)做示範:
(a)先複製該頁內容存為文字檔, 檔案名稱自己亂取都可, 副檔名改為 .html
在"余家貧" 之前加入以下這列: (改為你學號與姓名)
<h2><font color=red>我是 009008007 蔡文能</font></h2>
(b)用瀏覽器開啟就會看到類似投影片中下一頁(p.24)的網頁
(c)利用 Python + Flask 把該頁變成"網站"
這只要複製我們以前的 w2.py 來改就可以了, 利用 return 連續三個單引號夾住的整個網頁即可 :-)
先複製(或另存新檔)成新名稱例如 w5.py
copy w2.py w5.py
修改 w5.py, 加入一個入口點 "/week05" 以便呈現這新網頁
(d)用 python 把程式 w5.py 跑起來
沒錯誤的話它會說用瀏覽器看 http://0.0.0.0:5566
注意, 不要呆呆的真的用 0.0.0.0 喔! 要改用 127.0.0.1:5566
還有, 新網頁是 127.0.0.1:5566/week05
要讓其他同學也連進來則要知道電腦真正 IP, 在 CMD 命令窗用以下命令:
ipconfig
注意它列出的 IP address, 可告訴同學用, 也可自己可以用來換掉 127.0.0.1 (每部電腦都叫 127.0.0.1 )
(e)下載 ngrok 且執行 ngrok http 5566 (這裡用 5566 是因為原先 w2.py 用 port 5566, 可改別的)
(f)好了, 全世界都可以連入我們自己電腦的"網站"囉 !
(3)直接把網站佈署(Deploy)在別人的服務網站, 例如: Heroku 或 PythonAnywhere
|
