佈署

npm run build 會建立一個名稱為 build 的目錄，其中包含應用程式的製作品建置。設定您最愛的 HTTP 伺服器，以便將 index.html 提供給造訪您網站的訪客，而類似於 /static/js/main.<hash>.js 的靜態路徑的請求會以 /static/js/main.<hash>.js 檔案的內容提供。若要進一步了解這部份，請參閱製作品建置部分。

靜態伺服器

對於使用 Node.js 的環境來說，處理這項任務最簡單的方式就是安裝 serve，並讓它處理其餘的事項

npm install -g serve
serve -s build

上方所示的最後一個指令會在埠 3000 上提供您的靜態網站。就像 serve 的許多內部設定，埠可以使用 -l 或 --listen 參數來調整。

serve -s build -l 4000

執行此指令以取得所有可用選項的完整清單

serve -h

其他解決方案

您不需要一定要使用靜態伺服器才能在製作品環境中執行 Create React App 專案。它在整合至現有的伺服器端應用程式時也能發揮良好的效用。

以下是用 Node.js 和 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);

伺服器軟體的選擇也不重要。由於 Create React App 完全不偏好任何平台，因此無需明確使用 Node。

Create React App 產生的唯一輸出是包含靜態資源的 build 資料夾。

不過，如果你使用用戶端路由，這還不夠。如果你希望在你的單一頁面應用程式中支援像 /todos/42 這樣的 URL，請參閱下一節。

提供具備用戶端路由的應用程式

如果你使用幕後使用 HTML5 pushState 歷史 API 的路由器（例如，帶有 browserHistory 的 React Router），許多靜態檔案伺服器將會失敗。例如，如果你將 React Router 與 /todos/42 的路由一起使用，開發伺服器將適當地回應 localhost:3000/todos/42，但提供生產建置的 Express 將不會回應。

這是因為當 /todos/42 有新頁面載入時，伺服器會尋找 build/todos/42 檔案，但找不到。伺服器需要設定為透過提供 index.html 來回應 /todos/42 請求。例如，我們可以修改上述 Express 範例，以提供 index.html 給所有未知路徑

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

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

如果你正在使用 Apache HTTP Server，你需在 public 資料夾中建立一個看起來像這樣的 .htaccess 檔案

    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

在你執行 npm run build 時，它將會被複製到 build 資料夾。

如果你正在使用 Apache Tomcat，你需遵循這個 Stack Overflow 回答。

現在 /todos/42 的請求將在開發和生產環境中得到正確處理。

在生產建置中，且當你已經選擇加入時，一個服務工作會自動處理所有導航請求，例如 /todos/42，透過提供 index.html 的快取副本。這個服務工作導航路由可透過 彈出 並修改 navigateFallback 和 navigateFallbackWhitelist 的 SWPrecachePlugin 設定選項來設定或停用。

當使用者將你的應用程式安裝到其裝置的主畫面時，預設設定會建立一個連結到 /index.html 的捷徑。這對期待應用程式從 / 提供的用戶端路由可能無法順利運作。在 public/manifest.json 中修改網頁應用程式宣言，並將 start_url 改為匹配所需的 URL 架構，例如

  "start_url": ".",

為相對路徑而建構

預設情況下，Create React App 會產生一個假設您的應用程式是寄存在伺服器根目錄的建構。

若要覆寫此事，請在您的 package.json 中指定 homepage，例如

  "homepage": "http://mywebsite.com/relativepath",

這將讓 Create React App 能夠正確地推論出在產生的 HTML 檔案中要使用的根目錄路徑。

請注意：如果您正在使用 react-router@^4，則可以使用任何 <Router> 上的 basename 道具來選取 <Link> 的根目錄。

如需詳細資訊，請按這裡。

例如

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">

從不同的路徑提供相同的建構

請注意：此功能可搭配 react-scripts@0.9.0 及更新版本使用。

如果您未使用 HTML5 pushState 歷程史 API，或根本未在使用用戶端路由，則無須指定將用於提供您的應用程式的 URL。您可將其放入您的 package.json

  "homepage": ".",

這樣會確保所有資產路徑都與 index.html 相對。接著，您便可將您的應用程式從 http://mywebsite.com 移至 http://mywebsite.com/relativepath，甚至 http://mywebsite.com/relative/path，而無需重新建構。

自訂任意建構環境的環境變數

您可以透過建立自訂的 .env 檔案，並使用 env-cmd 載入它來建立任意的建構環境。

例如，為預演環境建立建構環境

建立一個名為 .env.staging 的檔案
設定環境變數，就像其他 .env 檔案所做的一樣（例如，REACT_APP_API_URL=http://api-staging.example.com）

安裝 env-cmd

$ npm install env-cmd --save
$ # or
$ yarn add env-cmd

新增一個新的腳本到您的 package.json，並使用您新的環境來建構

{
  "scripts": {
    "build:staging": "env-cmd -f .env.staging npm run build"
  }
}

現在，您可以執行 npm run build:staging 來使用預演環境設定檔進行建構。您可以用相同的方式來指定其他環境。

.env.production 中的變數將被用作後設，因為 NODE_ENV 對於建構而言將永遠設為 production。

AWS Amplify

AWS Amplify Console 提供持續部署和寄存服務，使用沒有伺服器後端的新式網路應用程式（單頁面應用程式和靜態網站產生器）。Amplify Console 提供全球可用的 CDN、自訂網域設定、功能分支部署，以及密碼保護。

點選這裡登入 Amplify Console。
連線您的 Create React App 儲存庫並挑選一個分支。如果您正在尋找 Create React App+Amplify 的入門工具，可以試試 create-react-app-auth-amplify 入門工具，它可以在 10 分鐘內示範如何在 Create React App 中設定驗證。
Amplify 主控台會自動偵測建置設定。選擇下一步。
選取儲存並部署。

如果建置成功，應用程式將部署並託管在具有 amplifyapp.com 網域的全球 CDN 上。現在您可以連續部署變更到您的前端或後端。連續部署讓開發人員可以在每次將程式碼提交到其 Git 儲存庫時，部署前端和後端的更新。

Azure

Azure 靜態 Web 應用程式會為由 GitHub Actions 提供的 React 應用程式建立自動化的建置和部署管線。應用程式預設為地理分布，具備多個服務據點。公關會自動建置，以進行暫存環境預覽。

在此處建立一個新的靜態 Web 應用程式。
新增詳細資料並連線到您的 GitHub 儲存庫。
確定在「建置」標籤上正確設定建置資料夾，然後建立資源。

Azure 靜態 Web 應用程式會自動在您的儲存庫中設定一個 GitHub Action 並開始部署。

查看Azure 靜態 Web 應用程式文件，取得路由、API、驗證和授權、自訂網域等更多資訊。

GitHub Pages

注意：此功能在 react-scripts@0.2.0 或更新版本中才可以使用。

步驟 1：將 `homepage` 新增至 `package.json`

以下步驟很重要！

如果略過，您的應用程式將無法正確部署。

開啟 package.json 並針對您的專案新增 homepage 欄位

  "homepage": "https://myusername.github.io/my-app",

或針對 GitHub 使用者頁面

  "homepage": "https://myusername.github.io",

或針對自訂網域頁面

  "homepage": "https://mywebsite.com",

Create React App 使用 homepage 欄位來決定已建置 HTML 檔案中的根 URL。

步驟 2：安裝 `gh-pages` 並在 `package.json` 中的 `scripts` 中新增 `deploy`

現在，每當您執行 npm run build 時，您就會看到一個秘笈，其中有如何部署至 GitHub Pages 的說明。

若要發佈於 https://myusername.github.io/my-app，請執行

npm install --save gh-pages

您也可以使用 yarn

yarn add gh-pages

在 package.json 中新增以下指令碼

  "scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

predeploy 指令碼會在執行 deploy 前自動執行。

如果您要部署至 GitHub 使用者頁面，而不是專案頁面，您需要進行一項額外的修改

調整您的 package.json 指令碼，將部署推送到 master

  "scripts": {
    "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
+   "deploy": "gh-pages -b master -d build",

步驟 3：執行 `npm run deploy` 以部署網站

然後執行

npm run deploy

步驟 4：針對專案頁面，請確保專案設定使用 `gh-pages`

最後，請確保 GitHub 專案設定中 GitHub Pages 選項設為使用 gh-pages 分支

步驟 5：選擇性設定網域

您可以透過在 public/ 資料夾中新增 CNAME 檔案，來使用 GitHub Pages 設定自訂網域。

您的 CNAME 檔案應如下所示

mywebsite.com

客戶端路由注意事項

GitHub Pages 不支援執行底層 HTML5 pushState 歷程 API 的路由器（例如使用 browserHistory 的 React Router）。這是因為當網址為類似 http://user.github.io/todomvc/todos/42 的 URL 有新的載入頁面時（其中 /todos/42 為前端路由），GitHub Pages 伺服器會傳回 404，因為它不知道 /todos/42。如果您要將路由器新增至 GitHub Pages 上主機的專案，以下提供幾種解決方案

你可以從使用 HTML5 瀏覽歷程 API 轉換為雜湊路由。如果你使用 React Router，你可以轉換為 hashHistory 以達到此效果，但網址將會更長且更囉唆（例如，http://user.github.io/todomvc/#/todos/42?_k=yknaj）。深入瞭解 React Router 中各種瀏覽歷程的實作方式。
或者，你可以運用一個技巧教 GitHub Pages 處理 404 錯誤，透過自訂重新導向參數重新導向到你的 index.html 頁面。在部署你的專案前，你需要加入一個包含重新導向程式碼的 404.html 檔案到 build 資料夾，並且需要加入處理重新導向參數的程式碼到 index.html。你可以在本指南中找到有關此技巧的詳細說明。

疑難排解

「/dev/tty：找不到此裝置或地址」

如果你在部署時得到 /dev/tty：找不到此裝置或地址 或類似的錯誤，請嘗試採取以下步驟

建立一個新的個人存取權杖
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo> .
再次嘗試 npm run deploy

「無法讀取 null 的屬性 'email'」

如果你在部署時得到 無法讀取 null 的屬性 'email'，請嘗試採取以下步驟

git config --global user.name '<你的名稱>'
git config --global user.email '<你的電子郵件>'
再次嘗試 npm run deploy

Heroku

使用適用於 Create React App 的 Heroku Buildpack。

你可以在使用零組態部署 React 中找到教學。

解決 Heroku 部署錯誤

有時候 npm run build 在本地端運作正常，但透過 Heroku 部署時卻失敗。以下是幾個最常見的案例。

「找不到 module：錯誤：無法解析 '檔案' 或 '目錄'」

如果你得到類似這樣的訊息

remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src

這表示你需要確認你 import 的檔案或目錄的字母大小寫，是否與你在檔案系統或 GitHub 上看到的相符。

這一點很重要，因為 Linux（Heroku 使用的作業系統）區分大小寫。因此，MyDirectory 和 mydirectory 是兩個截然不同的目錄，因此，儘管專案在本地端可以建置，但大小寫的差異會中斷 Heroku 遠端上的 import 陳述式。

「找不到必要的檔案。」

如果您排除或忽略了套件中的必要檔案，您會看到類似這個錯誤

remote: Could not find a required file.
remote:   Name: `index.html`
remote:   Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"

在這種情況下，請確保檔案在那裡，大小寫正確，而且沒有在您的本地 .gitignore 或 ~/.gitignore_global 中被忽略。

Netlify

要手動部署到 Netlify 的 CDN

npm install netlify-cli -g
netlify deploy

選擇部署的 build 路徑。

設定連續遞送

有了這個設定，當您推送到 git 或開啟拉取請求時，Netlify 將會建置並部署

開始一個新的 Netlify 專案
選擇您的 Git 主機服務並選擇您的儲存庫
按下 建置您的網站

支援用戶端路由

要支援 pushState，一定要用以下改寫規則建立一個 public/_redirects 檔案

/*  /index.html  200

當您建置專案時，Create React App 會將 public 資料夾的內容放置到建置輸出中。

Vercel

Vercel 是雲端平台，讓開發人員可以主機 Jamstack 網站和網路服務，它們可以立即部署、自動擴充，且不需要管理，全部無需任何設定。它們提供全球網路邊緣、SSL 加密、資源壓縮、快取失效等等。

步驟 1：將您的 React 專案部署到 Vercel

要使用 Vercel for Git Integration 部署您的 React 專案，請確定它已經推送到 Git 儲存庫。

使用匯入流程將專案匯入 Vercel。匯入期間，您會找到所有的相關選項，預先將它們設定好，並可以依據需求變更。

專案匯入後，後續所有推送到分支的更新都將產生預覽部署，而所有對正式分支（通常是「master」或「main」）做的變更都會產生正式部署。

部署後，您會取得一個網址，讓您觀看應用程式上線，例如：https://create-react-app-example.vercel.app/。

步驟 2（選用）：使用自訂網域

如果您想對您的 Vercel 部署使用自訂網域，您可以透過 Vercel 帳戶網域設定加入或轉讓您的網域。

若要將您的網域新增至您的專案，請從 Vercel 儀表板前往您的專案。選取您的專案後，按一下「設定」標籤，然後選取網域功能表項目。從您的專案網域頁面中，輸入您想要新增至您的專案的網域。

新增網域後，您會看到不同的設定方法。

部署新的 React 專案

您可以部署新的 React 專案，其中會為您設定 Git 儲存庫，與下列部署按鈕相同

Vercel 參考:

Render

Render 可免費靜態網站寄存，並提供完全管理的 SSL、全球 CDN 和對 GitHub 持續自動部署。

只要依照建立 React 應用程式部署指南，在幾分鐘內就能部署您的應用程式。

使用邀請碼 cra 註冊或使用這個連結。

S3 和 CloudFront

查看這篇部落格文章，了解如何將您的 React 應用程式部署至 Amazon Web Services S3 和 CloudFront。如果您想增加自訂網域、HTTPS 和持續部署，請查看這篇部落格文章。

Surge

如果尚未安裝 Surge CLI，請執行 npm install -g surge 進行安裝。執行 surge 命令並登入您的帳戶，或建立一個新帳戶。

系統詢問專案路徑時，務必指定 build 資料夾，例如

       project path: /path/to/project/build

請注意，若要支援使用 HTML5 pushState API 的路由器，您可能想在部署到 Surge 之前，將您 build 資料夾中的 index.html 重新命名為 200.html。這可確保每個 URL 都會回退到該檔案。

將元件發佈到 npm

Create React App 不提供任何內建的功能，可以用於將元件發布至 npm。若您已準備好從專案中提取元件，以便他人使用，建議您將其移至專案外的個別目錄中，然後使用 nwb 等工具處理發布前準備工作。

靜態伺服器​

其他解決方案​

提供具備用戶端路由的應用程式​

為相對路徑而建構​

從不同的路徑提供相同的建構​

自訂任意建構環境的環境變數​

步驟 1：將 homepage 新增至 package.json​

步驟 2：安裝 gh-pages 並在 package.json 中的 scripts 中新增 deploy​

步驟 3：執行 npm run deploy 以部署網站​

步驟 4：針對專案頁面，請確保專案設定使用 gh-pages​

步驟 5：選擇性設定網域​

客戶端路由注意事項​

疑難排解​

「/dev/tty：找不到此裝置或地址」​

「無法讀取 null 的屬性 'email'」​

解決 Heroku 部署錯誤​

「找不到 module：錯誤：無法解析 '檔案' 或 '目錄'」​

「找不到必要的檔案。」​

步驟 1：將您的 React 專案部署到 Vercel​

步驟 2（選用）：使用自訂網域​

部署新的 React 專案​

Vercel 參考:​

S3 和 CloudFront​

將元件發佈到 npm​