用 Heroku 部署 MERN Stack App - MERN 教學與 Redux #15
目錄
- 簡介
- 部署準備
- 創建 Heroku 帳戶
- 安裝 Heroku CLI
- 創建專案並配置 Procfile
- 部署方法一:使用 heroku-postbuild
- 部署方法二:手動部署
- 設定環境變數
- 測試應用程式
- 總結
🚀 部署 MERN 應用程式到 Heroku 的完整教程
在本教程中,我們將學習如何將 MERN(MongoDB、Express、React 和 Node.js)堆棧應用程式部署到 Heroku。Heroku 是一個流行的雲平台,可以讓開發人員輕鬆部署和運行應用程式。
簡介
歡迎回到 Roadside Coder!在這個 MERN 應用程式部署教程的最後一個影片中,我們將將完整的 MERN 應用程式部署到 Heroku 上。現在就開始吧!
部署準備
在開始部署之前,我們需要做一些準備工作。首先,在後端資料夾內的 server.js
檔案中進行一些設定。我們將設定環境變數、建立靜態資料夾並添加路由。
現在讓我們一步一步進行。
- 開啟 VS Code,打開我們的專案資料夾。
- 開啟終端機,並執行
npm run dev
命令來啟動我們的應用程式。
- 確保應用程式正常運行,並且可以看到
profile
路由與筆記功能正常運作。
- 如果你之前沒有跟這個教程,請到我的 YouTube 頻道
Roadside Coder
上觀看完整的播放清單,並學習整個過程。
🛠️ 部署準備步驟
在開始部署之前,我們需要進行一些準備工作。讓我們逐步進行以下步驟:
-
進入後端資料夾,找到 server.js
檔案。
-
在所有路由的後面,添加部署所需的程式碼。注意:以下內容僅供參考,實際應用需根據需求進行修改。
const path = require('path');
// ...其他程式碼
const staticPath = path.resolve(__dirname, '../frontend/build');
if (process.env.NODE_ENV === 'production') {
app.use(express.static(staticPath));
app.get('*', (req, res) => {
res.sendFile(path.resolve(staticPath, 'index.html'));
});
}
-
接下來,我們需要確認應用程式所處的環境。打開 .env
檔案並修改 NODE_ENV
的值為 production
。
-
如果你之前建立的 profile
路由僅用於測試,而不需要在正式環境中,請將其從程式碼中刪除。
現在,我們已經完成了部署所需的準備工作。接下來,我們將介紹兩種部署方法,你可以根據自己的需求選擇其中一種。
部署方法一:使用 heroku-postbuild
首先,我們將介紹使用 heroku-postbuild
方式進行部署的方法。這種方法會在部署前自動執行一些命令,包括安裝依賴和建置應用程式。
讓我們一步一步進行以下步驟:
- 確保你已經順利安裝 Heroku CLI。如果未安裝,請參考上面的步驟進行安裝。
- 打開終端機,輸入
heroku login
以登入 Heroku CLI。
- 登入後,輸入
heroku Create
並指定你的應用程式名稱,例如 note-zipper-merge
。
- 等待 Heroku 完成應用程式的建立,並在終端機上顯示部署成功的訊息。
現在,我們需要將專案推送到 Heroku 來進行部署。讓我們一步一步進行以下步驟:
- 首先,你需要確保與你的 git 保存庫連接。如果尚未連接,請執行以下命令:
git init
:初始化 git 倉庫。
git add .
:將所有文件添加到 git。
git commit -m "Initial commit"
:提交更改。
- 執行
git push heroku master
命令,將專案推送到 Heroku。
Heroku 將自動執行部署所需的命令,包括安裝所有依賴項、建立靜態資料夾等。完成後,將顯示部署成功的訊息和應用程式的網址。
部署方法二:手動部署
除了使用 heroku-postbuild
方法外,還可以選擇手動部署的方法。這種方法需要手動建立生產環境的靜態資料夾並將其推送到 Heroku。
以下為手動部署的步驟:
- 確保你已經在 Git 忽略清單(
.gitignore
)中添加了 frontend/build
資料夾,以避免將它推送到版本控制。
- 在終端機中,切換到
frontend
資料夾。
- 執行
npm run build
命令以建立生產環境的靜態資料夾。
- 部署前,執行
git add .
和 git commit -m "Build frontend"
來保存更改。
- 最後,執行
git push heroku master
命令來推送應用程式到 Heroku。
Heroku 將自動檢測並部署推送的更改,並且你的應用程式現在應該能夠正常運行。
設定環境變數
在部署 MERN 應用程式時,我們需要將本地環境變數設定同步到 Heroku 上。這些環境變數包含了資料庫連接字串、API 密鑰等敏感信息。
以下是設定環境變數的步驟:
- 在 Heroku 上的應用程式頁面中,點擊
Settings
選項卡。
- 滾動到
Config Vars
部分,並點擊 Reveal Config Vars
按鈕。
- 在這裡,你可以添加和設定所有環境變數。
確保將本地 .env
檔案中的每個環境變數添加到 Heroku 中。這些變數將在部署期間使用。
測試應用程式
一旦部署完成並設定了環境變數,我們需要測試應用程式是否成功部署到 Heroku 上。
- 在 Heroku 的應用程式頁面中,點擊
Open app
按鈕或使用提供的應用程式網址。
- 測試應用程式的各個功能,確保它們在 Heroku 上運行正常。
恭喜!你已經成功部署了 MERN 應用程式到 Heroku 上。現在你可以與世界分享你的應用程式了。
總結
在本教程中,我們學習了如何部署 MERN 應用程式到 Heroku。我們使用了兩種不同的方法,一個是使用 heroku-postbuild
,另一個是手動部署。無論哪種方法都能成功地將應用程式部署到 Heroku 上。
希望本教程對你有所幫助。如果你有任何問題或需要進一步解釋,請隨時提問或查閱附帶的資源。
謝謝觀看本教程,祝你順利部署你的 MERN 應用程式!
FAQ
-
如何在 Heroku 上設定環境變數?
在 Heroku 應用程式頁面的 Settings
選項卡中可以設定環境變數。滾動到 Config Vars
部分,點擊 Reveal Config Vars
按鈕並添加所需的變數。
-
如何在 Heroku 上手動部署應用程式?
要在 Heroku 上手動部署應用程式,請遵循本教程中的部署方法二。
-
如何在 Heroku 上查看日誌?
在 Heroku CLI 中,執行 heroku logs --app <YOUR_APP_NAME>
命令來查看 Heroku 上的應用程式日誌。
-
我該如何在部署前自動構建前端?
如果使用 create-react-app
或類似工具,只需在根目錄下運行 npm run build
命令,即可生成生產環境的構建文件。
資源