部署create-react-app-靜態還是動態？

Question

我不了解“靜態”部署站點與使用Express部署站點的區別。 create-react-app中的文檔說您不需要Express來啟動服務器嗎？ 那么，您在哪里以及如何部署此應用程序？ 我不明白 我習慣於使用express創建server.js ，然后再部署到類似Heroku的地方。

部署方式

npm run build創建一個包含應用程序生產版本的構建目錄。 設置您喜歡的HTTP服務器，以便為您網站的訪客提供index.html，並請求/static/js/main類的靜態路徑。 <hash> .js與/static/js/main.<hash>.js文件的內容一起提供。

從他們的文檔：

靜態服務器

對於使用Node的環境，處理此問題的最簡單方法是安裝serve並讓其處理其余部分：

npm install -g serve
serve -s build

上面顯示的最后一個命令將為端口5000上的靜態站點提供服務。 與服務的許多內部設置一樣，可以使用-p或--port標志來調整端口。

運行此命令以獲取可用選項的完整列表：

serve -h

其他解決方案

為了在生產環境中運行Create React App項目，您不一定需要靜態服務器 。 它可以很好地集成到現有的動態模型中 。

這是一個使用Node和Express的編程示例：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

我不明白為什么您不希望使用express運行它（我猜這是所謂的“動態”嗎？）。 如果您仍然沒有快速設置，那將如何工作？ 我不會“靜態運行”。 過去，我只運行過帶有Express的應用程序。

Answer 1

靜態部署站點意味着您已經具有在生產服務器（Apache，Nginx，Heroku，S3等）中使用HTTP服務靜態文件的能力。 它們可以處理以下我的解釋中的第2點和第3點，因此您無需在生產服務器中啟動Express或Serve。

您可能需要在生產機器中旋轉HTTP Server的原因有多種，這不僅限於create-react-app 。

1. 您可以使用附加到Express Server的Webpack Dev Middleware和Webpack Hot Middleware來重新加載熱模塊。 Webpack熱模塊重新加載通過在客戶端中注入代碼來工作，該代碼使用HTTP服務器提供的WebSocket端點偵聽文件中的更改。

2. 有時您需要與HTML和JavaScript一起使用AJAX動態加載靜態資產（圖像，字體）。 由於跨源請求僅限於HTTP，因此大多數瀏覽器均不允許這樣做。

3. 如果您需要使用BrowserHistory使用干凈的URL進行客戶端路由，則需要使用具有重寫規則的HTTP服務器，您可以使用Express輕松完成。