5_以正式环境构建并启动前端代码.md

[github-actions]

我是页眉

---

正则匹配链接[]()语法上有局限性 , 如有疑虑可查看本文原文

React render 过程中 throw 的异常 如何通过 ReactRouter 切换到 异常页面 不展示 红色错误蒙层(redbox)

• 默认情况下，React 会在开发模式下展示红色错误边界（redbox）以及错误信息。
• 身产环境默认不展示 redbox

React 管理 dev 模式 release 模式

在 React 应用中，通常使用环境变量来区分开发模式和生产模式。这可以通过 process.env.NODE_ENV 变量来实现。

在开发环境中，process.env.NODE_ENV 的值通常是 "development"，而在生产环境中，它的值通常是 "production"。

以下是如何在 React 中使用环境变量来管理开发和生产模式的一些示例：

使用 process.env.NODE_ENV

if (process.env.NODE_ENV === 'development') {
  // 在开发模式下执行的代码
  console.log('This is a development environment.');
} else if (process.env.NODE_ENV === 'production') {
  // 在生产模式下执行的代码
  console.log('This is a production environment.');
}

在 webpack 中设置环境变量

在 webpack 配置中，可以使用 DefinePlugin 插件来设置环境变量：

const webpack = require('webpack');

module.exports = {
  // 其他 webpack 配置...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
};

在 Create React App 中

如果你是使用 Create React App 创建的项目，你无需手动配置 webpack。Create React App 已经集成了环境变量的设置。你可以在代码中直接使用 process.env.NODE_ENV。

在 Create React App 中，可以使用以下命令来启动不同环境的开发服务器：

# 启动开发服务器（开发环境）
npm start

# 启动开发服务器（生产环境）
npm run build

在 Create React App 项目中，process.env.NODE_ENV 的值会自动随着启动命令而设置为相应的值。

在 React 应用中，使用这种方式能够更灵活地根据不同的环境执行不同的逻辑，例如启用或禁用日志、使用不同的 API 地址等。

启动生产服务器，用于在生产环境中运行你的 React 应用。

在生产环境中运行 React 应用通常需要使用一个服务器来托管构建后的静态文件。下面是一种常见的做法：

1. 使用 Express：
   • 安装 Express：

     npm install express

   • 创建一个服务器文件，例如 server.js：

     const express = require('express');
     const path = require('path');
     
     const app = express();
     
     // 静态文件托管
     app.use(express.static(path.join(__dirname, 'build')));
     
     // 所有其他请求都返回构建文件
     app.get('*', (req, res) => {
       res.sendFile(path.join(__dirname, 'build', 'index.html'));
     });
     
     // 启动服务器
     const port = process.env.PORT || 3000;
     app.listen(port, () => {
       console.log(`Server is running on port ${port}`);
     });

   • 修改 package.json 中的 "scripts"：

     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "start-prod": "node server.js"  // 新增的脚本
     },

2. 构建应用：

   npm run build

3. 启动生产服务器：

   npm run start-prod

   这会启动 Express 服务器，并在生产模式下运行 React 应用。你可以通过访问 http://localhost:3000 来查看应用。

这只是一种常见的做法，实际上有多种方法来托管 React 应用。你还可以考虑使用其他静态文件托管服务，如 Nginx、Apache，或者将应用部署到云服务平台上，如 Heroku、Netlify 或 Vercel。选择哪种方法取决于你的项目需求和偏好。

---

我是页脚