剛收到Heroku的Email，通知免費帳號到2022年12月31日全面失效，因此使用Vercel來代替Heroku。
安裝Vercel Client
如果尚未安裝Node.js，開啟「https://nodejs.org/en/」網頁，下載Node.js安裝檔，再雙擊安裝檔安裝Node.js。
開啟命令提示字元視窗，輸入下列命令安裝Vercel Client：
npm i -g vercel
建立Vercel帳號
由於Vercel可與Github連結，也可以Github帳號登入，因此使用者最好擁有Github帳號。若是沒有Github帳號，開啟「https://github.com/」網頁，按「Sign up」鈕申請一個Github新帳號。
開啟「https://vercel.com/」網頁，按「Sign up」鈕申請一個Vercel新帳號。
接著按「Continue with Github」鈕以Github帳號建立Vercel新帳號。
準備Flask專案
建立一個簡單的Flask專案：新增資料夾<show>，在<show>資料夾新增<show.py>，程式碼為：
from flask import Flask
app = Flask(__name__)
from flask import render_template
@app.route('/display')
def display():
person1={"name":"Amy","phone":"049-1234567","age":20}
person2={"name":"Jack","phone":"02-4455666","age":25}
person3={"name":"Nacy","phone":"04-9876543","age":17}
persons=[person1,person2,person3]
return render_template('show.html', **locals())
if __name__ == '__main__':
app.run()
在<show>資料夾新增<templates>資料夾，在<templates>資料夾新增<show.html>，程式碼為：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>基本資料</title>
</head>
<body>
<h3>
{% for person in persons%}
<ul>
<li>姓名：{{person.name}}</li>
<li>手機：{{person.phone}}</li>
<li>年齡：{{person.age}}</li>
</ul>
{% endfor %}
</h3>
</body>
</html>
如此就完成Flask專案。
準備Vercel設定檔
在<show>資料夾新增<requirements.txt>，內容為Flask專案會使用的模組。本專案未使用任何模組，因此內容為：
flask
再加入<vercel.json>檔，內容為：
{
"version": 2,
"builds": [
{
"src": "*.py",
"use": "@vercel/python"
}
],
"routes": [
{
"src": "(.*)",
"dest": "show.py"
}
]
}
「dest」項目為Flask專案開始執行的程式檔。
完成的檔案結構為：
發布專案到Vercel
開啟命令提示字元視窗，切換到Flask專案資料夾(此處為D:\tem\show)，執行命令：
vercel login
以鍵盤上、下箭頭選「Continue with Github」後按「Enter」鍵。
會自動開啟瀏覽器登入頁面，登入後關閉瀏覽器回到命令提示字元視窗。
接著執行命令：
vercel
依照下圖輸入：
「Which scope do you want to deploy to?」預設為Github帳號名稱，「What’s your project’s name?」預設為資料夾名稱。如此就完成發布！
查看及修改Vercel專案
登入Vercel即可看到剛發布的show專案及其網址。網址為「xxxx.vercel.app」，「xxxx」為系統自動產生的名稱。
如果要修改自動產生的「xxxx」名稱，點選「Setting / Domains」，再按名稱右方的「Edit」鈕。
修改Domain右方的名稱再按「Save」鈕即可。要注意此網址不可與他人重複，若重複系統會提示更改名稱。
查看發布結果：開啟「https://show-jeng.vercel.app/display」網頁就會顯示基本資料，表示發布成功了！
如果要修改專案內容，修改後在命令提示字元視窗執行下面命令就可重新發布：
vercel --prod
沒有留言:
張貼留言