如何运行 create-react-app 构建版本

Question

我创建了一个测试React应用程序，并使用create-react-app开始它。我使用yarn start启动它，但这会启动应用程序的调试版本。我运行了npm run build并创建了构建文件夹，但是当我从/build文件夹中运行yarn start时，它仍然启动应用程序的调试版本。我需要这个来测试优化版本的性能。我该如何解决这个问题？

- gfels

---

我的建议回答有什么进展了吗？ - Paul McLoughlin

我已经更新了我的答案，并提供了使用Apache、Nginx和Express在本地运行生产构建的资源。 - Paul McLoughlin

Answer 1

您实际上可以使用静态服务器来运行应用程序的构建版本。可以使用 serve 来完成这一操作。您可以使用以下命令进行测试:

npm run build

npx serve -s build

- piasek

---

正是我所需要的。 - ItsGeorge

这个可以运行了，现在需要找出为什么我的网站上没有显示出来。 - Brad G.

Answer 2

首先进入您的应用程序目录。

根据官方create-react-app网站，运行npm run build 或 yarn build 以创建具有生产版本的build目录。

在运行上述命令后，您可以执行以下操作查看应用程序的构建版本：安装serve，在默认端口5000上服务静态站点。

npm install -g serve
serve -s build

这将复制链接到您的剪贴板，您可以将其粘贴到浏览器中查看您应用程序的构建版本。

- proprgrmmr

Answer 3

如果你正在从一个开发版本转移到一个生产版本，使用create-react-app，你需要使用Web服务器来部署它。我建议使用Heroku或droplet，或者你可以使用Netlify，它有一个简单的设置过程，使用以下命令：

cd project-name
npm run build

npm install netlify-cli -g
netlify deploy

跟随命令行提示，选择“yes”新建项目和“./build”作为你的部署文件夹，就可以拥有一个生产级别的React应用！你可以使用apache、nginx或express在本地托管应用。

- Paul McLoughlin

---

我不能在本地运行它而无需部署吗？ - gfels

是的，如果你在本地运行一个Web服务器。 - Paul McLoughlin

@gfels 这个回答解决了你的问题吗？ - Paul McLoughlin

Answer 4

如果你想在浏览器中使用本地文件系统提供的构建文件来运行应用程序（即不使用Web服务器），则可以将以下内容放入你的package.json文件中：

"homepage": ".",

现在

1. 使用npm run build构建您的应用程序。
2. 在浏览器中启动<your app>/build/index.html。

注意: 如果您的应用程序（或某些路由库）正在使用HTML5 pushState history API，则不建议使用此解决方案。https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

- Kiran Mohan