vocus logo

方格子 vocus

08.第5步:完成部署,在Render建立 Web Service(補充程式碼,解決手機版螢幕問題)

更新 發佈閱讀 3 分鐘


【建置環境說明】

開發環境是win11,python是3.10.7版本,編碼的工具是Visual Studio Code(簡稱vscode)

【本篇說明】

1.前往https://render.com,點選 get started

raw-image


2.點選 Github帳號

raw-image


3.輸入信箱及密碼,以綁定 Github帳號

raw-image


4.進入 Render網頁,點擊 Dashboard

raw-image


5.點選 「Add new」-> 「Web Service」


6.選擇你的倉庫


7.設定內容如下:

Name:可自訂

Branch:選 main

Environment:選擇 Python

Build Command:輸入 pip install -r requirements.txt

Start Command:輸入 gunicorn 檔名:app (這邊檔名是 Flask檔名,例如我的檔名是 server,則輸入 gunicorn server:app,gunicorn與檔名之間須空一格)

Free Plan:確認選擇免費方案


8.點選「Create Web Service」,等它部署完成(約 2~3 分鐘)

raw-image

▲說明:如果部署成功,會出現"Your service is live"


9.部署成功,Render 會提供一個公開網址(如 https://0000000.onrender.com)


10.★★★補充:如何讓網站自動調整手機版螢幕大小

raw-image

▲說明:這是我自己部署的測試網頁,用手機版開啟發現網頁螢幕太小

只需要在HTML檔案加入以下程式碼,即可適用手機版

<meta name="viewport" content="width=device-width, initial-scale=1.0">

▲說明:需注意是在<head>標籤下一層中加入以上<meta>程式碼

raw-image

▲說明:這是加入<meta>標籤,重新部署後手機開啟網頁的畫面

另外也分享我部署的網站,可直接點選以下網址:

https://countinmind-web.onrender.com

所有文章同步更新在wordpress:https://ambitious-farloveway.wordpress.com/

【本篇小結】

跟著以上步驟,就能完成簡易網頁部署,網站也呈現公開的狀態了。

【本篇結束】

在自學路上難免遇到困難,只要堅持到底,相信就會有所成果,期勉大家一同努力。


留言
avatar-img
艾肯比工程師
4會員
77內容數
主要分享應用程式開發過程、遭遇困難及解決技巧,提供給自學或獨立開發者做為參考,希望能對您們有所幫助。
艾肯比工程師的其他內容
2025/06/09
本篇分享Flask 專案初始化並推送至 GitHub的流程,有提供詳細的指令及步驟供參考。
Thumbnail
2025/06/09
本篇分享Flask 專案初始化並推送至 GitHub的流程,有提供詳細的指令及步驟供參考。
Thumbnail
2025/06/05
第五步部署流程,分享安裝 Git工具 及提供 Flask專案資料夾目錄放置路徑。
Thumbnail
2025/06/05
第五步部署流程,分享安裝 Git工具 及提供 Flask專案資料夾目錄放置路徑。
Thumbnail
2025/06/02
第五步部署,建立 Github帳號並新增倉庫(repositories)流程說明。
Thumbnail
2025/06/02
第五步部署,建立 Github帳號並新增倉庫(repositories)流程說明。
Thumbnail
看更多
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
當我們架好站、WebService測試完,接著就是測試區域網路連線啦~
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
前面已經安裝好IIS後,並且也新建站台了,那麼接下來這篇就會分享如何使用它
Thumbnail
接續上一篇 Step2:VC#專案建立 Step3:IIS新建站台 Step4:VC#架設到IIS中
Thumbnail
接續上一篇 Step2:VC#專案建立 Step3:IIS新建站台 Step4:VC#架設到IIS中
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
Thumbnail
在程式任何地方都能修改各種react組件狀態的做法分享
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News