小能豆

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

javascript

我使用 create-react-app 开发了一个小型 React 应用程序。(我一直从头开始制作应用程序。)

然后,在我对此感到满意之后,我决定运行npm run build以进行优化的生产构建。

有人能告诉我如何运行生产版本而不是开发版本吗?


阅读 45

收藏
2024-06-05

共1个答案

小能豆

要运行使用创建的 React 应用程序的生产版本create-react-app,您需要遵循以下步骤:

  1. 构建应用程序:运行npm run build命令以创建应用程序的优化生产版本。这将生成一个build包含所有静态文件的目录。

npm run build

  1. 提供构建文件:构建文件需要由静态文件服务器提供。有几种方法可以做到这一点,具体取决于您的要求和环境:

选项 1:使用简单的 HTTP 服务器(Node.js)

您可以使用简单的 HTTP 服务器来serve在本地提供构建文件。

  1. 安装serve(如果还没有安装):

npm install -g serve

  1. 提供构建目录

serve -s build

此命令将启动服务器并http://localhost:5000默认提供您的构建文件。

选项 2:使用现有的 Web 服务器(Apache、Nginx 等)

如果您有现有的 Web 服务器,则可以将其配置为提供目录的内容build

  1. build将目录复制到服务器的文档根目录。例如,使用 Nginx,您可以在 Nginx 配置中执行如下操作:

```
server {
listen 80;
server_name yourdomain.com;

   location / {
       root /path/to/your/build/directory;
       try_files $uri /index.html;
   }

}
```

选项 3:部署到托管服务(Netlify、Vercel、GitHub Pages 等)

许多托管服务可以轻松部署 React 应用程序:

  • Netlify:将您的文件夹拖放build到 Netlify 中,或连接 GitHub 存储库并让 Netlify 处理部署。
  • Vercel:直接从 Vercel CLI 或 GitHub 集成部署。
  • GitHub Pages:使用该gh-pages包将您的目录部署build到 GitHub Pages。

以下是 GitHub Pages 的一个简单示例:

  1. 安装gh-pages

npm install gh-pages --save-dev

  1. 将以下脚本添加到您的package.json

"scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" }

  1. 部署您的应用程序

npm run deploy

通过遵循这些步骤,您可以有效地运行并提供 React 应用程序的生产版本。

2024-06-05