我可以將 react.js Web 應用程序部署到共享主機嗎？

Question

我想知道是否可以將我構建的react.js Web 應用程序部署到未安裝node.js的共享托管站點？

我使用webpack來構建應用程序，它會創建普通的html, js, css文件。 我上傳了包含所有這些html, js(bundle.js) and css文件的靜態文件夾，但是當我請求該站點時，服務器回復404 bundle.js not found 響應。

Answer 1

使用 npm run build，你應該得到一個包含 index html 文件的文件夾，它將運行你的應用程序。 在實際部署到服務器之前，請先使用 xampp 嘗試此操作。

這是一步一步的一切

npm run build

或者

yarn run build

它將生成一個如下所示的構建文件夾：

復制所有內容並將其移動到 xampp 或 ftp 中的 htdocs 將目錄上傳到您的主機中的 public_html 文件

Answer 2

是的，您肯定可以對共享托管服務提供商做出反應。

看到您收到 404 錯誤（未找到），您可能錯誤地引用了您的 React 文件/包。 如果您使用樣板來創建應用程序，它甚至可能不會被命名為bundle.js 。

你能提供更多信息嗎？ 你的 index.html 文件是什么樣的？ 你的目錄結構是什么樣的？ 如果您能夠發布這些文件，我可以告訴您問題是什么。

更新：應該接受下面的答案。 （盡管這將假設您有能力進行尚未驗證或未驗證的構建。）

通過您使用的任何樣板，使用 build 命令進行構建。 將這些文件部署在您的共享托管服務器上。 確保 index.html 位於您的服務器期望根所在的根位置，並且您的應用程序應該處於活動狀態。

Answer 3

要在共享主機上部署 React 應用程序，您需要創建生產版本。 生產構建是包含所有 React 代碼及其依賴項的包。

在大多數共享主機中，我們將我們的網站/應用程序放在 public_html 目錄中，因此如果我們點擊www.yourdomain.com，它會提供來自 public_html 目錄的代碼。

因此，如果您的 React 應用程序已准備就緒，請編輯您的 package.json 文件，添加一個新的鍵值：

"主頁":"http://yourdomain.com"

然后使用以下命令創建構建：

npm 運行構建

運行該命令后，您將在應用程序根目錄中看到一個名為 build 的新目錄。 它將包含應用程序的 js 和 css 以及一個 index.html 文件。 您需要將 build 目錄中的所有內容上傳到 public_html 目錄，僅此而已，轉到您的域，您的應用程序將正常運行。