react部署在node_如何在没有命令行的情况下在3分钟内将React + Node应用程序部署到Heroku

react部署在node

In this tutorial we will be doing a basic React + Node app deploy to Heroku.

在本教程中，我们将进行基本的React + Node应用程序部署到Heroku。

There are a lot of tutorials that do this only using the command line, so to change things up a bit, I will do it completely without the command line.

有很多教程仅使用命令行来执行此操作，因此，要稍微改变一下内容，我将完全不用命令行来执行此操作。

For things like generating React and Express apps, we have no choice but to use the command line. For everything else we'll use a GUI.

对于生成React和Express应用程序之类的事情，我们别无选择，只能使用命令行。 对于其他所有内容，我们将使用GUI。

I also assume you have a Github and Heroku account. They are both free, so no worries about signing up.

我还假设您有一个Github和Heroku帐户。 它们都是免费的，因此无需担心注册。

sample project:https://github.com/iqbal125/react-express-sample

示例项目： https ： //github.com/iqbal125/react-express-示例

React和快速设置 (React and Express Setup)

First, let's start by creating two directories named Server and Client.

首先，让我们开始创建两个名为Server和Client的目录。

The Client directory will hold the contents of the create-react-app command, and Server will hold the contents of the express command. This library just creates a simple Express app for us automatically, similar to create-react-app. It needs to be installed globally, which you can do so with the command:

Client目录将保存create-react-app命令的内容，而Server将保存express命令的内容。 这个库只是为我们自动创建一个简单的Express应用，类似于create-react-app 。 它需要全局安装，您可以使用以下命令进行安装：

npm install -g express-generator

npm install -g express-generator

After this, simply run these commands in each of the respective directories to install the starter projects:

之后，只需在每个相应的目录中运行以下命令来安装入门项目：

npx create-react-app app1 in the Client directory

客户端目录中的npx create-react-app app1

express in the Server directory

express在服务器目录

Change to the app1 directory generated by create-react-app and run:

转到由create-react-app生成的app1目录，然后运行：

npm run build

npm run build

This will generate a production build version of the project that is optimized for a production deployment, with things like the error handling code and white space removed.  

这将生成该项目的生产构建版本，该版本针对生产部署进行了优化，并删除了错误处理代码和空白。

Note: In a development build you would use a proxy to http://localhost:5000 to communicate from your React app to your Express server, but here the React app and the Express server are just one project. The Express server serves the React files.

注意：在开发构建中，您将使用http：// localhost：5000的代理从您的React应用程序与Express服务器进行通信，但是在这里，React应用程序和Express服务器只是一个项目。 Express服务器提供React文件。

Next, cut and paste the entire build directory into the Server directory. Your project structure should look like this:

接下来，将整个构建目录剪切并粘贴到Server目录中。 您的项目结构应如下所示：

We can now add some code to let our Express server know to serve our React project.:

现在，我们可以添加一些代码来让Express服务器知道为我们的React项目提供服务：

....

app.use(express.static(path.join(__dirname, 'build')));


app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

....

The first line of code serves all our static files from the build directory.

第一行代码为构建目录中的所有静态文件提供服务。

The second piece of code is to keep our client side routing functional. This code essentially serves the index.html file on any unknown routes. Otherwise we would need to rewrite our entire routing to work with this Express server setup.

第二段代码是保持我们的客户端路由功能正常。 此代码本质上在任何未知路由上提供index.html文件。 否则，我们将需要重写整个路由以与此Express服务器设置一起使用。

To test your app, just run npm start in the Server directory and go to http://localhost 3000 in the browser. Then you should be see your running React app.

要测试您的应用，只需在Server目录中运行npm start并在浏览器中转到http：// localhost 3000 。 然后，您应该会看到正在运行的React应用程序。

Now we are ready to upload this project to GitHub.

现在，我们准备将这个项目上传到GitHub。

的GitHub (GitHub )

Instead of using the command line to upload to GitHub, we will do this with the GUI. First, go to the GitHub homepage and create a new repository. Name it whatever you want, but make sure the Initialize this Repository with a README option checked:

我们将使用GUI来执行此操作，而不是使用命令行将其上传到GitHub。 首先，转到GitHub主页并创建一个新的存储库。 将其命名为任意名称，但请确保选中了使用README初始化此存储库选项：

Next upload all the project files without the node_modules directory.

接下来，上载所有没有node_modules目录的项目文件。

Click commit and we are done. Your uploaded project files will appear on GitHub like so:

单击提交，我们就完成了。 您上传的项目文件将出现在GitHub上，如下所示：

Now we can move on to setting up Heroku.

现在我们可以继续设置Heroku。

Heroku (Heroku)

Go to the Heroku dashboard, create a new app, and name it whatever you like.

转到Heroku仪表板，创建一个新应用，然后根据需要命名。

Next, go to the Deploy tab and select GitHub under Deployment method:

接下来，转到Deploy选项卡，然后在Deployment method下选择GitHub：

If you haven't connected your GitHub account to your Heroku account yet, you will be prompted through the GitHub Auth flow.

如果尚未将GitHub帐户连接到Heroku帐户，则将通过GitHub Auth流程提示您​​。

After this, search for your project on GitHub and connect to it:

之后，在GitHub上搜索您的项目并连接到它：

Finally, we can just deploy our app by clicking the Deploy Branch button:

最后，我们可以通过单击Deploy Branch按钮来部署我们的应用程序：

Heroku will install all the Node modules for you automatically. You can view your project by clicking on the View button.

Heroku将自动为您安装所有Node模块。 您可以通过单击查看按钮来查看您的项目。

And that's it, we're done! Thanks for reading.

就是这样，我们完成了！ 谢谢阅读。

Connect with me on Twitter for more updates on future tutorials: https://twitter.com/iqbal125sf

在Twitter上与我联系以获取未来教程的更多更新： https ： //twitter.com/iqbal125sf

翻译自: https://www.freecodecamp.org/news/deploy-a-react-node-app-to/

react部署在node