39 React 应用部署到云端平台

在这节中，我们将详细探讨如何将你的 React 应用部署到一个云端平台。我们将以 Vercel 和 Netlify 为例，这两者都是非常流行且易于使用的云端平台，适合托管 React 应用。

1. 准备 React 应用

在部署之前，请确保你的 React 应用已经完成并正常运行。要创建一个新的 React 应用，可以使用以下命令：

npx create-react-app my-app
cd my-app

然后使用以下命令启动开发服务器以检查应用是否正常运行：

npm start

你应该能在浏览器中看到你的应用。

2. 创建生产构建

在部署之前，我们需要创建一个生产环境的构建。使用以下命令来生成用于部署的构建文件：

npm run build

该命令会生成一个 build 文件夹，里面包含生产环境下的所有优化过的文件。

3. 部署到 Vercel

3.1 注册和登录

如果你还没有 Vercel 账号，可以去 Vercel 官网 注册一个账户并登录。

3.2 创建新项目

1. 登录后，点击 New Project 按钮。
2. 选择 Import Git Repository，然后连接你所使用的 GitHub、GitLab 或 Bitbucket 账户。
3. 选择你的 React 应用所在的存储库。

3.3 部署设置

在项目设置中，你通常可以使用默认配置。Vercel 会自动识别你的构建命令和输出文件夹（npm run build 及 build 文件夹）。

3.4 部署

点击 Deploy 按钮，Vercel 将会开始构建并部署你的应用。完成后，你将会获得一个可访问的链接，这就是你已部署的 React 应用。

4. 部署到 Netlify

4.1 注册和登录

同样，如果你还没有 Netlify 账号，可以去 Netlify 官网 注册并登录。

4.2 创建新站点

1. 登录后，点击 New site from Git 按钮。
2. 选择你所使用的 Git 提供商（例如 GitHub）。
3. 选择你的 React 应用所在的存储库。

4.3 部署设置

在部署设置中，输入以下信息：

• Build command: npm run build
• Publish directory: build

4.4 部署

点击 Deploy site 按钮，Netlify 将会开始构建并部署你的应用。完成后，你也会获得一个可访问的链接。

5. 访问和管理

无论你选择 Vercel 还是 Netlify，部署完成后，你都可以通过分享生成的链接来访问你的应用。此外，这些平台还提供了部署的管理面板，你可以在这里查看部署日志、设置域名、环境变量等配置。

5.1 自定义域名（可选）

如果你希望使用自定义域名，可以在 Vercel 或 Netlify 的面板中设置，将你的域名指向相应的应用。

6. 结语

通过以上步骤，你应该已经成功将你的 React 应用部署到了云端平台。无论使用 Vercel 还是 Netlify，它们都为开发者提供了简洁高效的部署流程，让你可以专注于开发，而不必担心部署的复杂性。希望这个小节对你能够有所帮助！