[英]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
如果您想在默认的: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-server
或serve
包来运行本地服务器。 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 :
npm run build
npm install -g serve
npx serve -s build
And if you are using Yarn :如果您使用的是Yarn :
yarn build
yarn global add serve
npx serve -s build
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.