如何在 cPanel 中安裝 React.js：指南 2024

已發表: 2024-09-01
目錄
  • 先決條件
  • 第 1 步：準備您的 React.js 應用程式
  • 第 2 步：設定您的 cPanel 環境
  • 步驟 3：設定伺服器設定
  • 第 4 步：最終確定和測試
  • 故障排除
  • 結論

React.js 已成為建立動態、互動式使用者介面的最受歡迎的 JavaScript 程式庫之一。雖然它通常與 Node.js 等後端框架一起使用，但許多開發人員尋求在使用 cPanel（用於管理 Web 託管帳戶的流行控制面板）的共享託管環境上部署其 React.js 應用程式。

本文將引導您完成使用 cPanel 安裝和部署 React.js 應用程式的過程，即使您的託管提供者並未專門迎合 JavaScript 框架。

您也可以閱讀：2024 年 React 應用程式的 7 個最佳託管（比較）

先決條件

在深入安裝過程之前，您應該滿足一些先決條件：

  1. 準備部署的 React.js 應用程式：確保您的 React 應用程式完整併準備好用於生產。這意味著所有開發工作都已完成，您可以建立可以提供給使用者的應用程式版本。
  2. 造訪 cPanel ：您需要存取 cPanel，這是由您的網站寄存服務提供的。大多數共享主機提供者都提供cPanel作為其服務的一部分。
  3. 網域：您將部署 React 應用程式的註冊網域或子網域。如果您尚未進行設置，則可以使用現有網域或透過 cPanel 建立子網域。

第 1 步：準備您的 React.js 應用程式

生成生產版本

將 React.js 應用程式部署到 cPanel 的第一步是建立應用程式的生產版本。此版本針對效能進行了最佳化，確保其在網路上高效運作。應在本機上執行下列步驟。

  1. 開啟終端機：使用終端機或命令提示字元導覽至 React 專案目錄。
  2. 執行建置指令： npm run build如果您使用 Yarn 作為套件管理器，則可以使用： yarn build此指令會在專案目錄中產生一個build資料夾。 build資料夾包含執行應用程式所需的所有靜態文件，包括 HTML、CSS 和 JavaScript 文件。

預覽建置（可選）

在部署之前，最好在本地預覽生產版本，以確保一切正常運作。您可以使用一個簡單的伺服器工具來完成此操作：

  1. 全域安裝 Serve ： npm install -g serve
  2. 提供建置服務： serve -s build此命令將啟動本機伺服器並從build目錄提供您的應用程序，讓您在瀏覽器中預覽它。

第 2 步：設定您的 cPanel 環境

一旦您的 React 應用程式準備好部署，您需要設定 cPanel 環境。

建立子網域（可選）

如果您希望您的 React 應用程式可以透過子網域（例如， react.yourdomain.com ）訪問，您需要在 cPanel 中建立一個：

  1. 登入 cPanel ：使用託管提供者的登入入口網站存取 cPanel。
  2. 導覽至子網域：在「網域」部分中，按一下「子網域」。
  3. 建立新子網域：輸入子網域所需的名稱並指定文件根目錄。如果您保留預設設置，cPanel 將在public_html下使用您的子網域名稱建立新目錄。

上傳建置文件

生產版本準備就緒後，您現在可以將其上傳到您的伺服器。

  1. 存取檔案管理器：在 cPanel 中，找到「檔案」部分下的「檔案管理器」。
  2. 導覽至所需目錄：如果您建立了子網域，請導覽至對應的目錄（例如public_html/react ）。如果您要在主網域上部署，請使用public_html目錄。
  3. 上傳建置資料夾：
    • 首先，將本機電腦上的build資料夾壓縮為 ZIP 檔案。
    • 使用檔案總管中的「上傳」按鈕將此 ZIP 檔案上傳到所需目錄。
    • 上傳後，右鍵單擊檔案並選擇“解壓縮”以解壓縮內容

步驟 3：設定伺服器設定

上傳建置檔案後，您可能需要配置一些伺服器設置，特別是如果您的 React 應用程式使用 React Router 的客戶端路由。

設定 .htaccess（可選）

如果您的應用程式使用依賴 HTML5 pushState歷史記錄 API 的 React Router，則需要設定您的伺服器以正確處理請求。如果使用者可以直接導航到主頁以外的路線，這一點尤其重要。

  1. 找到或建立 .htaccess ：
    • 在您的public_html或子網域目錄中，檢查是否有.htaccess檔。
    • 如果沒有，請建立一個名為.htaccess的新檔案。
  2. 新增路由規​​則：
    • 開啟.htaccess文件，新增以下設定：bash複製程式碼Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
    此配置可確保所有請求都透過index.html檔案進行路由，這對於單頁應用程式（例如使用 React 建置的應用程式）至關重要。

第 4 步：最終確定和測試

上傳和配置所有內容後，下一步是完成部署並確保一切按預期工作。

檢查檔案權限

確保檔案和目錄具有 Web 伺服器存取的正確權限。通常，目錄的​​權限應設定為755 ，檔案的權限應設定為644 。

測試部署

在網頁瀏覽器中存取您的網域或子網域（例如， react.yourdomain.com ）以驗證您的React應用程式是否正常運作。檢查所有頁面和功能以確保一切正常運作。

如果您遇到任何問題，瀏覽器的開發人員工具可以幫助診斷問題。此外，cPanel 的錯誤日誌可以提供對伺服器端問題的深入了解。

故障排除

在 cPanel 上部署 React 應用程式有時會導致問題。以下是一些常見問題及其解決方案：

  • 路由錯誤：如果導航到應用程式的不同頁面導致 404 錯誤，請確保您的.htaccess檔案正確配置為處理客戶端路由。
  • 找不到檔案錯誤：仔細檢查build資料夾中的所有檔案是否已正確上傳，並且它們位於伺服器上的正確目錄中。
  • 檔案權限不正確：如果檔案未加載，請檢查檔案權限設定是否正確（目錄為755 ，檔案為644 ）。
  • 快取問題：有時，由於快取的原因，變更可能不會立即顯示。清除瀏覽器快取或嘗試以隱身模式存取網站，看看問題是否仍然存在。

結論

在cPanel 託管的伺服器上部署React.js 應用程式一開始可能看起來很困難，特別是如果您習慣使用Vercel 或Netlify 等服務進行更自動化的部署流程，或者查看我們的文章：2024 年10 家最佳Node.js 託管提供者（便宜且免費）。但是，遵循本指南中概述的步驟，您可以成功在 cPanel 上啟動並執行您的 React 應用程式。

此過程包括為生產準備 React 應用程式、設定 cPanel 環境、配置必要的伺服器設定以及對出現的任何問題進行故障排除。完成後，您的 React.js 應用程式將上線並透過您的網域或子網域供全世界存取。

隨著您獲得更多經驗，您可以探索更高級的主題，例如整合後端服務、設定持續部署管道或進一步優化效能。現在，就享受與世界分享您的 React 專案吧！