简体   繁体   English

如何使用本地后端在本地运行生产反应应用程序

[英]How to run production react app in local with local back-end

I have seen using production react app with server in local.我已经看到在本地使用带有服务器的生产反应应用程序。

But mostly I found the way is running production react app using express.js with Heroku.但大多数情况下,我发现使用 express.js 和 Heroku 运行生产反应应用程序的方法。

How to running production react app with server in local without any change of code?如何在不更改任何代码的情况下在本地服务器上运行生产反应应用程序?

make a production build of the react app locally, (run npm run build if you are using create react app ) and then you can use serve to run it locally by running serve -s build . 在本地create react app的生产版本(如果正在使用create react app ,则运行npm run build ),然后可以通过运行serve -s build来使用serve在本地运行它。 build is the folder name of your production build. build是生产版本的文件夹名称。

When you run npm run build your console should actually say something like the following 当您运行npm run build您的控制台实际上应该说类似以下内容

The build folder is ready to be deployed.
You may serve it with a static server:

npm install -g serve
serve -s build

The build script is building your entire app into the build folder, ready to be statically served. 构建脚本会将您的整个应用程序构建到build文件夹中,以供静态使用。 However actually serving it require some kind of static file server, like the the one they propose. 但是实际上为它提供服务需要某种静态文件服务器,例如他们建议的那种。

After running the command serve -s build you can access your production build at localhost (on the specified port). 运行命令serve -s build后,您可以在localhost(在指定端口上)访问生产版本。

You can of course run whatever static file server you like, I usually use express for this, however serve seems like the easiest option to just serve your statics files with a single command. 当然,您可以运行任何您喜欢的静态文件服务器,我通常为此使用express,但是serve似乎是仅通过单个命令即可提供static文件的最简单的选项。

As of date by default for CRA截止日期默认为 CRA

serve -s build服务 -s 构建

will deploy your app on localhost port 5000将在本地主机端口 5000 上部署您的应用程序

If you want to open on custom port use flag -l如果要在自定义端口上打开,请使用标志 -l

serve -s build -l customportnumber serve -s build -l customportnumber

CRA Deployment Official Docs CRA 部署官方文档

如果您想在默认的:8000端口上运行React应用程序,则更方便地创建一个将在端口:8000上运行的nginx代理服务器,并将您的请求代理到您的express应用程序中,该应用程序为在端口上运行的捆绑应用程序提供服务,例如:8081或您正在使用的任何端口。

There are various ways of achieving this.有多种方法可以实现这一点。

You can use http-server or serve packages for running local servers.您可以使用http-serverserve包来运行本地服务器。 If on MacOS, you can also use python SimpleHttpServer to host the production build folder.如果在 MacOS 上,您还可以使用 python SimpleHttpServer 来托管生产构建文件夹。

Reference: https://medium.com/@samratshaw/test-react-production-build-locally-434907be9e49参考: https : //medium.com/@samratshaw/test-react-production-build-locally-434907be9e49

You can follow these commands你可以按照这些命令

If you are using NPM :如果您使用的是NPM

  1. npm run build
  2. npm install -g serve
  3. npx serve -s build

And if you are using Yarn :如果您使用的是Yarn

  1. yarn build
  2. yarn global add serve
  3. npx serve -s build

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM