Create React App 部署

npm run build 创建一个 build 目录,用于存放应用程序的生成版本。 设置你喜欢的 HTTP 服务器,以便为你的站点的访问者提供 index.html ,并且对 /static/js/main.<hash>.js 等静态路径的请求与 /static/js/main.<hash>.js 文件的内容一起提供。 有关更多信息,请参阅 生产构建 部分。

静态服务器

对于使用 Node 环境,最简单的方法是安装 serve 并让它处理剩下的事情:

--- ------- -- -----
----- -- -----

上面显示的最后一个命令将为端口 5000 上的静态站点提供服务。与许多 serve 的内部设置一样,可以使用 -p--port 标志调整端口。

运行此命令以获取可用选项的完整列表:

----- --

其他方案

你不一定需要静态服务器才能在生产中运行 Create React App 项目。 它可以很好地集成到现有的动态服务器中。

这是使用 NodeExpress 的程序化示例:

----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------

------------------------------------------- -----------

------------ ------------- ---- -
  --------------------------------- -------- ---------------
---

-----------------

你选择的服务器软件并不重要。 由于 Create React App 完全与平台无关,因此无需显式使用 Node 。

具有静态资产的 build 文件夹是 Create React App 生成的唯一输出。

但是,如果使用客户端路由,这还不够。 如果你想在单页应用中支持 /todos/42 等网址,请阅读下一部分。

使用客户端路由服务于应用程序

如果你使用在底层使用 HTML5 pushState history API 的路由(例如,React Router 使用 browserHistory ),许多静态文件服务器将失败。例如,如果你使用带有 /todos/42 路由的 React 路由器,开发服务器将正确响应 localhost:3000/todos/42 ,但是服务于上述生产构建的 Express 不会正确响应。

这是因为当 /todos/42 有新的页面加载时,服务器会查找文件 build/todos/42 并且找不到它。需要配置服务器以通过提供index.html 来响应对 /todos/42 的请求。例如,我们可以修改上面的 Express 示例,为任何未知路径提供 index.html

 ------------------------------------------- -----------

------------- -------- ----- ---- -
-------------- -------- ----- ---- -
   --------------------------------- -------- ---------------
 ---

如果你使用的是 Apache HTTP Server ,则需要在 public 文件夹中创建一个 .htaccess 文件,如下所示:

    ------- -----------
    ------------- --
    ----------- ------------------- ---
    ----------- - ---------- -------

运行 npm run build 时,它将被复制到 build 文件夹。

如果你正在使用 Apache Tomcat ,则需要遵循 此 Stack Overflow 的回答

现在,对于 /todos/42 的请求将在开发环境和生产环境中都会被正确处理。

在生产版本中,当你 选择性加入 service worker时,将通过提供 index.html 的缓存副本自动处理所有导航请求,例如 /todos/42。 可以通过 ejecting 然后修改SWPreachePlugin 配置 中的 navigateFallbacknavigateFallbackWhitelist 选项来配置或禁用此service worker 导航路由。

当用户将你的应用安装到其设备的主屏幕时,默认配置将成为 /index.html 的快捷方式。 这可能不适用于希望从/提供应用程序的客户端路由器。 编辑 public/manifest.json 中的Web应用程序 manifest ,并更改 start_url 以匹配所需的 URL 方案,例如:

  ------------ ----

建立相对路径

默认情况下,Create React App 会生成一个构建,假设你的应用程序托管在服务器根目录下。
要覆盖它,请在 package.json 中指定 homepage ,例如:

  ----------- ------------------------------------

这将使 Create React App 正确地推断出在生成的 HTML 文件中使用的根路径。

注意: 如果你使用的是 react-router@^4 ,则可以使用任何 <Router> 上的 basename 属性来根 <Link>。 更多信息在 这里

例如:

-------------- ----------------------
----- ------------- -- ------- -- -----------------------

不同的路径服务相同的构建

注意:此功能适用于 react-scripts@0.9.0 及更高版本。

如果你没有使用 HTML5 pushState history API 或根本不使用客户端路由,则无需指定应用程序的 URL 。相反,你可以把它放在你的 package.json 中:

  ----------- ----

这将确保所有资产路径都与 index.html 相关。然后,你就可以将应用程序从 http://mywebsite.com 移动到http://mywebsite.com/relativepath 甚至 http://mywebsite.com/relative/path ,而无需重新构建。

为任意构建环境定制环境变量

你可以通过创建自定义 .env 文件并使用 env-cmd 加载它来创建任意构建环境。

例如,要为演示环境创建构建环境:

  1. 创建一个名为 .env.staging 的文件
  2. 像设置任何其他 .env 文件一样设置环境变量(例如 REACT_APP_API_URL=http://api-staging.example.com
  3. 安装 env-cmd
    - --- ------- ------- ------
    - - --
    - ---- --- -------
    
  4. package.json 中添加一个新脚本,使用新环境构建:
    -
      ---------- -
        ---------------- -------- ------------ --- --- ------
      -
    -
    

现在,你可以运行 npm run build:staging 来使用演示环境配置进行构建。你可以以相同的方式指定其他环境。

.env.production 中的变量将用作后备,因为 NODE_ENV 将始终设置为 production 以进行构建。

Azure

请参阅 此博客文章,了解如何将 React 应用程序部署到 Microsoft Azure 上。

有关使用自动部署到 Azure App Service 的方法,请参阅 此博客文章此 repo

Firebase

如果你还没有 Firebase ,请运行 npm install -g firebase-tools 安装Firebase CLI。注册 Firebase 帐户 并创建新项目。运行 firebase login 并使用之前创建的 Firebase 帐户登录。

然后从项目的根目录运行 firebase init 命令。你需要选择 Hosting: Configure and deploy Firebase Hosting sites,然后选择你在上一步中创建的 Firebase 项目。你需要同意正在创建的 database.rules.json ,选择 build 作为公共目录,并同意通过回复 y配置为单页面应用程序

    --- ------- -----

    ------ ----- --------- ---- ------- --------- ---- - -------- --------
    --- --- ------ -------- ------- ------- -- ------- -------- --- ------
    --- --- --- ----- ---- --- -- - ------- --------

    - ---- -------- ------- -- --- ---- -- --------- -- -------- ------- --- -------------------

    --- -------- -----

    -------- -------- -------- ----- ----- --- -- ------ --- ---- ---- ------ --
    ---------- --- ---- ---- ---- --- -- ---- ---- --- ------- ---

    - ---- ---- ------ -- ---- --- -------- ------ -------------------
    -  -------- ----- --- ----------------- ---- ---- ---------- -- --------------------
    ------ ------------- -- ------------------- ---- ------ -------- ----- ---- --- ---
    -------- -------

    --- ------- -----

    ---- ------ --------- -- --- ------ --------- -- ---- ------- ---------- ----
    ---- ------- ------- ------ -- -------- ---- -------- ------- -- ---
    ---- - ----- ------- --- ---- ------- --- ---- ------- ------ ----------

    - ---- -- --- ---- -- --- -- ---- ------ ---------- -----
    - --------- -- - ----------- --- -------- --- ---- -- ------------- ---
    -  ----- ----------------

    -  ------- ------------- ---- -- ----------------
    -  ------- ------- ----------- -- --------------

    -  -------- -------------- ---------

重要信息:你需要在 firebase.json 文件中为 service-worker.js 文件设置正确的 HTTP 缓存头,否则你将无法在首次部署后看到更改 (issue #2440) 。它应该添加到 "hosting" key 中,如下所示:

-
  ---------- -
    ---
    ---------- -
      ---------- --------------------- ---------- -------- ---------------- -------- -------------
    -
    ---

现在,在使用 npm run build 创建生产版本之后,你可以通过运行 firebase deploy 来部署它。

    --- --------- -- ----------------------

    -  --------- --------- -------
    -  --------- ----- ----- -- -------
    -  -------- --------- ----- --------- --- ---------
    ---------- -------------------------------          - ----  -------- ----- ------ -------- ------------
    -  -------- - ----- -------- ------------
    -  -------- ------- ------- ---- ---- ------- -----------

    -  ------ ---------

    ------- -------- ----------------------------------------------------------------------
    ------- ---- -----------------------------------------

有关更多信息,请参阅 Firebase Hosting

GitHub Pages

注意:此功能适用于 react-scripts@0.2.0 及更高版本。

第1步:将 homepage 添加到 package.json

以下步骤很重要!

如果你跳过它,你的应用将无法正确部署。

打开你的 package.json 并为你的项目添加一个 homepage 字段:

  ----------- --------------------------------------

或者对于 GitHub 用户页面:

  ----------- -------------------------------

或者对于自定义域页面:

  ----------- ------------------------

Create React App 使用 homepage 字段确定构建的 HTML 文件中的根 URL 。

第2步:安装 gh-pages 并将 deploy 添加到 package.jsonscripts

现在,无论何时运行 npm run build ,你都会看到一个备忘单,其中包含有关如何部署到 GitHub 页面的说明。

要在 https://myusername.github.io/my-app 上发布它,请运行:

--- ------- ------ --------

或者你可以使用 yarn:

---- --- --------

package.json"scripts" 中添加以下内容:

  ---------- -
-   ------------ ---- --- -------
-   --------- --------- -- -------
    -------- -------------- -------
    -------- -------------- -------

predeploy 脚本将在 deploy 运行之前自动运行。

如果要部署到 GitHub 用户页面而不是项目页面,则需要进行两项额外修改:

  1. 首先,将仓库的源分支更改为除 master 之外的任何分支。
  2. 另外,调整 package.json 脚本以将部署推送到 master
  ---------- -
    ------------ ---- --- -------
-   --------- --------- -- -------
-   --------- --------- -- ------ -- -------

第3步:通过运行 npm run deploy 来部署站点

然后运行:

--- --- ------

第4步:确保项目的设置使用 gh-pages

最后,确保 GitHub 项目设置中的 GitHub Pages 选项设置为使用 gh-pages 分支:

第5步:(可选)配置域名

你可以通过向 public/ 文件夹添加 CNAME 文件来使用 GitHub 页面配置自定义域名。

你的 CNAME 文件应如下所示:

-------------

客户端路由的注意事项

GitHub Pages 不支持底层使用 HTML5 pushState history API 的路由(例如,使用 browserHistory 的 React Router )。这是因为当像 http://user.github.io/todomvc/todos/42 这样的网址有新的页面加载时,其中 /todos/42 是前端路由,GitHub Pages 服务器返回 404,因为它不知道 /todos/42 。如果要将路由添加到 GitHub 页面上托管的项目中,可以使用以下几种解决方案:

  • 你可以从使用 HTML5 history API 切换到使用哈希值进行路由。如果你使用 React Router,你可以切换到 hashHistory 以获得此效果,但 URL 会更长且更冗长(例如,http://user.github.io/todomvc/#/todos/42?_k=yknaj ) 。阅读有关 React Router 中不同历史实现的更多信息
  • 或者,你可以在 GitHub Pages 使用一些小技巧,通过使用特殊的重定向参数重定向到你的 index.html 页面来处理 404 。在部署项目之前,你需要在构建文件夹中添加带有重定向代码的 404.html 文件,并且需要将处理重定向参数的代码添加到 index.html 。你可以在 本指南 中找到有关此技术的详细说明。

故障排除

"/dev/tty: No such a device or address"

如果在部署时,你得到 /dev/tty: No such a device or address 或类似的错误,请尝试以下操作:

  1. 创建一个新的 Personal Access Token
  2. git remote set-url origin https://<user>:<token>@github.com/<user>/<repo> .
  3. 再次尝试 npm run deploy

"Cannot read property 'email' of null"

如果在部署时,你得到 Cannot read property 'email' of null,请尝试以下操作:

  1. git config --global user.name '<your_name>'
  2. git config --global user.email '<your_email>'
  3. 再次尝试 npm run deploy

Heroku

Create React App 中使用 Heroku Buildpack
你可以在 部署具有零配置的 React 中找到相关说明。

解决 Heroku 部署错误

有时 npm run build 在本地工作,但在通过 Heroku 部署期间失败。 以下是最常见的情况。

"Module not found: Error: Cannot resolve 'file' or 'directory'"

如果你得到这样的东西:

------- ------ -- ------ - ---------- ------ -------
------- ------ --- ------ ------ ------ ------- ------ -- -----------
----------- -- -------------------

这意味着你需要确保 import 的文件或目录的字母大小与你在文件系统或 GitHub 上看到的字母大小写相匹配。

这很重要,因为 Linux(Heroku使用的操作系统)区分大小写。 所以 MyDirectorymydirectory 是两个不同的目录,因此,即使项目在本地构建,大小写的区别也会破坏 Heroku 远程的 import 语句。

"Could not find a required file."

如果你从包中排除或忽略必要的文件,你将看到类似这样的错误:

------- ----- --- ---- - -------- -----
-------   ----- ------------
-------   -------- --- --------------------------------------------------
-------
------- --- ---- ----- ------------------
------- --- ---- ---- ------------------------------------------------------------------- ------------------------------------------------------------------ ----- -------

在这种情况下,请确保文件中包含正确的lettercase,并且在本地 .gitignore~/.gitignore_global 中不会忽略该文件。

Netlify

要手动部署到 Netlify 的 CDN :

--- ------- ----------- --
------- ------

选择 build 作为部署路径。

要设置持续部署:

通过此设置,当你推送 git 或打开 pull 请求时,Netlify 将构建和部署:

  1. 启动一个新的 netlify 项目
  2. 选择你的 Git 托管服务并选择你的仓库
  3. 单击 Build your site

支持客户端路由:

要支持 pushState ,请确保创建 public/_redirects 文件,使用以下内容重写规则:

--  -----------  ---

在构建项目时,Create React App 会将 public 文件夹内容放入构建输出中。

Now

Now 提供零配置单命令部署。 你可以使用 now 免费部署你的应用。

  1. 通过推荐的 desktop tool 或通过 Node npm install -g now 安装 now 命令行工具。

  2. 通过运行 npm run build 来构建你的应用程序。

  3. 通过运行 cd build 进入构建目录。

  4. 在 build 目录中运行 now --name your-project-name。 你会在输出中看到一个 now.sh URL ,如下所示:

    - ------ ------------------------------------------- ------- -- ----------
    

在构建完成后将该 URL 粘贴到浏览器中,你将看到已部署的应用程序。

这篇文章 提供了详细信息。

S3CloudFront

请参阅 这篇博客文章,了解如何将React 应用程序部署到 Amazon Web Services S3 和 CloudFront。

Surge

如果还没有安装 Surge ,请运行 npm install -g surge 来安装 Surge CLI。 运行 surge 命令并登录或创建一个新帐户。

当询问项目路径时,请确保指定 build 文件夹,例如:

       ------- ----- ----------------------

请注意,为了支持使用 HTML5 pushState API 的路由,你可能需要在部署到 Surge 之前将 build. 目录中的 index.html 重命名为 200.html 。 这可 确保每个 URL 都回退到该文件

将组件发布到 npm

Create React App 不提供任何内置功能来将组件发布到 npm 。 如果你准备从项目中提取组件以便其他人可以使用它,我们建议将其移动到项目之外的单独目录中,然后使用像 nwb 这样的工具来发布。


上一篇:Title &amp; Meta 标签
下一篇:我可以使用 Decorators 吗?