已在AWS Elastic Beanstalk部署react-create-app（开发环境），如何配置生产环境？

Got it, let's walk through how to switch your Create React App (CRA) from development to production mode on AWS Elastic Beanstalk. Here's a step-by-step breakdown that should get you sorted:

1. Prepare Your Production Build #

CRA's development mode uses react-scripts start, but production relies on optimized, compressed static files. You have two solid options here:

Option A: Build Locally First #

Run this command in your project root to generate a build folder with production-ready files:

npm run build

Make sure the build folder isn't excluded in your .gitignore (if deploying via Git) or included in your EB deployment package.

Option B: Let EB Build Automatically During Deployment #

If you don't want to build locally, add a postinstall script to your package.json—EB will run this right after installing dependencies:

"scripts": {
  "start": "node server.js", // We'll set this up next
  "build": "react-scripts build",
  "dev": "react-scripts start", // Keep this for local development
  "postinstall": "npm run build"
}

Note: Ensure your EB environment has enough resources to handle the build, and that the Node.js version matches CRA's requirements (check CRA docs for compatible versions).

2. Set Up a Static File Server (Fixes Routing & Serving Issues) #

CRA's build output is static files, so you need a server to serve them. A simple Express server works perfectly for single-page apps:

1. Install Express as a production dependency:

npm install express --save

2. Create a server.js file in your project root with this code:

const express = require('express');
const path = require('path');
const app = express();

// Serve static files from the build directory
app.use(express.static(path.join(__dirname, 'build')));

// Handle React routing: redirect all requests to index.html (fixes refresh 404 errors)
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// Use the port provided by EB (fallback to 3000 for local testing)
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port} in ${process.env.NODE_ENV} mode`);
});

3. Update your package.json's start script to use this server (as shown in Option B above). This ensures EB runs the production server instead of the dev server.

3. Configure EB to Use Production Mode #

EB needs explicit config to run your app in production:

• Log into the AWS Console and navigate to your Elastic Beanstalk application environment.
• Go to Configuration > Software.
• Under Environment properties, add or update the NODE_ENV variable to have a value of production.
• Save the configuration—EB will automatically restart your application with the new settings.

4. Redeploy Your Application #

Use the EB CLI (which you already have set up since you deployed once) to push your changes:

eb deploy

Wait for the deployment to finish—EB will install dependencies, run the build (if you chose Option B), and start the production server.

5. Verify Production Mode is Active #

Once deployment completes:

• Visit your EB app URL and confirm the app loads correctly.
• Open your browser's DevTools > Network tab: you'll see static assets with hashed filenames (a key sign of CRA's production build).
• Test routing (especially refreshing pages)—this should work now thanks to the Express server setup.

内容的提问来源于stack exchange，提问作者Rakesh Kumar