如何创建一个 create-react-app 的生产版本？

Question

我将尝试使用docker创建一个create-react-app的生产构建，同时配合express js后端进行在线部署。

以下是我的docker文件：

FROM node:12.18.3
WORKDIR /app
COPY ["package.json", "package-lock.json", "./"]
RUN npm install --production
COPY . .

RUN npm run build

EXPOSE 80
CMD ["npm", "start"]

我正在使用npm run build，但是React开发者工具仍然显示它是一个开发版本而不是生产版本。

此外，在源文件中，所有项目文件都是可见的，这些文件本应该是不可见的。

我尝试将以下语句添加到create-react-app根目录下的.env文件中，但项目文件仍然可见：

GENERATE_SOURCEMAP=false

如果有人能指导我如何修复这个问题并创建生产版本，那将非常有帮助。

谢谢。

- ccoder

Answer 1

您的源文件可见的原因很简单。这是由于CMD ["npm", "start"]。它基本上使用webpack-dev-server，而您的Docker镜像是在开发环境中构建的。为了将应用程序部署到生产环境中，您需要像nginx这样的Web服务器来提供静态文件，然后创建一个Docker镜像并在您选择的容器中运行。

- A.Sinha

Answer 2

你需要像nginx这样的Web服务器来提供build文件夹中的文件。npm run build只创建build文件夹，不会影响运行npm start时发生的任何事情。

- BrettS89

Answer 3

对于那些正在寻找解决方案的人，可以通过在项目目录中创建一个server.js文件并添加以下内容来解决问题：

const express = require('express');
const serveStatic = require('serve-static');
const path = require('path');
const app = express();

// create middleware to handle the serving the app
app.use("/", serveStatic ( path.join (__dirname, '/build') ) );
// Catch all routes and redirect to the index file
app.get('*', function (req, res) {
res.sendFile(__dirname + '/build/index.html')
});

// Create default port to serve the app on
const port = process.env.PORT || 3000
app.listen(port);

同时在 Docker 文件中添加：

CMD ["node", "server.js"]

替代

CMD ["npm", "start"]

- ccoder

Answer 4

npm run build

执行该命令将会创建一个构建目录，其中包含您应用的生产版本。在构建/static目录下，您将找到JavaScript和CSS文件。每个文件名都包含文件内容的唯一哈希值。这个哈希值在文件名中启用了长期缓存技术。

-

---

是的，这就是 https://create-react-app.dev/docs/production-build/ 上所说的内容。但我的问题是我无法在生产环境中部署，而且我不知道原因，正如上面 @Enthusiastic-coder 所提出的问题。 - ccoder