用 Heroku 部署 MERN Stack App - MERN 教學與 Redux #15

Find AI Tools
No difficulty
No complicated process
Find ai tools

用 Heroku 部署 MERN Stack App - MERN 教學與 Redux #15

目錄

  1. 簡介
  2. 部署準備
  3. 創建 Heroku 帳戶
  4. 安裝 Heroku CLI
  5. 創建專案並配置 Procfile
  6. 部署方法一:使用 heroku-postbuild
  7. 部署方法二:手動部署
  8. 設定環境變數
  9. 測試應用程式
  10. 總結

🚀 部署 MERN 應用程式到 Heroku 的完整教程

在本教程中,我們將學習如何將 MERN(MongoDB、Express、React 和 Node.js)堆棧應用程式部署到 Heroku。Heroku 是一個流行的雲平台,可以讓開發人員輕鬆部署和運行應用程式。

簡介

歡迎回到 Roadside Coder!在這個 MERN 應用程式部署教程的最後一個影片中,我們將將完整的 MERN 應用程式部署到 Heroku 上。現在就開始吧!

部署準備

在開始部署之前,我們需要做一些準備工作。首先,在後端資料夾內的 server.js 檔案中進行一些設定。我們將設定環境變數、建立靜態資料夾並添加路由。

現在讓我們一步一步進行。

  1. 開啟 VS Code,打開我們的專案資料夾。
  2. 開啟終端機,並執行 npm run dev 命令來啟動我們的應用程式。
  3. 確保應用程式正常運行,並且可以看到 profile 路由與筆記功能正常運作。
  4. 如果你之前沒有跟這個教程,請到我的 YouTube 頻道 Roadside Coder 上觀看完整的播放清單,並學習整個過程。

🛠️ 部署準備步驟

在開始部署之前,我們需要進行一些準備工作。讓我們逐步進行以下步驟:

  1. 進入後端資料夾,找到 server.js 檔案。

  2. 在所有路由的後面,添加部署所需的程式碼。注意:以下內容僅供參考,實際應用需根據需求進行修改。

    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'));
      });
    }
  3. 接下來,我們需要確認應用程式所處的環境。打開 .env 檔案並修改 NODE_ENV 的值為 production

  4. 如果你之前建立的 profile 路由僅用於測試,而不需要在正式環境中,請將其從程式碼中刪除。

現在,我們已經完成了部署所需的準備工作。接下來,我們將介紹兩種部署方法,你可以根據自己的需求選擇其中一種。

部署方法一:使用 heroku-postbuild

首先,我們將介紹使用 heroku-postbuild 方式進行部署的方法。這種方法會在部署前自動執行一些命令,包括安裝依賴和建置應用程式。

讓我們一步一步進行以下步驟:

  1. 確保你已經順利安裝 Heroku CLI。如果未安裝,請參考上面的步驟進行安裝。
  2. 打開終端機,輸入 heroku login 以登入 Heroku CLI。
  3. 登入後,輸入 heroku Create 並指定你的應用程式名稱,例如 note-zipper-merge
  4. 等待 Heroku 完成應用程式的建立,並在終端機上顯示部署成功的訊息。

現在,我們需要將專案推送到 Heroku 來進行部署。讓我們一步一步進行以下步驟:

  1. 首先,你需要確保與你的 git 保存庫連接。如果尚未連接,請執行以下命令:
    • git init:初始化 git 倉庫。
    • git add .:將所有文件添加到 git。
    • git commit -m "Initial commit":提交更改。
  2. 執行 git push heroku master 命令,將專案推送到 Heroku。

Heroku 將自動執行部署所需的命令,包括安裝所有依賴項、建立靜態資料夾等。完成後,將顯示部署成功的訊息和應用程式的網址。

部署方法二:手動部署

除了使用 heroku-postbuild 方法外,還可以選擇手動部署的方法。這種方法需要手動建立生產環境的靜態資料夾並將其推送到 Heroku。

以下為手動部署的步驟:

  1. 確保你已經在 Git 忽略清單(.gitignore)中添加了 frontend/build 資料夾,以避免將它推送到版本控制。
  2. 在終端機中,切換到 frontend 資料夾。
  3. 執行 npm run build 命令以建立生產環境的靜態資料夾。
  4. 部署前,執行 git add .git commit -m "Build frontend" 來保存更改。
  5. 最後,執行 git push heroku master 命令來推送應用程式到 Heroku。

Heroku 將自動檢測並部署推送的更改,並且你的應用程式現在應該能夠正常運行。

設定環境變數

在部署 MERN 應用程式時,我們需要將本地環境變數設定同步到 Heroku 上。這些環境變數包含了資料庫連接字串、API 密鑰等敏感信息。

以下是設定環境變數的步驟:

  1. 在 Heroku 上的應用程式頁面中,點擊 Settings 選項卡。
  2. 滾動到 Config Vars 部分,並點擊 Reveal Config Vars 按鈕。
  3. 在這裡,你可以添加和設定所有環境變數。

確保將本地 .env 檔案中的每個環境變數添加到 Heroku 中。這些變數將在部署期間使用。

測試應用程式

一旦部署完成並設定了環境變數,我們需要測試應用程式是否成功部署到 Heroku 上。

  1. 在 Heroku 的應用程式頁面中,點擊 Open app 按鈕或使用提供的應用程式網址。
  2. 測試應用程式的各個功能,確保它們在 Heroku 上運行正常。

恭喜!你已經成功部署了 MERN 應用程式到 Heroku 上。現在你可以與世界分享你的應用程式了。

總結

在本教程中,我們學習了如何部署 MERN 應用程式到 Heroku。我們使用了兩種不同的方法,一個是使用 heroku-postbuild,另一個是手動部署。無論哪種方法都能成功地將應用程式部署到 Heroku 上。

希望本教程對你有所幫助。如果你有任何問題或需要進一步解釋,請隨時提問或查閱附帶的資源。

謝謝觀看本教程,祝你順利部署你的 MERN 應用程式!

FAQ

  1. 如何在 Heroku 上設定環境變數?

    在 Heroku 應用程式頁面的 Settings 選項卡中可以設定環境變數。滾動到 Config Vars 部分,點擊 Reveal Config Vars 按鈕並添加所需的變數。

  2. 如何在 Heroku 上手動部署應用程式?

    要在 Heroku 上手動部署應用程式,請遵循本教程中的部署方法二。

  3. 如何在 Heroku 上查看日誌?

    在 Heroku CLI 中,執行 heroku logs --app <YOUR_APP_NAME> 命令來查看 Heroku 上的應用程式日誌。

  4. 我該如何在部署前自動構建前端?

    如果使用 create-react-app 或類似工具,只需在根目錄下運行 npm run build 命令,即可生成生產環境的構建文件。

資源

Most people like

Are you spending too much time looking for ai tools?
App rating
4.9
AI Tools
100k+
Trusted Users
5000+
WHY YOU SHOULD CHOOSE TOOLIFY

TOOLIFY is the best ai tool source.