如何创建 create react 应用程序的生产版本？

Question

我正在尝试使用 docker.

为带有 express js 后端的 create-react-app 在线部署创建生产版本

这是我的 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 运行构建，但 React 开发人员工具仍然告诉我它是开发构建而不是生产构建。

同样在源代码中，所有项目文件都是可见的，但不应该是可见的：

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

GENERATE_SOURCEMAP=false

如果有人能指导我如何解决这个问题并创建生产版本，那将很有帮助。

谢谢

Answer 1

npm run build

创建一个构建目录，其中包含您的应用程序的生产构建。 build/static 目录内将是您的 JavaScript 和 CSS 文件。 build/static 中的每个文件名都将包含文件内容的唯一哈希值。文件名中的此哈希启用长期缓存技术。

Answer 2

您需要像 nginx 这样的 Web 服务器来提供构建文件夹中的文件。 npm 运行 build 只是创建构建文件夹，它对运行 npm start 时发生的事情没有任何影响。

Answer 3

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

Answer 4

对于寻求解决方案的人，可以通过在项目目录中创建包含以下内容的 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"]

如何创建 create react 应用程序的生产版本？

How to create a production build of a create react app?

docker

reactjs

create-react-app