react app 部署_如何将React App部署到节点服务器

react app 部署

In this article, we will learn how to deploy a react app to a node server. Most of the developers know about setup react applications but some of them have always confusion about the deployment of the react application on production servers. So in this article, I will give you a step by step explanation to deploy a react project.

在本文中，我们将学习如何将React App部署到节点服务器。 大多数开发人员都了解设置React应用程序，但其中一些人始终对React应用程序在生产服务器上的部署感到困惑。 因此，在本文中，我将为您提供逐步说明，以部署一个React项目。

There are some steps to deploy a react app to the node server.

有一些步骤将React应用程序部署到节点服务器。

创建React应用程序 (Create react application)

Now let’s create a react app using create-react-app. Run the following command.

现在，我们使用create-react-app创建一个react create-react-app 。 运行以下命令。

$ create-react-app first-app

Otherwise, you can follow Create React App.

否则，您可以按照Create React App创建。

创建服务器文件 (Create server file)

You will have to enter first-app directory. Create a server.js file with the following contents in the root directory.

您将必须输入first-app目录。 在根目录中创建一个具有以下内容的server.js文件。

File Structure

档案结构

Also, we will serve the application on 4000 port. Make sure if you don’t have express installed in your system then install it.

另外，我们将在4 000端口上为该应用程序提供服务。 确保您的系统中没有安装Express，然后安装它。

创建一个React应用程序构建 (Create a build of react application)

Create a build of react application by running the following command.

通过运行以下命令创建一个React应用程序构建。

$ npm run build

You can see the newly created build folder in the root directory.

您可以在根目录中看到新创建的build文件夹。

使用npm软件包连续运行服务器 (Use npm package to run the server continuously)

At last, we are going to use the forever npm package to run the server continuously.

最后，我们将使用forever npm软件包来连续运行服务器。

Run the following command to install the package. Here we will globally install the package.

运行以下命令以安装软件包。 在这里，我们将在全球范围内安装该软件包。

$ npm i forever -g

Now execute the following command to run the server continuously.

现在执行以下命令以连续运行服务器。

$ forever start server.js

After successful execution, you can check the link http://localhost:3000/ .

成功执行后，您可以检查链接http://localhost:3000/ 。

Default React App

默认React应用

That’s it for this time! I hope you enjoyed this post. As always, I welcome questions, notes, comments and requests for posts on topics you’d like to read. See you next time!

这次就是这样！ 希望您喜欢这篇文章。 与往常一样，我欢迎您提出关于您要阅读的主题的问题，注释，评论和帖子请求。 下次见！

翻译自: https://medium.com/@rajputankit22/how-to-deploy-a-react-app-to-node-server-147748025a15

react app 部署