在服务器上部署 React 应用

2020-11-07 08:00:00 · 飞浪

网上有许多托管和部署服务，只需几个简单的步骤就可以从远程服务器运行你的 React 应用程序。

介绍

成功构建并测试 React 应用后，最后一步是将其托管并部署到服务器上。这会将您的 React 应用公开，允许其他用户使用 URL 查看您的应用。网上有许多托管和部署服务，只需几个简单的步骤即可从远程服务器运行您的 React 应用。本指南将引导您完成在 Web 上部署 React 应用并从远程服务器运行它的整个过程。

创建 React 应用程序

使用 Create-React-App创建一个简单的hello-world-app 。

      npx create-react-app hello-world-app

修改App.js文件，如下所示。

      import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello world app</h1>
      </header>
    </div>
  );
}

export default App;
    

通过运行以下命令查看您的应用在本地服务器上的运行情况：

      npm start

在本地服务器 (https://localhost:3000) 上，您可以看到一个简单的 React 应用，其中显示“hello world”消息。下一步是让此应用做好生产部署准备。在根目录中运行以下命令：

      npm run build

这会在根目录中创建一个build目录，它将捆绑您的 React 应用并将其压缩为简单的 HTML、CSS 和 JavaScript 文件。此build文件夹通过一个简单的入口点index.html为您的应用提供服务，您的整个 React 应用都驻留在此目录中。通过远程服务器运行您的应用意味着在服务器上运行此index.html文件。

在 Netlify 上部署 React App

Netlify是一项云服务，可让您在几分钟内托管和部署 React 应用。它具有多种功能，最常见的是通过 Git 使用持续集成或静态部署进行部署。

通过 Git 进行持续集成

您可以在任何 Git 平台（例如GitLab、GitHub、Bitbucket等）上推送您的 React 项目，并将存储库连接到 Netlify 的远程服务器以进行持续集成。每当对默认分支进行任何更改时，都会自动部署您的应用程序。您还可以选择自动合并来自 Github、Gitlab 等的拉取请求。

在您选择的任何 Git 提供商（例如 GitHub）上创建一个简单的存储库，然后将hello-world-app推送到存储库上。确保您已经在 Netlify 上有一个帐户。转到站点部分并单击从 Git 新建站点按钮。

选择 Git 提供程序（在本例中为 Github）并选择存储库。

配置部署设置。选择要部署的默认分支（您可以选择 master 分支或任何其他分支），并确保构建命令为npm run build且发布目录为/build。

单击部署站点，您的 React 应用将部署到 Netlify 的远程服务器上。部署成功后，您将获得一个公共 URL，您可以通过该 URL 运行您的 React 应用。每当您推送任何更改或合并主分支中的任何更改时，Netlify 都会自动创建一个包含更新文件的新构建文件夹，并将更改部署到远程服务器上。

使用静态部署

第二种方法是直接部署构建文件夹。访问站点部分，下面你将看到一个文件上传器面板。选择你的 React 应用的构建文件夹并将其拖放到此区域。

单击“部署”并等待 Netlify 将您的应用部署到其远程服务器。

在 Firebase 上部署 React 应用

Firebase 是 Google 的云服务，它以服务的形式提供各种后端功能，以创建无服务器应用。Firebase 还允许您在其远程服务器上托管和部署您的 Web 应用。要在 Firebase 远程服务器上部署您的应用，请访问 https://firebase.google.com/ 并创建一个帐户。点击转到控制台。

在控制台上为网络创建一个新的 Firebase 应用。

按照简单的步骤创建一个新的 Firebase 项目。现在返回到您的 React 应用并运行以下命令：

      npm i -g firebase

这将安装 firebase CLI，以便通过其命令行界面访问各种 Firebase 服务。在根目录中，运行：

      firebase init

这会在你的 React 项目中创建一个新的 Firebase 项目。系统可能会提示你先登录。接下来，选择托管功能。

接下来，系统会询问您是否要创建新的 Firebase 项目或使用现有项目。由于您已经在 Firebase 控制台上创建了新的 Firebase 项目，因此请选择使用现有项目。

接下来，您会被问到一些配置问题。

      ? what do you want to use as your public directory? build

由于生产文件夹是构建目录，因此在此步骤中，您将告诉 Firebase，构建目录应作为该项目的公共目录。

      ? Configure as a single-page app (rewrite all urls to /index.html)? Yes

选择“是”来告诉 firebase 你的入口点是index.html

      ? File public/index.html already exists. Overwrite? No

最后，您不想用任何其他文件覆盖原始的index.html ，因此在此处选择否。所有配置步骤均已完成 - 现在您只需要在根目录中运行以下命令：

      firebase deploy

Firebase 现在将在其远程服务器上部署您的 React 应用程序并为您生成一个 URL，您可以使用该 URL 从远程服务器运行您的 React 应用程序。

结论

除了 Firebase 和 Netlify，您还可以探索其他平台，例如 Heroku 或 AWS，以部署您的 React 应用。这些云服务提供商还提供为您的应用设置SSL、使用自定义域等功能。您可以探索的另一个有趣的域是ngRok，它为您提供通往本地主机的安全隧道，可以从远程服务器运行您的 ReactJS，而无需实际部署应用。

了解更多

探索 Pluralsight 的这些 React 和 Redux 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在服务器上部署 React 应用

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <h1>Hello world app</h1> </header> </div> ); } export default App;