ReactJS - 構建與部署

本章將學習如何進行 React 應用的生產構建和部署。

構建

完成 React 應用開發後，需要將應用捆綁並部署到生產伺服器。本章將學習構建和部署應用的命令。

只需一個命令即可建立應用的生產版本。

npm run build
> expense-manager@0.1.0 build path\to\expense-manager
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

File sizes after gzip:

   41.69 KB   build\static\js\2.a164da11.chunk.js
    2.24 KB   build\static\js\main.de70a883.chunk.js
    1.4  KB   build\static\js\3.d8a9fc85.chunk.js
    1.17 KB   build\static\js\runtime-main.560bee6e.js
  493     B   build\static\css\main.e75e7bbe.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

   npm install -g serve
   serve -s build

Find out more about deployment here:

   https://cra.link/deployment

構建應用後，應用位於 build/static 資料夾下。

預設情況下，profiling 選項處於停用狀態，可以透過 -profile 命令列選項啟用。-profile 將在程式碼中包含效能分析資訊。效能分析資訊可以與 React DevTools 一起使用來分析應用。

npm run build -- --profile

部署

構建應用後，可以將其部署到任何 Web 伺服器。本章將學習如何部署 React 應用。

本地部署

可以使用 serve 包進行本地部署。首先使用以下命令安裝 serve 包：

npm install -g server

要使用 serve 啟動應用，請使用以下命令：

cd /go/to/app/root/folder 
serve -s build

預設情況下，serve 使用埠 5000 提供服務。應用可以在 https://:5000 檢視。

生產部署

生產部署可以透過將 build/static 資料夾下的檔案複製到生產應用的根目錄輕鬆完成。它適用於所有 Web 伺服器，包括 Apache、IIS、Nginx 等。

相對路徑

預設情況下，生產構建是在假設應用將託管在 Web 應用的根資料夾中建立的。如果應用需要託管在子資料夾中，則在 package.json 中使用以下配置，然後構建應用。

{ ... "homepage": "http://domainname.com/path/to/subfolder", ... }