React应用Azure/AWS部署构建失败问题排查及本地构建后推送AWS方案咨询

First off, great call switching from storing your 10,400 JSON entries as a .js array to a proper .json file—this definitely cuts down on unnecessary parsing overhead during builds. Now, to answer your core question: yes, you absolutely can build your React app locally and deploy the static build output directly to AWS, and this is actually the perfect fix for the cloud build failures and long build times you’re dealing with.

Why this works #

The "JavaScript heap out of memory" error you’re hitting on AWS is almost certainly because the cloud build environment has less available memory than your M1 MacBook Pro. When processing that large dataset during the build, it hits the memory limit and crashes. By building locally, you leverage your machine’s resources (which can handle the 10-minute build), then just push the pre-built static files to AWS—no need for the cloud to re-run the entire build process.

Step-by-step to deploy local build artifacts to AWS #

Here are two straightforward ways to do this with common AWS services:

• Option 1: Amazon S3 + CloudFront (for scalable static hosting)

  1. Run npm run build locally—this generates a build/ directory with all your static HTML/CSS/JS files.
  2. Create an S3 bucket, enable static website hosting in its settings, and set index.html as the default document.
  3. Upload the entire contents of your local build/ directory to the bucket: use the AWS Console, the AWS CLI command aws s3 sync build/ s3://your-bucket-name, or a GUI tool like S3 Browser.
  4. Optional: Set up a CloudFront distribution in front of the bucket to add CDN caching and HTTPS for better performance and security.

• Option 2: AWS Amplify Console (simpler managed hosting)

  1. After running npm run build locally, zip up the entire build/ directory.
  2. In the AWS Amplify Console, select your app, go to the "Deployments" tab, click "Deploy without Git provider", and upload the zipped build file. Amplify will handle hosting it for you automatically.

Extra tweaks to speed up local builds #

While building locally works, 10 minutes is still a long wait. Here are a few ways to trim that down:

• If your large JSON file isn’t needed right when the app loads, implement lazy loading for the component that uses it. This way, the JSON is only fetched when the component mounts, reducing initial build and load time.
• If your use case allows, split the large JSON file into smaller chunks (e.g., 10 files of 1,000 entries each). This cuts down on memory usage during both build and runtime.
• If you ever need to run cloud builds later, you can bump the Node.js heap memory limit by updating your build script in package.json:

  "scripts": {
    "build": "NODE_OPTIONS=--max-old-space-size=4096 react-scripts build"
  }
  

  This allocates 4GB of memory to the Node process, which might prevent the heap overflow error on cloud environments with enough resources.

Your project's package.json reference #

For context, here’s your project’s package.json configuration:

{ 
  "name": "az-demo", 
  "version": "0.1.0", 
  "private": true, 
  "dependencies": { 
    "@testing-library/jest-dom": "^5.14.1", 
    "@testing-library/react": "^11.2.7", 
    "@testing-library/user-event": "^12.8.3", 
    "qrcode": "^1.4.4", 
    "react": "^17.0.2", 
    "react-dom": "^17.0.2", 
    "react-qrcodes": "^1.0.7", 
    "react-scripts": "4.0.3", 
    "react-table": "^7.7.0", 
    "web-vitals": "^1.1.2" 
  }, 
  "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test", 
    "eject": "react-scripts eject" 
  }, 
  "eslintConfig": { 
    "extends": [ "react-app", "react-app/jest" ] 
  }, 
  "browserslist": { 
    "production": [ ">0.2%", "not dead", "not op_mini all" ], 
    "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] 
  }
}

内容的提问来源于stack exchange，提问作者Omri Fahn