部署
npm run build 创建一个包含你的应用生产版本的 build 目录。设置你喜欢的 HTTP 服务器，以便访问你网站的访客可以访问 index.html，并且对静态路径（如 /static/js/main.<hash>.js）的请求将使用 /static/js/main.<hash>.js 文件的内容进行服务。有关更多信息，请参阅 生产版本 部分。
静态服务器
对于使用 Node 的环境，最简单的方法是安装 serve 并让它处理其余工作
npm install -g serve
serve -s build
上面显示的最后一个命令将在端口 3000 上提供你的静态网站。与 serve 的许多内部设置一样，可以使用 -l 或 --listen 标志调整端口
serve -s build -l 4000
运行此命令以获取可用选项的完整列表
serve -h
其他解决方案
您不需要静态服务器来运行生产环境中的 Create React App 项目。它也可以很好地集成到现有的服务器端应用程序中。
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。
包含静态资产的 build 文件夹是 Create React App 生成的唯一输出。
但是，如果您使用客户端路由，这还不够。如果您想在单页应用程序中支持像 /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 的缓存副本。此服务工作者导航路由可以通过 eject 进行配置或禁用，然后修改 navigateFallback 和 navigateFallbackWhitelist 的 SWPrecachePlugin 配置选项。
当用户将您的应用程序安装到其设备的主屏幕时，默认配置将创建一个指向 /index.html 的快捷方式。这可能不适用于期望应用程序从 / 提供服务的客户端路由器。编辑 public/manifest.json 中的 Web 应用程序清单，并将 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">
从不同路径提供相同的构建
注意：此功能适用于
[email protected]及更高版本。
如果您没有使用 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 控制台为现代 Web 应用程序（单页应用程序和静态站点生成器）提供持续部署和托管，并提供无服务器后端。Amplify 控制台提供全球可用的 CDN、自定义域设置、功能分支部署和密码保护。
- 登录 Amplify 控制台 此处。
- 连接您的 Create React App 存储库并选择一个分支。如果您正在寻找 Create React App+Amplify 启动器，请尝试 create-react-app-auth-amplify 启动器，它演示了如何在 10 分钟内使用 Create React App 设置身份验证。
- Amplify 控制台会自动检测构建设置。选择下一步。
- 选择保存并部署。
如果构建成功，应用程序将部署并托管在具有 amplifyapp.com 域的全球 CDN 上。您现在可以持续部署对前端或后端的更改。持续部署允许开发人员在每次将其代码提交到其 Git 存储库时，将其前端和后端的更新部署到生产环境中。
Azure
Azure 静态 Web 应用为您的 React 应用创建了一个由 GitHub Actions 提供支持的自动化构建和部署管道。应用程序默认情况下是地理分布式的，具有多个访问点。PR 会自动构建以用于预发布环境预览。
- 创建一个新的静态 Web 应用 在这里。
- 添加详细信息并连接到您的 GitHub 仓库。
- 确保在“构建”选项卡上正确设置构建文件夹，然后创建资源。
Azure 静态 Web 应用将自动在您的仓库中配置一个 GitHub Action 并开始部署。
有关路由、API、身份验证和授权、自定义域等的更多信息，请参阅 Azure 静态 Web 应用文档。
Firebase
如果您还没有安装 Firebase CLI，请运行 npm install -g firebase-tools。注册一个 Firebase 帐户 并创建一个新项目。运行 firebase login 并使用您之前创建的 Firebase 帐户登录。
然后从您的项目根目录运行 firebase init 命令。您需要选择 **托管：配置和部署 Firebase 托管站点**，并选择您在上一步中创建的 Firebase 项目。您需要同意创建 database.rules.json，选择 build 作为公共目录，并同意 **配置为单页应用程序**，方法是回复 y。
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll set up a default project.
? What Firebase project do you want to associate as default? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
重要：您需要在 firebase.json 文件中为 service-worker.js 文件设置正确的 HTTP 缓存头，否则您将无法在第一次部署后看到更改 (问题 #2440)。它应该添加到 "hosting" 键中，如下所示
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
现在，在使用 npm run build 创建生产构建后，您可以通过运行 firebase deploy 来部署它。
=== Deploying to 'example-app-fd690'...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.com
有关更多信息，请参阅 Firebase 托管。
GitHub Pages
注意：此功能在
[email protected]及更高版本中可用。
步骤 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 并将 deploy 添加到 package.json 中的 scripts
现在，每当您运行 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：可选地配置域
您可以通过将 CNAME 文件添加到 public/ 文件夹来配置 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` 来实现这个效果，但 URL 会更长，更冗长（例如，`http://user.github.io/todomvc/#/todos/42?_k=yknaj`）。阅读更多 关于 React Router 中不同的历史实现。
- 或者，你可以使用一个技巧来教 GitHub Pages 如何处理 404 错误，方法是将页面重定向到你的 `index.html` 页面，并使用自定义重定向参数。你需要在部署项目之前将包含重定向代码的 `404.html` 文件添加到 `build` 文件夹中，并且你需要在 `index.html` 中添加处理重定向参数的代码。你可以在这个指南 中找到对此技术的详细解释。
故障排除
"/dev/tty: No such a device or address"
如果在部署时出现 `"/dev/tty: No such a device or address"` 或类似错误，请尝试以下操作
- 创建一个新的个人访问令牌
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>.- 再次尝试 `npm run deploy`
"Cannot read property 'email' of null"
如果在部署时出现 `Cannot read property 'email' of null`，请尝试以下操作
git config --global user.name '<your_name>'git config --global user.email '<your_email>'- 再次尝试 `npm run deploy`
Heroku
使用Heroku Buildpack for Create React App.
你可以在Deploying React with Zero Configuration 中找到说明。
解决 Heroku 部署错误
有时 npm run build 在本地运行正常，但在通过 Heroku 部署时会失败。以下是最常见的情况。
"模块未找到：错误：无法解析 '文件' 或 '目录'"
如果你遇到类似这样的错误
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 作为部署路径。
要设置持续交付
通过这种设置，Netlify 会在你推送到 Git 或打开拉取请求时构建和部署。
- 创建一个新的 Netlify 项目
- 选择你的 Git 托管服务并选择你的仓库
- 点击
构建你的网站
支持客户端路由
要支持 pushState，请确保创建一个 public/_redirects 文件，其中包含以下重写规则
/* /index.html 200
当你构建项目时，Create React App 会将 public 文件夹的内容放置到构建输出中。
Vercel
Vercel 是一个云平台，使开发人员能够托管 Jamstack 网站和 Web 服务，这些服务可以立即部署、自动扩展，并且无需任何监督，所有这些都无需配置。他们提供了一个全球边缘网络、SSL 加密、资产压缩、缓存失效等等。
步骤 1：将您的 React 项目部署到 Vercel
要使用 Vercel for Git 集成 部署您的 React 项目，请确保它已推送到 Git 存储库。
使用 导入流程 将项目导入 Vercel。在导入过程中，您会发现所有相关的 选项 已为您预先配置，您可以根据需要进行更改。
项目导入后，所有后续推送到分支的操作都会生成 预览部署，对 生产分支（通常为“master”或“main”）所做的所有更改都会导致 生产部署。
部署后，您将获得一个 URL 来查看您的应用程序，例如以下 URL：https://create-react-app-example.vercel.app/。
步骤 2（可选）：使用自定义域名
如果您想在 Vercel 部署中使用自定义域名，您可以通过 Vercel 帐户域名设置 添加或转移您的域名。
要将您的域名添加到项目，请从 Vercel 仪表板导航到您的 项目。选择您的项目后，单击“设置”选项卡，然后选择域名菜单项。在项目的域名页面上，输入您要添加到项目的域名。
域名添加后，您将看到不同的配置方法。
部署新的 React 项目
您可以使用以下部署按钮部署一个新的 React 项目，并为您设置一个 Git 存储库
Vercel 参考：
Render
Render 提供免费的 静态网站 托管，包含完全托管的 SSL、全球 CDN 和来自 GitHub 的持续自动部署。
按照 Create React App 部署指南，只需几分钟即可部署您的应用程序。
使用邀请码 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 这样的工具来准备发布。