18、React 应用部署与调试全攻略

最新推荐文章于 2025-10-15 09:07:30 发布

root9

最新推荐文章于 2025-10-15 09:07:30 发布

阅读量28

点赞数

CC 4.0 BY-SA版权

分类专栏： React与D3数据可视化文章标签： React Express Heroku

本文链接：https://blog.youkuaiyun.com/root9/article/details/151108080

React与D3数据可视化专栏收录该内容

18 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React 应用部署与调试全攻略

1. 运行 Express 服务器

要运行 Express 服务器并查看结果，可以使用 Node 启动服务器，并在端口 9000 上打开本地主机。操作步骤如下：
1. 运行服务器脚本：

$ node server.js

打开本地主机：

$ open http://localhost:9000/

如果要将应用部署到支持 Express 的服务器（如 Ubuntu），只需复制文件并将 NODE_ENV 变量设置为 production 后运行服务器脚本：

$ export NODE_ENV=production

2. 使用 Heroku 发布 Next.js 无服务器应用

2.1 创建 Heroku 账户和安装 CLI

创建 Heroku 账户：访问 https://signup.heroku.com/ 进行注册。
安装 Heroku CLI：
- macOS 用户（使用 brew）：在终端运行以下命令：

$ brew tap heroku/brew && brew install heroku

- Windows 用户：下载安装程序，链接为 [https://devcenter.heroku.com/articles/heroku-cli](https://devcenter.heroku.com/articles/heroku-cli)。

2.2 登录 Heroku 账户

在终端中运行以下命令登录账户，该命令会打开浏览器，要求你登录并确认：

$ heroku login

2.3 创建 Heroku 项目

在项目路径下，使用以下命令创建项目，这将创建项目并设置公共地址和 Git 位置：

$ heroku create nextjs-ts-chart

运行后会显示类似如下信息：

Creating ⬢ nextjs-ts-chart... done
https://nextjs-ts-chart.herokuapp.com/ | https://git.heroku.com/nextjs-ts-chart.git

2.4 修改 `package.json`

在发布前，需要将 package.json 中的启动脚本指向我们创建的服务器文件。将 package.json 从：

// package.json
"scripts": {
  "start": "next start",
  ..
}

修改为：

// package.json
"scripts": {
  "start": "node server.js",
  ..
}

2.5 构建并推送代码到 Heroku

使用 package.json 中的构建命令脚本创建构建，并将代码推送到 Heroku 服务器：

$ yarn run build
$ git remote
$ git push heroku master

2.6 Heroku 常用命令

提交更改：

$ git add && git commit -m 'change' && git push heroku master

推送非主分支：

$ git push heroku [branch name]:master

例如：

$ git push heroku HEAD:master

删除仓库：

$ git remote rm heroku

检查错误：

$ heroku logs --tail

3. 使用 CRA 创建并发布单页应用（SPA）

3.1 创建新项目

使用 CRA MHL 创建一个新项目：

$ yarn create react-app cra-ts-chart --template must-have-libraries
$ cd cra-ts-chart
$ yarn start
$ open http://localhost:3000

3.2 放置组件

将之前创建的 Rectangle.tsx 组件放置在 src/components/Rectangle/Rectangle.tsx 路径下。

3.3 修改 `App.tsx`

在 App.tsx 中添加 Rectangle.tsx 组件，并移除其余样板代码：

// src/App.tsx
import React from 'react'
import './App.scss'
import Rectangle from './components/Rectangle/Rectangle'

function App() {
  return (
    <div className="App">
      <Rectangle />
    </div>
  )
}

export default App

3.4 使用 `serve` 发布 CRA 代码

使用 package.json 中 CRA MHL 模板项目的运行脚本进行发布：

$ yarn build:serve

实际上，该脚本会运行以下两个脚本：

$ yarn build && serve -s build

此脚本会创建应用的优化版本，并在端口 5000（如果未被占用）上启动。要关闭服务器，在 Mac 上按 Command+C ，在 PC 上按 Control+C 。

3.5 使用 Express 发布 CRA 应用

3.5.1 安装 Express

将 Express 作为开发依赖项安装：

$ yarn add -D express

3.5.2 创建 `server.js` 文件

创建一个类似于为 Next.js 创建的 Express Node.js 文件：

const express = require('express')
const path = require('path')
const server = express()

const publicFolder = path.join(__dirname, 'build')
const port = process.env.PORT || 9000;

server.use(express.static(publicFolder))
server.get('*', (req, res) => {
  res.sendFile(path.join(publicFolder, 'index.html'))
});

server.listen(port, (err) => {
  if (err) throw err
  console.log(`Server Ready on http://localhost:${port}`)
})

3.5.3 测试运行

运行以下命令进行测试：

$ node server.js

3.6 使用 Heroku 发布 CRA 无服务器应用

步骤与 Next.js 类似：
1. 登录 Heroku：

$ heroku login

创建项目：

$ heroku create cra-ts-chart

添加启动脚本到 package.json ：

// package.json
"scripts": {
  "start": "node server.js",
  ..
}

构建并推送代码：

$ yarn build
$ git remote
$ git push heroku master

打开应用：

$ heroku open

4. 调试和分析工具

4.1 Chrome DevTools

Chrome DevTools 扩展是调试和分析应用的标准且常用工具。其他浏览器也提供类似的开发工具。以下是一些有用的 React 开发 DevTools 扩展管理工具：
| 工具名称 | 链接 |
| ---- | ---- |
| React Developer Tools | https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi |
| Realize for React | https://chrome.google.com/webstore/detail/realize-for-react/llondniabnmnappjekpflmgcikaiilmh |
| Recoil | https://chrome.google.com/webstore/detail/recoil-dev-tools/dhjcdlmklldodggmleehadpjephfgflc |

4.2 React Developer Tools Chrome DevTools 扩展

该扩展会在 Chrome 开发者工具中添加两个新标签：⚛ Components 和 ⚛ Profiler。
- Components 标签：可以检查 React 组件层次结构，查看组件的详细信息，如 React 版本、路由信息等。
- Profiler 标签：可以记录生产分析构建，通过 Flamegraph 工具显示每个组件的渲染总时间，颜色表示渲染时间（越绿越好），还包括排名和交互标签。

4.3 Realize for React Chrome DevTools 扩展

该工具可以帮助可视化 React 组件树，跟踪组件状态，提供组件层次结构的整体概述。

4.4 Recoil Chrome DevTools 扩展

在使用状态管理（如 Redux 或 Recoil）时，该工具可以跟踪状态的内部工作，提供有关原子、选择器和订阅者的信息。

4.5 React Profiler API

React Profiler API 包含一个 <Profiler/> 组件，可用于自定义指标，测量组件的生命周期时间。使用步骤如下：
1. 创建新项目：

$ yarn create react-app your-project-name --template must-have-libraries

重构 AppRouter.tsx 并包裹 <Profiler/> 组件：

// src/AppRouter.tsx
import { Profiler } from 'react'

const AppRouter: FunctionComponent = () => {
  return (
    <Profiler onRender={(id, phase, actualTime, baseTime, startTime, commitTime) => {
      console.log(`${id}'s ${phase} phase:`);
      console.log(`Actual time: ${actualTime}`);
      console.log(`Base time: ${baseTime}`);
      console.log(`Start time: ${startTime}`);
      console.log(`Commit time: ${commitTime}`);
    }}>
      <Router>
        <RecoilRoot>
          <Suspense fallback={<span>Loading...</span>}>
            <Switch>
              <Route exact path="/" component={App} />
            </Switch>
          </Suspense>
        </RecoilRoot>
      </Router>
    </Profiler>
  )
}

综上所述，在选择启动项目和发布 React 应用时，有多种选项可供选择。需要考虑的因素包括是否使用 SPA 或 SSR、启动项目的选择、服务器或无服务器部署等。同时，合理使用调试和分析工具可以帮助我们在开发过程中更高效地解决问题。

5. 部署与调试流程总结

为了更清晰地展示整个 React 应用的部署与调试流程，我们可以用 mermaid 流程图来呈现：

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px

    A([开始]):::startend --> B{选择项目类型}:::decision
    B -->|Next.js| C(运行 Express 服务器):::process
    B -->|CRA| D(创建新项目):::process
    C --> E(使用 Heroku 发布 Next.js 应用):::process
    D --> E1(放置组件):::process
    E1 --> E2(修改 App.tsx):::process
    E2 --> F{选择发布方式}:::decision
    F -->|serve| G(使用 serve 发布 CRA 代码):::process
    F -->|Express| H(使用 Express 发布 CRA 应用):::process
    F -->|Heroku| I(使用 Heroku 发布 CRA 无服务器应用):::process
    E --> J(调试和分析):::process
    G --> J
    H --> J
    I --> J
    J --> K([结束]):::startend

从这个流程图可以看出，整个过程主要分为项目选择、项目启动与配置、发布方式选择以及最后的调试和分析几个大的步骤。下面我们再用表格总结一下不同项目类型和发布方式的关键步骤：
| 项目类型 | 关键步骤 |
| ---- | ---- |
| Next.js | 1. 运行 Express 服务器
2. 创建 Heroku 账户和安装 CLI
3. 登录 Heroku 账户
4. 创建 Heroku 项目
5. 修改 package.json
6. 构建并推送代码到 Heroku |
| CRA | 1. 创建新项目
2. 放置组件
3. 修改 App.tsx
4. 选择发布方式（serve、Express、Heroku）
5. 对应发布方式的操作（如使用 serve 发布需运行 yarn build:serve 等） |

6. 不同发布方式的优缺点分析

6.1 Heroku 发布

优点：
- 操作相对简单，有详细的命令行工具支持，适合快速部署和测试。
- 提供了公共地址和 Git 位置，方便代码管理和版本控制。
- 可以轻松设置环境变量，如 NODE_ENV 为 production ，优化应用性能。
缺点：
- 对于大型项目或高流量应用，可能存在性能瓶颈和成本问题。
- 依赖于 Heroku 平台，如果平台出现问题，可能会影响应用的可用性。

6.2 serve 发布

优点：
- 命令简洁，只需运行 yarn build:serve 即可完成构建和发布。
- 会自动创建应用的优化版本，并在指定端口启动，方便快捷。
缺点：
- 功能相对单一，缺乏一些高级的部署和管理功能。
- 对于复杂的应用架构，可能无法满足需求。

6.3 Express 发布

优点：
- 灵活性高，可以根据需求自定义服务器配置，如端口、静态文件路径等。
- 可以与其他 Node.js 模块集成，扩展应用功能。
缺点：
- 需要手动配置服务器文件，对于初学者来说可能有一定难度。
- 部署和维护成本相对较高，需要更多的技术知识。

7. 调试和分析工具的应用场景

7.1 Chrome DevTools

场景：在开发过程中，当需要检查 DOM 元素、调试 JavaScript 代码、查看网络请求等时，Chrome DevTools 是一个非常强大的工具。它可以帮助我们快速定位问题，提高开发效率。
示例：当发现页面布局出现问题时，可以使用 Chrome DevTools 的 Elements 面板检查元素的样式和布局；当遇到 JavaScript 错误时，可以使用 Console 面板查看错误信息和调试代码。