✂️ 👩🏼‍⚕️ ⬜️ Heroku和React：部署您的第一个应用程序 🚀 🎄 😔

大家好。随着春季的到来，OTUS开设了新课程，我们今天将开始介绍这些课程。已经为“ React.js开发人员”课程公开招募。您可以在3月11日举行的免费网络研讨会上了解有关该课程的更多信息。作为同一网络研讨会的一部分，将开发一个基于ReactJS的小型Web应用程序。

现在，我们建议您阅读由我们的自由作者撰写的有关第一个应用程序部署的文章。

启动模板Create-react-app和Heroku是快速创建基于云的应用程序的绝佳工具，但是React和Heroku文档中几乎没有关于如何在Heroku上发布React应用程序的信息。本文中描述的步骤将适用于使用create-react-app创建的任何项目。在我们的文章中，我们将在Heroku上安装一个具有最少后端的简单todo应用程序，以查看流程本身。但首先要注意的是：

Heroku一般是什么？我为什么需要他？

Heroku是基于云的平台即服务（PaaS）平台，它支持许多编程语言（它确实拥有并脱颖而出）。Heroku的历史始于2007年，然后Ruby是第一种编程语言。现在，它支持Java，Node.js，Scala，Clojure，Python，PHP和Go。

我为什么需要这个云？我可以买便宜的主机

是的，如果托管支持此服务，那么您可以自己购买任何托管并在其中安装Node.js服务器。但是，云平台具有诸如弹性和消耗计量的质量-如果很多用户访问您的服务，则该平台很可能会自动（或您自己使用平台提供的工具）扩展或缩小流量。计算消耗量意味着您将只为需要的那些资源付费。云平台具有更多优势，可以在此处找到完整列表。好吧，我们将直接进行部署。

创建自己的React应用程序

这是什么样的create-react-app模板？甚至不花一点时间参与开发React应用程序，而对此一无所知可能是不可能的。该模板“在幕后”提供了React，React-dom，Webpack，ESLint。当然，您可以自己构建自己的React应用程序，但是当您可以使用现成的自行车时，为什么还要创建一个具有大量依赖项的复杂应用程序呢？

要开始使用，请确保您有Node.js的安装。

要创建新的应用程序，请在控制台中输入以下命令：

 npx create-react-app test-app
 cd test-app

有用说明

, , create-react-app . npm install -g create-react-app. , ( , ), - , react-scripts 3.4.0. , npm uninstall -g create-react-app.

好的，您已经交付了软件包，现在您要部署它。为了不使用现成的组件create-react-app来部署一个简单的程序包，我决定编写一个小的todo应用程序，如果您还想尝试填写您的应用程序，可以在这里找到其源代码。简而言之，状态以新的时尚条目的形式保存在那里，案件的案文及其ID被保存，该条目直接从中生成Date.now()。我从Material-UI react参与了部分组件的布局。

您可以将这个应用程序放到自己身上，并使用以下方法进行部署：

 npm i -D
 npm start

然后，我们将有一个难得的机会来玩耍并创建自己的事务。但是，此应用程序中的所有功能都是将状态保存为state。我没有向服务器或至少向localStorage求婚，本文的目的不是这个。假设我非常偏执，并且只在浏览器选项卡的一个包含项中记录我的事务。

创建您的网站图标

如果数据库无法使用，为什么还要使用Node.js服务器呢？使用服务器，我们将提供favicon和所有其他代码。在我们作出反应的应用程序，进入公共文件夹，并删除从那里模板的favicon.ico。我将从此处获取图标，并将其传输到公用文件夹。

创建您的Express服务器

接下来，我们创建Express服务器以服务于构建。直接在应用程序文件夹中，创建一个文件server.js，后端的工作将在其中展开。

我们在其中写入以下内容：

 const express = require('express');
 const favicon = require('express-favicon');
 const path = require('path');
 const port = process.env.PORT || 8080;
 
 //           
 const app = express();
 app.use(favicon(__dirname + '/build/favicon.png')); 
 
 //    
 app.use(express.static(__dirname));
 app.use(express.static(path.join(__dirname, 'build')));
 
 //  
 app.get('/ping', function (req, res) {
  return res.send('pong');
 });
 
 // html
 app.get('/*', function (req, res) {
 res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
 app.listen(port);

由于我们使用express，express-favicon和path软件包，因此需要安装它们：

 yarn add express express-favicon path -D

在我们package.json将启动命令更改为以下内容：

 "start": "node server.js",

运行构建

接下来，我们需要使用以下命令来构建应用程序：

 yarn build

最好测试我们的应用程序是否正常工作。为此，我们招募yarn start并评估其工作原理。

隐藏原始地图

也许您不希望任何人都能访问您的源代码。在这种情况下，您需要删除对您的访问权限sourcemap。为此，请在存储库中创建一个文件，.env并禁止在其中生成地图：

 GENERATE_SOURCEMAP=false

有用说明

Source map ( , , , , - ). — source map, , .

直接部署

如果您尚未在heroku上拥有帐户，则应在此处注册。为了进行部署，您还需要从此处安装Heroku CLI 。通过在命令行上编写heroku登录来测试其操作。接下来，您将找到一个重定向到heroku网站的页面，您需要在该网站上登录。

然后输入您的应用程序名称。就我而言，它将是todoisakura313，因为您不能在应用程序名称中使用特殊字符和下划线：

 heroku create todoisakura313

然后，我们将使用以下命令发送构建：

 npm install
 git add --all
 git commit -m "first commit"
 git push heroku master

这些命令将允许您添加依赖项，初始化git和下载应用程序本身。

精细！通常，一切就绪，现在应用程序应该已经出现在address了https://< >.herokuapp.com/。您可以通过在控制台中键入以下命令来打开应用程序：

heroku open

如果出现问题，请找出团队存在的问题heroku logs --tail。但是，总的来说，如果您没有偏离本文中的说明，那么您应该已经成功。

就这样！谢谢您的关注。工作应用程序可以发现在这里，并与其完成的代码- 在这里。

那些读完了这些的人，我们邀请您参加另一个免费的网络研讨会，在该网络研讨会中，您将了解最流行的前端开发JS框架的优缺点，您将了解哪种框架最适合哪些任务，您可以决定哪种框架更好学习。

Heroku和React：部署您的第一个应用程序