如何将 React 应用程序部署到 Surge ？

React 是一个非常流行和广泛使用的用于构建用户界面的库。因此，如果您正在考虑部署您的 Static React 应用程序，那么我们可以使用浪涌包，使用单个命令将 Web 应用程序发布到 CDN，无需任何设置。

先决条件：已安装 Node.js 和 npm。

在 Windows 上安装 Node.js
在 Linux 上安装 Node.js

Surge：有一些免费的工具来托管我们的网站，比如 GitHub 和 Heroku，但是在仅发布前端时设置有点复杂。对于这种情况，我们可以使用 Surge。它是一个流行的 npm 库，用于通过一个命令部署静态网页。首先，我们创建项目的构建，然后在构建文件夹内的终端上编写浪涌命令。我们甚至可以为我们的项目选择一个自定义名称。

下面是分步实现：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app deploy

注意：如果您之前已经通过 npm 全局安装了 create-react-app，请直接使用以下命令：

反应应用程序创建

您的开发环境已准备就绪。现在让我们在我们的应用程序中安装浪涌。

第 2 步：创建项目文件夹（即 styled）后，移至同一文件夹：

cd deploy

第 3 步：可以通过 npm 在您的 React 应用程序中安装 Surge。按照下面给出的步骤在您的 React 应用程序中安装浪涌：要安装浪涌，请使用以下命令：

npm install --global surge

项目结构：它将如下所示。

第 4 步：现在创建一个虚拟项目并将以下代码放入您的App.js文件中。

App.js

import React from 'react';
  
function App(){
    return (
        Hello, World! 
    )
}
  
export default App;

第 5 步：现在您需要创建一个构建文件夹，以便您可以部署您的 React 应用程序。 Build 基本上捆绑并缩小了我们的代码，这个文件夹包含已编译的 React，归结为简单的 Html、CSS 和 JavaScript。

npm run build

第 6 步：现在我们可以托管和部署我们的 React 应用程序。现在你已经在你的系统中全局安装了“surge”，这样你将来就可以多次使用它。执行以下命令：

surge

第 7 步：它现在会询问您的电子邮件 ID 和密码（如果您是第一次使用它）。在这里，您需要输入您的电子邮件 ID 和您的浪涌帐户的新密码。

如果您已经登录，您将看到以下内容：

第 8 步：之后，您需要为您的静态文件（即构建文件夹）指定一个位置。如果您按照说明在同一文件夹中打开终端，请按 Enter。

第 9 步：现在它会要求您提供一个带有示例域名的域名。继续编辑“.surge.sh”之前的部分，如果该域可用，它将分配给您。现在您可以自定义网站的域名，它将托管在该 URL 上，您可以更改浪涌.sh 之前的部分。

第 10 步：现在按 Enter，您将获得通过网络发布的网站链接。

输出：现在，如果您打开 URL，您可以看到以下输出，或者您可以访问此链接以检查托管的 React App dapper-food.surge.eh

正如我们所见，托管静态网站的过程就激增是非常容易的。我们可以在浪涌时使用 2 个命令来托管我们的网站。