前往
大廳
主題

【個人紀錄】使用render.com Blueprint功能將FastAPI + Next.js 全端佈署至雲端。

在漂流木上的少年樹 | 2024-06-10 22:35:04 | 巴幣 202 | 人氣 95

前幾天有深入研究render.com提供的服務。當前後端放置在同一個專案的時候,可以使用Blueprint功能達成全端佈署,render.com本身採用負載平衡( load balancer)的技術,不需要用到Nginx,另外,Next.js 也有路由重寫(Rewrites)的強大功能,所以這是我採用Next.js作為前端的原因之一。



這是我專案的檔案位置

backemd放的是FastAPI
my_app放的是Next.js

backemd

my_app
※裡面的backend是拿來測試用的




步驟一
依照官方的要求,需要在專案建一個render.yaml檔案

和多數雲端供應商的yaml一樣,上傳到雲端之後,會依照yaml來執行。
可以參考官方的寫法。


有幾個重要的參數可以參考。
services →必填不能亂改
type →需要佈署網頁的話要寫web
runtime → 該專案程式語言與框架
name → 專案名稱
repo → 指的是github HTTPS,你的專案連結
region → 伺服器的位置,沒設置的話會預設"frankfurt"
plan: →付費計畫,預設為starter,如果使用免費計畫則要改寫成free
branch →這裡指的是github的branch,沒設置的會採用預設的master
buildCommand →專案建立的位置
startCommand →專案執行的語法
envVars → 環境變數
key→環境變數名稱
value →環境變數的值

步驟二
將檔案從Blueprint上傳



步驟三
選擇自己的專案後,Blueprint會讀取yaml,如果你的專案有重複,Blueprint會通知你你的Blueprint在哪個專案有重疊到。


步驟四
確認都沒問題的話,就直接創建。


成功的話,可以看見前後端都完成佈署了。



相當成功


因為有買前端的課程,也有跟其他程式設計師聊過,所以程式碼不像以前一樣寫了一些沒意義,或是過時的程式碼了,再加上生成式AI讓我寫程式的效率變更高了,只是品質略差,還需要修改才行,改天會將前後端的程式碼一起分享出來。


創作回應

宮水三夜未
cool
話說樹哥對azure熟ㄇ?
2024-06-10 23:12:40
在漂流木上的少年樹
沒用過,大廠的只用過AWS而已
2024-06-11 06:40:11

更多創作