ReactJS：如何在本地服務器上部署

Question

我有一個使用 NodeJS + Express + GraphQL + MongoDB 后端和 ReactJS + Apollo 前端開發的 Web 應用程序。 我想在本地部署這個應用程序。 這甚至可能嗎？

我遇到了幾十個“如何部署到 Heroku”、“如何部署到 Digital Ocean”、“如何部署到 Github”等。但沒有一個解釋如何在本地部署。

現在，我運行： nodemon server為nodemon server ，前端為npm start 。 我看到應用程序在http://localhost:3000/ （我使用 cors 將前端與在端口 3001 上運行的服務器連接起來）。

我只想訪問http://localhost:3000/並查看應用程序，而無需執行命令npm start和nodemon server 。 這可能嗎？ 如果是這樣，我該怎么做？

據我所知，我們的本地服務器不是 WAMP 服務器（雖然我們的操作系統是 Windows）。 IT 部門告訴我，這是一個

[...] 普通的、普通的舊服務器。 地址是運行在 3000 端口的 localhost。如果需要，您可以在 3001 上打開另一個端口。 只需將您的東西放在 C: 驅動器上，您就可以開始使用了。 我從未聽說過 Node 或 React，所以如果您有任何問題，我無能為力。

有任何想法嗎？ 非常感謝您的幫助！

更新

圍繞我正在尋找的內容似乎有些混亂。 我正在嘗試在本地部署它。

假設，在您的本地計算機（您家里的筆記本電腦）上，您在您最喜歡的瀏覽器上訪問 localhost:3000。 除非您在那一刻向 localhost 提供服務，否則不會顯示任何內容，否則它會說“拒絕連接”或其他內容。 我想要的是每當我去 localhost:3000 並且我的反應站點出現並運行時能夠打開網絡上的任何機器......這更有意義嗎？

我不希望這是開發模式。 我想在本地主機上構建這個項目......我開始認為這是不可能的。

Answer 1

據我了解，您希望將其部署在本地服務器上，而不是部署在您的開發設備本地。

我想這樣做...但我不太確定它會一直運行嗎... :(

如果服務器未運行，您如何使用它？ 就像 WAMP（運行 apache）一樣，或者你在那里運行的任何東西，它都必須在運行。 因此，只需將其設為 slawomir建議的后台進程即可。

PS 我認為你雖然沒有正確理解節點服務器。 閱讀本文以了解為什么節點服務器需要重新加載。 之后，您需要了解沒有任何熱重載工具是完美的，您需要不時重新啟動服務器。

PPS 我不知道這是什么意思

[...] 普通的、普通的舊服務器。 地址是運行在端口 3000 上的 localhost。

如果有一台服務器在 3000 上運行，則需要將服務器的端口更改為其他（最常見的是 9000）

Answer 2

為了解決這個問題，你可以創建一個啟動腳本，它執行npm start和nodemon server 。 然后確保將其隱藏，以便您的服務器始終運行。 但請記住，拋出的任何錯誤都會停止您的服務器，除非您對其進行配置，否則服務器不會自行重新加載。

Answer 3

我會嘗試以下：

1. 使用設置的生產環境變量構建您的應用程序
2. 從 dist 文件夾中獲取所有文件並將它們部署到您的服務器中
3. 現在使用 localhost/ 訪問您的應用程序

Answer 4

也許您正在尋找的是類似ngrok 的東西，它創建了一個到您的本地主機的襪子隧道，據我所知，它可以有效地從本地主機進行部署，允許您通過像ldiuhv093.ngrok.io這樣的ldiuhv093.ngrok.io ，甚至是自定義子域來訪問您的本地主機如果您支付訂閱費。

如果我有這個錯誤，請有人告訴我！

Answer 5

要解決這個問題，首先需要創建一個擴展名為.bat or .cmd的批處理文件，並在該文件下添加以下 2 個命令

nodemon server npm start

然后按照以下步驟將其添加為 Windows 操作系統的啟動腳本。

1. 創建批處理文件的快捷方式。
2. 創建快捷方式后，右鍵單擊該文件並選擇“剪切”。
3. 按開始按鈕並鍵入運行並按回車鍵。
4. 在“運行”窗口中，鍵入 shell:startup 以打開“啟動”文件夾。
5. 啟動文件夾打開后，單擊文件夾頂部的主頁選項卡，然后選擇粘貼將快捷方式粘貼到文件夾中。

以上步驟是例如創建一個批處理文件並將其添加為 Windows 8 和 10 用戶的啟動腳本。 為了更清楚或參考，請點擊以下鏈接。 參考鏈接

Answer 6

沒有選項可以在保持服務器運行的同時重新加載服務器。 從技術上講，您可以讓“主”文件監視另一個文件的更改。 這將是您實際保存服務器程序的文件。 然后，在更改時，您放棄當前的邏輯並開始執行該邏輯。 也就是說，這樣做會非常脆弱，而且是一種非常迂回的方式。 它也不會修復您需要類似解決方案的前端。

相反，您可以連接到您最喜歡的編輯器的保存事件，並運行這兩個控制台命令，這樣每次保存時，服務器都會自動啟動。 （確保還清理現有服務器）

• 在VSCode 的Save上運行
• Atom 的保存命令

Answer 7

我知道這個帖子已經兩年了。 但是，我認為您的第二個期望結果的解決方案是使用並發。 https://www.npmjs.com/package/concurrently 。 這將允許您執行一個 NPM START 來啟動所有三個進程的兩個。

對於您的第一個問題，我認為解決方案是將 Electron 添加到您的應用程序中，以便您可以將其打包到可執行應用程序中。 當您啟動應用程序時，您的快速服務器將開始在后台運行。

大多數人可能不明白為什么需要這樣做。 在本地服務器（計算機）上運行允許訪問本地文件系統，甚至可以在代理內部運行 SQL 查詢，如果托管在外部服務器上，則需要 IT 參與。

Answer 8

據我了解，您希望在本地服務器上部署您的應用程序，這意味着您希望將其部署在您所連接的網絡上。

從命令提示符檢查 ip 要在本地部署它，請運行：HOST=ip npm run start

它將部署在您的本地服務器上。 並且連接到服務器的每個人都可以訪問該 url

如果這對你有用，請點贊

Answer 9

您需要執行npm start可能還有其他npm start方式，但是，所有結果都相同。 您可以在 Freecodecamp 上閱讀有關在 DigitalOcean 上部署的這篇文章。 您可以將它操作到您的本地主機。 應該不會差太多。 FCC Tut on 部署