使用 Vercel 和 Heroku 部署您的第一個全端應用程式

部署全端應用程式可能會讓人感到不知所措，特別是如果您是這個過程的新手。然而，像 Vercel 和 Heroku 這樣的平台可以讓獨立部署和管理前端和後端變得簡單。本指南將引導您部署基本的全端應用程序，前端託管在 Vercel 上，後端託管在 Heroku 上。

為什麼要用 Vercel 和 Heroku？

維塞爾：

• 針對 Next.js、React 和 Angular 等前端框架進行了最佳化。
• 透過 Git 整合提供無縫持續部署。
• 提供全域邊緣快取以提高效能。

Heroku：

• 用於部署後端服務和 API 的多功能平台。
• 易於設定環境變數和資料庫整合。
• 為初學者提供免費套餐選項，可很好地擴展。

先決條件
在開始之前，請確保您擁有：

1. 已安裝 Git 並對版本控制有基本了解。
2. 前端專案（React、Next.js 等）和後端專案（Node.js、Express 等）。
3. Vercel 和 Heroku 上的帳戶。
4. Node.js 和 npm 安裝在本機上。

第 1 步：準備您的前端程式碼

1.1 初始化前端儲存庫
如果您還沒有這樣做，請將您的前端專案推送到 Git 儲存庫（GitHub、GitLab 等）：

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  
</your-repo-url>

1.2 最佳化前端部署
確保您的前端專案已做好生產準備：

• 為 Next.js 或 React 等框架執行 npm run build 以建立最佳化的生產版本。
• 確保在 .env.local 中或直接在 Vercel 儀表板中設定環境變數（例如 API URL）。

第 2 步：將前端部署到 Vercel

2.1 連接到 Vercel

• 登入 Vercel。
• 點選「新建專案」並匯入您的 Git 儲存庫。

2.2 設定部署設定

• 選擇正確的框架預設（例如 Next.js、React）。
• 新增任何必要的環境變數（例如，REACT_APP_API_URL）。

2.3 部署前端
點擊“部署”，Vercel 將處理剩下的事情！

• 部署後，您將收到前端的即時 URL。
• 範例：https://your-project.vercel.app。

第 3 步：準備後端程式碼

3.1 初始化後端儲存庫
將您的後端專案推送到單獨的 Git 儲存庫：

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  
</your-repo-url>

3.2 新增 Procfile
Heroku 使用 Procfile 來定義如何執行應用程式。在專案的根目錄中建立一個 Procfile：

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  
</your-repo-url>

將 index.js 替換為您的入口點檔案。

3.3 設定環境變數
確保所有必需的環境變數（例如資料庫 URL、API 金鑰）都儲存在 .env 中。 Heroku 允許您稍後在儀表板中配置這些。

第 4 步：將後端部署到 Heroku

4.1 建立 Heroku 應用程式

1. 登入 Heroku。
2. 點選「新建」→「建立新應用程式」。
3. 為您的應用程式選擇一個唯一的名稱和區域。

4.2 部署後端

1. 導覽至「部署」標籤。
2. 連接您的 GitHub 儲存庫。
3. 啟用自動部署或透過點選「部署分支」手動部署。

4.3 配置環境變數
在「設定」標籤中，新增環境變數：

• 範例：DATABASE_URL、SECRET_KEY。

第 5 步：將前端連接到後端
更新您的前端專案以指向 Heroku 後端：

• 將後端 URL 設定為環境變數：z

web: node index.js  

• 在前端程式碼中，將硬編碼的 API URL 替換為 process.env.REACT_APP_API_URL：

REACT_APP_API_URL=https://your-backend-app.herokuapp.com  

第 6 步：測試與除錯

1. 從 Vercel 存取您的前端 URL 並確保所有功能正常運行，包括 API 呼叫。
2. 使用 Heroku 的日誌來除錯後端問題：

const response = await fetch(`${process.env.REACT_APP_API_URL}/api/endpoint`); 

1. 監控 Vercel 的建置日誌以了解任何與部署相關的問題。

最佳實務

1. 版本控制：使用 Git 分支進行開發，僅在測試後合併變更。
2. 錯誤處理：在後端實現正確的錯誤回應以幫助偵錯。
3. HTTPS：確保 Vercel 和 Heroku URL 使用 HTTPS 進行安全通訊。
4. CORS：在後端設定 CORS 策略以允許來自前端 URL 的請求。

結論
使用 Vercel 和 Heroku 部署全端應用程式非常簡單且適合初學者。透過 Vercel 處理前端，Heroku 為後端提供支持，您可以專注於建造功能，而不用擔心基礎設施。

立即開始部門，讓您的專案變為現實！ ？

以上是使用 Vercel 和 Heroku 部署您的第一個全端應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！