前幾天有深入研究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讓我寫程式的效率變更高了,只是品質略差,還需要修改才行,改天會將前後端的程式碼一起分享出來。